AngularJs Expressions - What are the expressions in AngularJS?
The angular expression shows user output in a particular place. The expression needs a data binding method to contain an expression. The AngularJS expression works with the double curly bracket and the "ng-bind" directive. The expression binds object, array, text, and user input data. The expression shows single or multiple different types of output information.
Syntax
There are two methods to use the expression to get output on the required application's place.
Method1
The following syntax shows you expression with double curly brackets.
|
<p> {{Expression}} </p> |
The "expression" can display objects, arrays, and data with the required operation.
Method2
The following syntax shows you expression with the "ng-bind" directive.
|
<span ng-bind = "Expression"></span> |
We can display multiple user input data with data binding directives. It helps to operate model, view, and controller methods.
Examples
The following examples show working procedure of the angularjs expression in web app.
Example #1: the following example shows expression with double curly bracket.
|
<!DOCTYPE html> <html> <head> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> </head> <body> <b> AngularJS Expression </b> <div ng-app = "" ng-init="test1='Very';test2='Good'"> <p> Congratulation! You get <b> {{ test2 }} </b> marks.</p> <p> Congratulation! You get <b> {{test1+ ' ' +test2 }} </b> marks.</p> </div> </body> </html> |
Output
The output image shows the basic AngularJS expression.
 |
Example #2: the following example shows expression with ng-bind directive.
|
<!DOCTYPE html> <html> <head> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> </head> <body> <b> AngularJS Expression with String </b> <div ng-app="" ng-init="test1='Very';test2='Excellent'"> <p> Congratulation! You get <b> <span ng-bind = "test2"></span></b> marks.</p> <p> Congratulation! You get <b> <span ng-bind = " test1+ ' ' + test2"></span></b> marks.</p> </div> </body> </html> |
Output
The output image shows the AngularJS expression with the "ng-bind" directive.
 |
Example #3: the following example shows expression with number.
|
<!DOCTYPE html> <html> <head> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> </head> <body> <b> AngularJS Expression with Number </b> <div ng-app="" ng-init="test1=61;test2=9"> <p> Congratulation! You get <b> {{ test1 + test2 }} </b> marks.</p> </div> </body> </html> |
Output
The image shows a basic AngularJS expression with the number.
 |
Example #4: the following example shows expression with object.
|
<!DOCTYPE html> <html> <head> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> </head> <body> <b> AngularJS Expression with Object </b> <div ng-app="" ng-init="tutorial={firstsubject:'angularjs',secondsubject:'Javascript'}"> <p> Welcome to <b> {{ tutorial.firstsubject}} </b> tutorial !</p> </div> </body> </html> |
Output
The image shows the AngularJS expression with the object.
 |
Example #5: the following example shows expression with array.
|
<!DOCTYPE html> <html> <head> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> </head> <body> <div> <b> AngularJS Expression with Array </b> <div ng-app="" ng-init="marks=[85, 76, 80, 92, 73, 84]"> <p> Congratulation!! You get <b> {{ marks[3]}} </b> % !</p> </div> </div> </body> </html> |
Output
The image shows a basic AngularJS expression with the array.
 |
Summary
The expression is essential in developing display output on the web application. It uses to connect user input data and data binding function on a single page. The expression comes with a data binding function in the AngularJS web app