AngularJS Expressions


AngularJS binds data to HTML using Expressions.


AngularJS Expressions

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

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

ng-app is an AngularJS directive. It's used to bootstrap (initialize) an AngularJS application within an HTML document. When AngularJS loads, it looks for the ng-app directive to determine which part of the HTML document it should manage.

Output :

AngularJS Expressions with CSS Properties

You can write expressions wherever you like. AngularJS will simply resolve the expression and return the result.

Example: Let AngularJS change the value of CSS properties.

Change the background color of the input box below:

Output :

AngularJS Numbers

AngularJS numbers are like JavaScript numbers:

Output :

AngularJS Strings

AngularJS strings are like JavaScript strings:

Output :