What is AngularJS Expressions?
The AngularJS 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.
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
Watch this TypeScript vs JavaScript Tutorial Video for Beginners:
AngularJS Expressions AngularJS Expressions
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
Difference between AngularJS 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. |
If you want to learn about Angular Directives, refer to our Angular blog!