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 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.

Recommended Videos

Course Schedule

Name Date
Website Development Architect 2020-12-05 2020-12-06
(Sat-Sun) Weekend batch
View Details
Website Development Architect 2020-12-12 2020-12-13
(Sat-Sun) Weekend batch
View Details
Website Development Architect 2020-12-19 2020-12-20
(Sat-Sun) Weekend batch
View Details

Leave a Reply

Your email address will not be published. Required fields are marked *