If you are interested to learn about the angular introduction
AngularJS binds data to HTML using Expressions.
AngularJS Expressions
Expressions are used to bind application data to HTML. Expressions are written inside double curly braces such as in {{ expression}}. Expressions behave similar to ngbind directives. 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.
Example
{{ 5 + 5 }} or {{ firstName + " " + lastName }}Example
!DOCTYPE html>
div ng-app="">
My first expression: {{ 5 + 5 }} If you remove the ng-app directive, HTML will display the expression as it is, without solving it:
Example
DOCTYPE html>
script src="
My first expression: {{ 5 + 5 }}You can write expressions wherever you like, AngularJS will simply resolve the expression and return the result. Let AngularJS change the value of CSS properties. Change the color of the input box below, by changing its value:
Example
div ng-app=""
init="myCol='lightblue'"
input style="background-color:
{{myCol}}" ng-model="myCol"How do you write expressions in AngularJS?
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 Numbers
AngularJS numbers are like JavaScript numbers:
Example
div ng-app=""
ng-init="quantity=1;cost=5"
Total in dollar: {{ quantity * cost }}Same example using ng-bind:
Example
div ng-app="" ng-init="quantity=1;cost=5"> Total in dollar: span ng-bind="quantity * cost"
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:
Example
div ng-app=""
ng-init="firstName='John'
lastName='Doe'">
The name is {{ firstName + " " + lastName }}Same example using ng-bind:
Example
div ng-app="" ng-init="firstName='John'; lastName='Doe'"> The name is span ng-bind="firstName + ' ' + lastName"
AngularJS Objects
AngularJS objects are like JavaScript objects:
Example
div ng-app=""
ng-init="person={firstName:'John',lastName:'Doe'
The name is {{ person.lastName }}Same example using ng-bind:
Example
div ng-app=""
ng-init="person={firstName:'John',
lastName:'Doe'}">
The name is span ng-bind="person.lastName">AngularJS Arrays
AngularJS arrays are like JavaScript arrays:
Example
div ng-app=""
ng-init="points=[1,15,19,2,40]">
The third result is {{ points[2] }}Same example using ng-bind:
Example
div ng-app="" ng-init="points=[1,15,19,2,40]"> The third result is span ng-bind="points[2]
How do Expressions work in AngularJS?
In Expressions are Just like JavaScript, small code snippets evaluated directly in HTML view using either interpolations or directive attributes. These expressions are always binded to the scope of the HTML and cannot be evaluated outside the scope. Expressions can contain literals, operators, variables, or directive attributes where a function can be called to evaluate the expression.
Another way of using AngularJS expression with complex logic is by making a function call from the HTML view and defining the function in the controller. $eval () method can be directly used in the HTML view to evaluate your expression
Some Limitations of expressions are:
- AngularJS Expressions cannot be any conditional or looping statements
- AngularJS Expressions doesn’t permit declaring a function
- Regular Expressions cannot be used with Expressions (use ng-patter instead)
- New Object creation cannot be done inside Expression
- Comma, Void, or bitwise Operators cannot be used in Expression
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. AngularJS expressions do not support conditionals, loops, and exceptions, while JavaScript expressions do. AngularJS expressions support filters, while JavaScript expressions do not.
