AngularJS expressions are used to bind application data with HTML element. This expressions works in same way as we write in write in ng-bind directives. Expressions are written inside two curly braces as {{expression}}. This expressions are included in HTML elements.
ng-app directive is used to bind angular expressions. If we remove ng-app then it will show as simple text.
Example of Angular expression:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>Expression example: {{ 1 + 1 }}</p>
</div>
</body>
</html>
OUTPUT :
Expression example: 2
Different forms of expressions :
1. Angular expressions using numbers :
We can use numbers, numeric values , decimal values in Angular expressions.
Example:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>Expression using number example : {{ 5 * 10 }}</p>
</div>
</body>
</html>
OUTPUT :
Expression using number example : 50
2. Angular expressions using strings:
We can use strings in Angular expressions.
Example:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>Expression using string example <br/>
My name: {{ "Mona" + " " + "Jain" }}</p>
</div>
</body>
</html>
OUTPUT :
Expression using string example
My name: Mona Jain
3. Angular expressions using objects:
We can use objects in Angular expressions.
Example:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="" ng-init="user={firstName:'Mona',lastName:'Jain'}">
<p>Expression using object example <br/>
User name is {{user.firstName + " " + user.lastName }}</p>
</div>
</body>
</html>
OUTPUT :
Expression using object example
User name is Mona Jain
4. Angular expressions using array:
We can use array in Angular expressions.
Example:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="" ng-init="vowels=['a','e','i','o','u']">
<p>Expression using array example <br/>
The last vowel is {{ vowels[4] }}</p>
</div>
</body>
</html>
OUTPUT :
Expression using array example :
The last vowel is u
Hope, this blog will help you. Thanks
0 Comment(s)