AngularJS Expressions
AngularJS uses expressions to bind data to HTML.
AngularJS Expressions
AngularJS expressions are written inside double curly braces: {{ expression }}.
AngularJS expressions bind data to HTML, similar to the ng-bind directive.
AngularJS will "output" data where the expressions are written.
AngularJS expressions are much like JavaScript expressions: they can contain literals, operators, and variables.
Example: {{ 5 + 5 }} or {{ firstName + " " + lastName }}
AngularJS Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.tutorialpro.org/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
AngularJS Numbers
AngularJS numbers are like JavaScript numbers:
AngularJS Example
Same example using ng-bind:
AngularJS Example
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total: <span ng-bind="quantity * cost"></span></p>
</div>
| | Using ng-init is not very common. You will learn a better way to initialize data in the controllers chapter. | | --- | --- |
AngularJS Strings
AngularJS strings are like JavaScript strings:
AngularJS Example
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>Name: {{ firstName + " " + lastName }}</p>
</div>
Same example using ng-bind:
AngularJS Example
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>Name: <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>
AngularJS Objects
AngularJS objects are like JavaScript objects:
AngularJS Example
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>Last name: {{ person.lastName }}</p>
</div>
Same example using ng-bind:
AngularJS Example
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>Last name: <span ng-bind="person.lastName"></span></p>
</div>
AngularJS Arrays
AngularJS arrays are like JavaScript arrays:
AngularJS Example
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third value is {{ points[2] }}</p>
</div>
Same example using ng-bind:
AngularJS Example
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third value is <span ng-bind="points[2]"></span></p>
</div>
AngularJS Expressions vs. JavaScript Expressions
Like JavaScript expressions, AngularJS expressions can contain letters, operators, and variables.
Unlike JavaScript expressions, AngularJS expressions can be written inside HTML.
Unlike JavaScript expressions, AngularJS expressions do not support conditionals, loops, or exceptions.
Unlike JavaScript expressions, AngularJS expressions support filters.