AngularJS Tutorial（3）from w3school



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 }}

AngularJS Example

< !DOCTYPE html >
< html >
< script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" > < /script >
< body >

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

< /body >
< /html >

Try it Yourself »

If you remove the ng-app directive, HTML will display the expression as it is, without solving it:

AngularJS Example

< !DOCTYPE html >
< html >
< script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" > < /script >
< body >

< div >
  < p >My first expression: {{ 5 + 5 }} < /p >
< /div >

< /body >
< /html >

Try it Yourself »

---

AngularJS Numbers

AngularJS numbers are like JavaScript numbers:

AngularJS Example

< div ng-app= "" ng-init= "quantity=1;cost=5" >

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

< /div >

Try it Yourself »

Same example using ng-bind:

AngularJS Example

< div ng-app= "" ng-init= "quantity=1;cost=5" >

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

< /div >

Try it Yourself »

	Using ng-init is not very common. You will learn a better way to initialize data in the chapter about controllers.

---

AngularJS Strings

AngularJS strings are like JavaScript strings:

AngularJS Example

< div ng-app= "" ng-init= "firstName='John';lastName='Doe'" >

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

< /div >

Try it Yourself »

Same example using ng-bind:

AngularJS Example

< div ng-app= "" ng-init= "firstName='John';lastName='Doe'" >

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

< /div >

Try it Yourself »

---

AngularJS Objects

AngularJS objects are like JavaScript objects:

AngularJS Example

< div ng-app= "" ng-init= "person={firstName:'John',lastName:'Doe'}" >

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

< /div >

Try it Yourself »

Same example using ng-bind:

AngularJS Example

< div ng-app= "" ng-init= "person={firstName:'John',lastName:'Doe'}" >

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

< /div >

Try it Yourself »

---

AngularJS Arrays

AngularJS arrays are like JavaScript arrays:

AngularJS Example

< div ng-app= "" ng-init= "points=[1,15,19,2,40]" >

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

< /div >

Try it Yourself »

Same example using ng-bind:

AngularJS Example

< div ng-app= "" ng-init= "points=[1,15,19,2,40]" >

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

< /div >

Try it Yourself »

---

AngularJS Expressions vs. JavaScript Expressions

Like JavaScript expressions, AngularJS expressions can contain literals, 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.