AngularJS Expressions
- AngularJS binds data to HTML using Expressions.
AngularJS 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 results exactly where the expression is written.
⇢ AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variable.
⇢ Example {{ 10 + 10 }} 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: {{ 10 + 10 }}</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: {{ 10 + 10}}</p>
</div>
</body>
</html>
⇢ You can write expression wherever you like, AngularJS will simply resolve the expression and return the result.
⇢ 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="myController='lightblue'">
<input style="background-color:{{myController}}" ng-model="myController">
</div>
AngularJS Numbers
⇢ AngularJS numbers are like JavaScript numbers.
Example :
<div ng-app="" ng-init="quantity=1; price=10">
<p>Total in dollar: {{ quantity * price}}</p>
</div>
OR
⇢ Same Example using ng-bind :
Example :
<div ng-app="" ng-init="quantity=1; price=10">
<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>
AngularJS Strings
⇢ AngularJS Strings are like JavaScript Strings :
Example :
<div ng-app="" ng-init="firstName='Dhaval';lastName='Purohit'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>
OR
⇢ Same Example using ng-bind :
Example :
<div ng-app="" ng-init="firstName='Dhaval';lastName='Purohit'">
<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>
AngularJS Objects
⇢ AngularJS objects are like JavaScript objects:
Example :
<div ng-app="" ng-init="person={firstName:'Dhaval',lastName:'Purohit'}">
<p>The name is {{ person.lastName }}</p>
</div>
OR
⇢ Same Example using ng-bind :
Example :
<div ng-app="" ng-init="person={firstName:'Dhaval',lastName:'Purohit'}">
<p>The name is <span ng-bind="person.lastName"></span></p>
</div>
AngularJS Arrays
⇢ AngularJS arrays are like JavaScript arrays :
Example :
<div ng-app="" ng-init="points=[1,2,3,4,5]">
<p>The third result is {{ points[2] }}</p>
</div>
OR
⇢ Same Example using ng-bind :
Example :
<div ng-app="" ng-init="points=[1,2,3,4,5]">
<p>The third result is <span ng-bind="points[2]"></span></p>
</div>
AngularJS Expressions vs. JavaScript Expressions
⇢ Like JavaScript expressions, AngularJS expression can contain literals, operators, and variables.
⇢ Unlike JavaScript expressions, AngularJS expressions can be written inside HTML.
⇢ AngularJS expression do not support condition, loops, and exception, while JavaScript expressions do.
⇢ AngularJS expressions support filters, while JavaScript expression do not.
Note : Using ng-init is not very common. You will learn a better way to initialize data in the chapter about controllers.
0 Comments