If you have read Introduction of Angular JS and First Angular JS Application example. Than you should familiar with AngularJS Expressions. Angular JS expressions are very common concepts in Angular JS. Basically it is used to bind application data to html. In this article I am going to explain about Angular JS Expressions.
Angular JS Expressions:
Angular JS Expressions are used to bind application data to html. Means, that we whenever we want to show the data to user based on any model value or any calculation or any variable, we will use expressions to bind the data to html. Expressions are written inside double braces like {{ expression}}. Expressions behaves similar as that of ng-bind directives. AngularJS application expressions are pure javascript expressions and outputs the data where they are used.
Using numbers in Angular JS Expressions:
1 | <p>Percentage of passed students is : {{passed*100/total}} %</p>
|
Using strings in Angular JS Expressions:
1 | <p>Hello {{student.firstname + " " + student.lastname}}, You are fail.</p>
|
Using object in Angular JS Expressions:
1 | <p>Roll No: {{student.rollno}} is fail.</p>
|
Using array in Angular JS Expressions:
1 2 3 | <p>Marks in English is : {{marks[3]}} <br>
Marks in Hindi is : {{marks[2]}}
</p>
|
Angular Expressions vs. JavaScript Expressions
Angular expressions are like JavaScript expressions with the following differences:
- Context: JavaScript expressions are evaluated against the global window. In Angular, expressions are evaluated against a scope object.
- Forgiving: In JavaScript, trying to evaluate undefined properties generates ReferenceError or TypeError. In Angular, expression evaluation is forgiving to undefined and null.
- No Control Flow Statements: You cannot use the following in an Angular expression: conditionals, loops, or exceptions.
- No Function Declarations: You cannot declare functions in an Angular expression, even inside ng-init directive.
- No RegExp Creation With Literal Notation: You cannot create regular expressions in an Angular expression.
- No Comma And Void Operators: You cannot use , or void in an Angular expression.
- Filters: You can use filters within expressions to format data before displaying it.
If you want to run more complex JavaScript code, you should make it a controller method and call the method from your view. If you want to eval() an Angular expression yourself, use the $eval() method.
Here we have our AngularJS Expression example:
Following example will show, how can we use above all the expressions in a html file. Let's create a html file named angularjs-expressions.html .
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <html>
<title>AngularJS Expressions Example - Dot Net Stuff</title>
<body>
<h1>Sample AngularJS Expressions Application</h1>
<div ng-app="" ng-init="passed=250;total= 500; student = {firstname:'Suresh',lastname:'Singh',rollno:321};marks = [80,50,67,56,60]" class="ng-scope">
<p class="ng-binding">Hello Suresh Singh, You are fail.</p>
<p class="ng-binding">Percentage of passed students is : 50 %</p>
<p class="ng-binding">Roll No: 321 is fail.</p>
<p class="ng-binding">Marks in English is : 56 <br>
Marks in Hindi is : 67
</p>
</div>
</body>
</html>
|
Summary: In this article my focus is to explain the basic of expressions in AngularJS. Now you can create your first AngularJS sample using AngularJS CDN library. This article also focus on different types of expressions in AngularJS. I hope you will like this article and now you are able to start with AngularJS easily.