AngularJS Expression

AngularJS – Expression

An AngularJS Expression is used to bind application data into Hyper Text Markup Language (HTML). An expression is written inside double braces such as {{ expression}}. It behaves in the same way as ng-bind directives. In AngularJS application expression are pure JavaScript expressions and outputs the data where they are used.

For example:

{{ 5 + 5 }} or {{ firstName + “ ”+ lastName}}

Using Numbers in AngularJS Expression

<p>Expense on Books : {{cost * quantity}} Rs</p>

Using Strings

<p>Hello {{student.firstname + " " + student.lastname}}!</p>

Using Object in AngularJS Expression

<p>Roll No: {{student.rollno}}</p>

Using Array in AngularJS Expression

<p>Marks(Math): {{marks[3]}}</p>

Example

Following example will showcase all the above mentioned expressions.

<html>
<title>AngularJS Expressions</title>
<body>
<h1>Sample Application</h1>
<div ng-app="" ng-init="quantity=1;cost=30; student={firstname:'Meraj',lastname:'Ansari',rollno:101};marks=[70,80,80,70,75]">
   <p>Hello {{student.firstname + " " + student.lastname}}!</p>  
   <p>Expense on Books : {{cost * quantity}} Rs</p>
   <p>Roll No: {{student.rollno}}</p>
   <p>Marks(Math): {{marks[3]}}</p>
</div>
<script src="http://ajax.j2eebrain.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</body>
</html>

Compare AngularJS expression and JavaScript Expressions

An AngularJS expression such as JavaScript expression with the many differences:

  • Context: The JavaScript expressions are evaluated against the global window. In the AngularJS expressions are evaluated against a scope object.
  • Forgiving: In the JavaScript tries to evaluate undefined properties create ReferenceError and TypeError whereas AngularJS expression evaluation is forgiving to undefined and null.
  • No Control Flow Statements: In AngularJS following expression cannot use such as conditional, loops, or exceptions.
  • No Function Declaration: In AngularJS expression following function cannot be declare such as even inside ng-init directive.
  • No RegExp Creation with Literal Notation: In AngularJS expression cannot be create regular expressions.
  • No Comma and Void Operators: In Angular expression you cannot use , or void.
  • Filters: You can easily use filters within expressions to format data before displaying it.

Context

Angular does not accept JavaScript’s eval() to evaluate expressions. Rather than AngularJS $parse service processes these expressions. AngularJS expressions do not have access to global variables, such as window, document and location. This restriction is intentional. AngularJS expression prevents accidental access to the global state a general source of subtle bugs. Alternative use services such as $window and $location in functions is known from expressions. These services provide mockable access to global.

Example:

<div class="example2" ng-controller="ExampleFirstController">
  Name: <input ng-model="name" type="sometext"/>
  <button ngclick="greet()">Greet</button>
  <button ng-click="j2eebrain.alert('Should not see me')">Won't greet</button>
</div>

Forgiving 

Expression evaluation is forgiving to unaccepted and null. In the JavaScript evaluating (a.b.c) throws an exception if a is not an object. While this creates a sense of common purpose language, an expression evaluation is basically used for data binding, which often look like this example:

{{a.b.c}}

This makes more sense to appear nothing than to throw an exception if a is undefined. If an expression evaluation was not forgiving, we’d have to write bindings that culture the code. Example:

{{((a||{}).b||{}).c}}

 As it is, involving a function a.b.c() on undefined or null easily exchange undefined.

No Control Flow Statements

The part of the ternary operator (a ? b : c), you cannot write a control flow statement in an expression. The reason behind this is core to the AngularJS philosophy that application logic should be in controllers, not the any views. If you want a real loop, conditional or and throw from a view expression, alternate to a JavaScript technique rather.

No function declarations and Regular Expression creation with literal notation:

In AngularJS expression you cannot declare functions or create regular expressions. This is to ignore complex model transformation logic inside templates. This logic is better placed in a controller or in dedicated filter where it can be checked property.

$event

Many directives like ngClick and ngFocus expose a $event object within the scope of that expression. This object is an example of a jQuery Event Object when jQuery is appearing and a similar jqLite object.

Example:

<div ng-controller="EventMyController">
  <button ngclick="clickMe($event)">Event</button>
  <p><code>$event</code>: <pre> {{$event | json}}</pre></p>
  <p><code>clickEvent</code>: <pre>{{clickEvent | json}}</pre></p>
</div>