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 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\">


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 ExpressionsJavaScript Expressions
AngularJS expressions can be written inside HTML.JavaScript expressions cannot be written inside HTML.
Do not support conditionals, loops, and exceptionsSupport conditionals, loops, and exceptions
Support filtersDoes not support filters
Contain literals, operators, and variables.Contain literals, operators, and variables.

Recommended Videos

Leave a Reply

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