Learning AngularJS Expressions in HTML

AngularJS Expressions

AngularJS Expressions are like the JavaScript code snippets that are mainly used for binding purposes. Angular expressions are always used to bind the data to HTML DOM element. All the expressions come inside the double braces {{expression}}.

Angular Expression can also be written inside directive attributes such as ng-bind="expression",ng-click="functionExpression()" etc.

AngularJS Expressions Vs JavaScript Expressions

There are some similarities and differences between Angular Expressions and JavaScript Expressions. The majority of them are listed below.

  • JavaScript expressions are evaluated against the global window and in Angular expressions are evaluated against a scope object.
  • Angular Expressions does not support conditional statements, loops, and exceptions while on the other hand JavaScript expression supports all these features.
  • Angular Supports filters within an expression to format the data while JavaScript does not support the filters.
  • You cannot create regular expressions in angular expression while on the other hand JavaScript supports the regular expression feature.
  • Both JavaScript and Angular supports Literals, operators and variables inside the expression.

How to use AngularJS Expressions

Angular Expression with Numbers

The above code will be evaluated by Angular and the result will be displayed in the DOM as 12.

Angular Expression with Strings

Angular Expression using Objects

Angular Expression with Arrays

Following examples is the combination of all the above AngularJS Expressions

The output of the above sample application when you run in the browser.

 

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.