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.
Watch this TypeScript vs JavaScript Tutorial Video for Beginners:
AngularJS Expressions AngularJS Expressions
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
Want to be ready for a Job? Check out our blog on Angular Interview Questions!
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
To learn more about Angular check out Intellipaat’s Angular Course.
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!