Saturday, 7 January 2017

AngularJS Expressions

In AngularJS, expressions are used to bind application data to HTML. AngularJS resolves the expression, and return the result exactly where the expression is written.
Expressions are written inside double braces {{expression}}.They can also be written inside a directive:
  1. ng-bind="expression".  
AnularJS expressions are very similar to JavaScript expressions. They can contain literals, operators, and variables. For example:
  1. {{ 5 + 5 }} or {{ firstName + " " + lastName }}  

AngularJS Expressions Example

  1. <!DOCTYPE html>  
  2. <html>  
  3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <body>  
  5. <div ng-app>  
  6. <p>A simple expression example: {{ 5 + 5 }}</p>  
  7. </div>  
  8. </body>  
  9. </html>  
Test it Now
Note: If you remove the directive "ng-app", HTML will display the expression without solving it.
See this example:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <body>  
  5. <p>If you remove the directive "ng-app", HTML will display the expression without solving it.</p>  
  6. <div>  
  7. <p>A simple expression example:  {{ 5 + 5 }}</p>  
  8. </div>  
  9. </body>  
  10. </html>  
Test it Now
You can also write expressions wherever you want, AngularJS will resolve the expression and return the result.
Let's take an example to change the color of input box by changing its value.
See this example:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <body>  
  5. <p>Change the value of the input field:</p>  
  6. <div ng-app="" ng-init="myCol='pink'">  
  7. <input style="background-color:{{myCol}}" ng-model="myCol" value="{{myCol}}">  
  8. </div>  
  9. <p>AngularJS resolves the expression and returns the result.</p>  
  10. <p>The background color of the input box will be whatever you write in the input field.</p>  
  11. </body>  
  12. </html>  
Test it Now

AngularJS Numbers

AngularJS numbers are similar to JavaScript numbers.
  1.  <!DOCTYPE html>  
  2. <html>  
  3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <body>  
  5. <div ng-app="" ng-init="quantity=5;cost=5">  
  6. <p>Total in dollar: {{ quantity * cost }}</p>  
  7. </div>  
  8. </body>  
  9. </html>  
Test it Now
We can use the same example by using ng-bind:
See this example:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <body>  
  5. <div ng-app="" ng-init="quantity=5;cost=5">  
  6. <p>Total in dollar: <span ng-bind="quantity * cost"></span></p>  
  7. </div>  
  8. </body>  
  9. </html>                                                                                                                                                      
Test it Now

AngularJS Strings

  1. <!DOCTYPE html>  
  2. <html>  
  3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <body>  
  5. <div ng-app="" ng-init="firstName='Sonoo';lastName='Jaiswal'">  
  6. <p>My full name is: {{ firstName + " " + lastName }}</p>  
  7. </div>  
  8. </body>  
  9. </html>  
Test it Now
Same example with ng-bind:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <body>  
  5. <div ng-app="" ng-init="firstName='Sonoo';lastName='Jaiswal'">  
  6. <p>My full name is: <span ng-bind="firstName + ' ' + lastName"></span></p>  
  7. </div>  
  8. </body>  
  9. </html>  
Test it Now

AngularJS Objects

  1. <!DOCTYPE html>  
  2. <html>  
  3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <body>  
  5. <div ng-app="" ng-init="person={firstName:'Sonoo',lastName:'Jaiswal'}">  
  6. <p>My name is {{ person.firstName }}</p>  
  7. </div>  
  8. </body>  
  9. </html>  
Test it Now
Same example with ng-bind:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <body>  
  5. <div ng-app="" ng-init="person={firstName:'Sonoo',lastName:'Jaiswal'}">  
  6. <p>The name is <span ng-bind="person.firstName"></span></p>  
  7. </div>  
  8. </body>  
  9. </html>  
Test it Now

AngularJS Arrays

  1. <!DOCTYPE html>  
  2. <html>  
  3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <body>  
  5. <div ng-app="" ng-init="points=[1,15,19,2,40]">  
  6. <p>The first result is {{ points[0] }}</p>  
  7. </div>  
  8. </body>  
  9. </html>  
Test it Now
Same example with ng-bind:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <body>  
  5. <div ng-app="" ng-init="points=[1,15,19,2,40]">  
  6. <p>The first result is <span ng-bind="points[0]"></span></p>  
  7. </div>  
  8. </body>  
  9. </html>  
Test it Now

Difference between AngularJS Expressions and JavaScript expressions:

  • AngularJS expressions can be written inside HTML, while JavaScript expressions cannot.
  • AngularJS expressions support filters, while JavaScript expressions do not.
  • AngularJS expressions do not support conditionals, loops, and exceptions, while JavaScript expressions do.

Similarity between AngularJS Expressions and JavaScript expressions:

  • AngularJS expressions and JavaScript expressions both can contain literals, operators and variables.

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)