Hi. Today, I am going to teach you about the Expressions in Angular JS.
"Expressions" are mainly used to bind application data to html. Expressions are written inside double braces like {{ expression}}. Expressions behaves in same way as "ng-bind directives". Angular JS application expressions are pure JavaScript expressions and outputs the data where they are used.
Let me elaborate it with the help of an example.
Expres.html:-
Screenshot:-
"Expressions" are mainly used to bind application data to html. Expressions are written inside double braces like {{ expression}}. Expressions behaves in same way as "ng-bind directives". Angular JS application expressions are pure JavaScript expressions and outputs the data where they are used.
Let me elaborate it with the help of an example.
Expres.html:-
<html>
<title>AngularJS Expressions</title>
<body>
<h1>Expressions In Angular JS</h1>
<div ng-app="" ng-init="quantity=1;cost=30;student={firstname:'Mahesh',lastname:'Parashar',rollno:101};marks=[80,90,75,73,60]">
<p>Hello {{student.firstname + " " + student.lastname}}!</p>
<p>Expense on Books : {{cost * quantity}} Rs</p>
<p>Roll No: {{student.rollno}}</p>
<p>Marks(Math): {{marks[3]}}</p>
</div>
<script src="angular.min.js"></script>
</body>
</html>
Screenshot:-
Explanation:-
In ng-init attribute under div tag, variables like quantity, cost etc., have been initialized.
Here, "student.firstname" means it will display Mahesh, which have been declared in the code. Similarly, "cost * quantity", will display the product of variable's value.
"marks[3]", is nothing but an array which have been used in the code. It will display the "third(3th)" value from the array, starting from 0.
No comments:
Post a Comment