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 results exactly where the expression is written.
⇢ AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variable. 
⇢ Example  {{ 10 + 10 }} or {{ Firstname + " " + Lastname}}.

Example :

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

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

</body>
</html>

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

Example :

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

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

</body>
</html>

⇢  You can write expression wherever you like, AngularJS will simply resolve the expression and return the result. 
⇢  Example : Let AngularJS change the value of CSS properties. 
⇢  Change the color of the input box below, by  changing its value :

Example :


<div ng-app="" ng-init="myController='lightblue'">


<input style="background-color:{{myController}}" ng-model="myController">

</div>

AngularJS Numbers

⇢  AngularJS numbers are like JavaScript numbers.
Example :

<div ng-app="" ng-init="quantity=1; price=10">

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

</div> 
      
                  OR

⇢  Same Example using ng-bind : 

Example :

<div ng-app="" ng-init="quantity=1; price=10">

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

</div>

AngularJS Strings

 ⇢ AngularJS Strings are like JavaScript Strings :

Example :


<div ng-app="" ng-init="firstName='Dhaval';lastName='Purohit'">


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

</div>

                 OR

⇢  Same Example using ng-bind : 

Example :


<div ng-app="" ng-init="firstName='Dhaval';lastName='Purohit'">


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

</div>

AngularJS Objects

 ⇢  AngularJS objects are like JavaScript objects:

Example :


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


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

</div>
                OR

⇢  Same Example using ng-bind : 


Example :


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

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

</div>

AngularJS Arrays

⇢  AngularJS arrays are like JavaScript arrays :

Example :


<div ng-app="" ng-init="points=[1,2,3,4,5]">


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

</div>


                OR


⇢  Same Example using ng-bind :

Example :

<div ng-app="" ng-init="points=[1,2,3,4,5]">

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

</div>

AngularJS Expressions vs. JavaScript Expressions

⇢  Like JavaScript expressions, AngularJS expression can contain literals, operators, and variables.
⇢  Unlike JavaScript expressions, AngularJS expressions can be written inside HTML.

⇢  AngularJS expression do not support condition, loops, and exception, while JavaScript expressions do. 
⇢  AngularJS expressions support filters, while JavaScript expression do not.


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