Introduction To AngularJS Expressions

Using Expressions, AngularJS binds the data to HTML at the location where expression is mentioned on the web page. It can be written inside double braces, like {{expression}}. It can also be written in a different way, i.e. ng-bind=”expression”. ng-bind maps the inner HTML to the value of expression.

Let’s take an example of an HTML paragraph with equivalent expressions-

<p> {{ 5+5 }} </p>

OR

<p ng-bind=”5+5”></p>

As already mentioned, AngularJS resolves the expression and returns the result exactly where expression is written. They can contain literals, operators, and variables.

Example 1

Output

Sum of 10 and 20 is 30

Mentioning ng-app is important otherwise expression will not be calculated, and the output will be printed as-

Sum of 10 and 20 is {{ 10 + 20 }}

Example 2

Output

Dear Satyendra Mishra,

Mature amount of your deposit amount 100 on simple rate of interest 8% for 2 years will be 16.

AngularJS Objects

Example 3

You can also create objects, called AngularJS Objects.

Output

Dear Satyendra Mishra,

Mature amount of your deposit amount 100 on simple rate of interest 8% for 2 years will be 16.

AngularJS Arrays

Example 4

AngularJS Arrays are initialized using ng-init in the format provided in the below example. There is magic also, on select control. If you change the selected item, the last statement of this example changes.

Output

Additional Notes

• AngularJS expressions do not support conditionals, loops, and exceptions, while JavaScript expressions do.
• AngularJS expressions support filters, while JavaScript expressions do not.