Sunday, 26 April 2015

AngularJS Expressions



AngularJS binds data to HTML using Expressions.

AngularJS Expressions:
AngularJS expressions are written inside double braces: {{ expression }}.
AngularJS expressions binds data to HTML the same way as the ng-bind directive.
AngularJS will "output" data exactly where the expression is written.
AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables.
Example {{ 5 + 5 }} or {{ firstName + " " + lastName }}
<!DOCTYPE html>
<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

<body>

<div ng-app="">
 
<p>My first expression: {{ 5 + 4 }}</p>
</div>

</body>
</html>
If you remove the ng-app directive, HTML will display the expression as it is, without solving it.

AngularJS Numbers:
AngularJS numbers are like JavaScript numbers:
<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: {{ quantity * cost }}</p>

</div>
Same example using ng-bind:
<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>

</div>

AngularJS Strings:
AngularJS strings are like JavaScript strings:
<div ng-app="" ng-init="firstName='Ravi';lastName='Gupta'">

<p>The name is {{ firstName + " " + lastName }}</p>

</div>
Same example using ng-bind:
<div ng-app="" ng-init="firstName='Ravi';lastName='Gupta'">

<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>

</div>

AngularJS Objects:
AngularJS objects are like JavaScript objects:
<div ng-app="" ng-init="person={firstName:'Ravi',lastName:'Gupta'}">

<p>The name is {{ person.lastName }}</p>

</div>
Same example using ng-bind:
<div ng-app="" ng-init="person={firstName:'Ravi',lastName:'Gupta'}">

<p>The name is <span ng-bind="person.lastName"></span></p>

</div>

AngularJS Arrays:
AngularJS arrays are like JavaScript arrays:
<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is {{ points[2] }}</p>

</div>
Same example using ng-bind:
<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is <span ng-bind="points[2]"></span></p>

</div>


No comments:

Post a Comment