Title
Angular JS Expressions
Introduction
Angular JS expressions are written inside curly braces i.e. {{expression}}.
Angular JS expressions binds data to HTML the same way as the ng-bind directives. Angular JS will “output” data exactly where the expression is written.
Angular JS expression are much like JavaScript expressions. They can contain literals, operators and variables.
Example: {{5*5}} or {{first_name + second_name}}
<div ng-app=””>
<p> My first expression: {{5*5}}
</p>
</div>
Note: if we remove ng-app directive, HTML will display the expression as it is without solving it.
Angular JS numbers
AJS numbers are like JavaScript numbers.
<div ng-app=”” ng-init=”quantity=1; cost=5”>
<p>Total amount :{{quantity*cost}}
</p>
</div>
Ex: using ng-bind
<div ng-app=”” ng-init=”quantity=1; cost=5”> <p>Total amount :<span ng-bind=”quantity*cost”> </span> </p> </div>
Note: Using ng-init is not very common. We will learn a better way to initialize data.
Angular JS Strings
AJS strings are like JavaScript.
<div ng-app=”” ng-init=”first_name=’Paras’; last_name=’Babbar’”>
<p>Full name is: {{first_name + last_name }}
</p>
</div>
Ex. Using ng-bind
<div ng-app=”” ng-init=”first_name=’Paras’; last_name=’Babbar’”>
<p>Full name is: {{first_name + last_name }}
</p>
</div>
Angular JS Object
AJS object are like JavaScript objects
<div ng-app=”” ng-init=”person={first_name=’Paras’; last_name=’Babbar’}”>
<p>Full name is: {{person.last_name }}
</p>
</div>
Using ng-bind
<div ng-app=”” ng-init=”person={first_name=’Paras’; last_name=’Babbar’}”>
<p>Full name is: ng-bind=’person.last_name’></span>
</p>
</div>
Angular JS Arrays
AJS arrays are like JavaScript arrays.
<div ng-app=”” ng-init=”points=[3,4,5,6]”>
<p>The points are {{points[2]}}
</p>
</div>
Ex using ng-bind
<div ng-app=”” ng-init=”points=[3,4,5,6]”> <p>The points are <span ng-bind=”points[2]”> </span> </p> </div>
Dummy Code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Angular JS 1</title>
<!--<script src="mianAngularJS/angular.min.js"></script>-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<!-- Angular JS Expression -->
<div data-ng-app="">
My First Expression:{{5+5}}
</div>
</body>
</html>
OUTPUT
