AngularJS binds data to HTML using Expressions. AngularJS expressions can be written inside double braces: {{ expression }}. AngularJS expressions can also be written inside a directive: ng-bind=”expression”. AngularJS will resolve the expression, and return the result exactly where the expression is written.
AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables. For example, {{ 5 + 5 }} or {{ firstName + ” ” + lastName }}
Example
<!DOCTYPE html>
<html>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”></script>
<body>
<div ng-app=””>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
If you remove the ng-app directive, HTML will display the expression as it is, without solving it:
Example
<!DOCTYPE html>
<html>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”></script>
<body>
<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
You can write expressions wherever you like, AngularJS will simply resolve the expression and return the result. For example, Let AngularJS change the value of CSS properties. Change the color of the input box below, by changing its value:
Example
<div ng-app=”” ng-init=”myCol=’lightblue'”>
<input style=”background-color:{{myCol}}” ng-model=”myCol”>
</div>
AngularJS Numbers
AngularJS numbers are like JavaScript numbers:
Example
<div ng-app=”” ng-init=”quantity=1;cost=5″>
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
Using ng-init is not very common.
AngularJS Strings
AngularJS strings are like JavaScript strings:
Example
<div ng-app=”” ng-init=”firstName=’Demo’;lastName=’User”>
<p>The name is {{ firstName + ” ” + lastName }}</p>
</div>
AngularJS Objects
AngularJS objects are like JavaScript objects:
Example
<div ng-app=”” ng-init=”person={firstName:’Demo’,lastName:’User’}”>
<p>The name is {{ person.lastName }}</p>
</div>
AngularJS Arrays
AngularJS arrays are like JavaScript arrays:
Example
<div ng-app=”” ng-init=”points=[1,15,19,2,40]”>
<p>The third result is {{ points[2] }}</p>
</div>
AngularJS expressions are like JavaScript expressions with the following differences:
- Context: JavaScript expressions are evaluated against the global window. In AngularJS, expressions are evaluated against a scope object.
- Forgiving: In JavaScript, trying to evaluate undefined properties generates ReferenceError or TypeError. In AngularJS, expression evaluation is forgiving to undefined and null.
- Filters: You can use filters within expressions to format data before displaying it.
- No Control Flow Statements: You cannot use the following in an AngularJS expression: conditionals, loops, or exceptions.
- No Function Declarations: You cannot declare functions in an AngularJS expression, even inside ng-init directive.
- No RegExp Creation With Literal Notation: You cannot create regular expressions in an AngularJS expression. An exception to this rule is ng-pattern which accepts valid RegExp.
- No Object Creation With New Operator: You cannot use new operator in an AngularJS expression.
- No Bitwise, Comma, And Void Operators: You cannot use Bitwise, , or void operators in an AngularJS expression.
If you want to run more complex JavaScript code, you should make it a controller method and call the method from your view. If you want to eval() an AngularJS expression yourself, use the $eval() method.
