What are Angular Expressions?
The Angular expressions are expressed as {{ }} that associates data to HTML. It displays the data written inside the braces. The expressions are the JavaScript code snippets located inside the bindings.
Watch this Full Stack Web Development Course video:
AngularJS Numbers
e.g.
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="" ng-init="salary=10000; month=4">
/* In case of ng-bind use <p>Total Salary: <span ng-bind="salary* month"></span></p> */
<p>Total salary: {{salary * month }}</p>
</div>
</body>
</html>
Output
Total salary: 40000
AngularJS Strings
e.g.
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="" ng-init="firstName='Neha';lastName='Garg'">
/* In case of ng-bind use <p>Full name: <span ng-bind="firstName + ' ' + lastName"></span></p> */
<p>Full name: {{ firstName + " " + lastName }}</p>
</div>
</body>
</html>
Output
Full name: Neha Garg
AngularJS Objects
e.g.
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="" ng-init="Employee={Name:'abc'}">
/*In case of ng-bind use <p>Name: <span ng-bind="Employee.Name"></span></p>*/
<p>Name: {{ Employee.Name }}</p>
</div>
</body>
</html>
Output
Name: ABC
AngularJS Arrays
e.g.
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="" ng-init="id=[1,2,3,4,5,6]">
/* <p> Last Id: <span ng-bind="id [5]"></span></p> */
<p>Last Id: {{ id[5] }}</p>
</div>
</body>
</html>
Output
Last Id: 6
Get 100% Hike!
Master Most in Demand Skills Now!
Difference between Angular Expressions and JavaScript Expressions
| AngularJS Expressions |
JavaScript Expressions |
| AngularJS expressions can be written inside HTML. |
JavaScript expressions cannot be written inside HTML. |
| Do not support conditionals, loops, and exceptions |
Support conditionals, loops, and exceptions |
| Support filters |
Does not support filters |
| Contain literals, operators, and variables. |
Contain literals, operators, and variables. |