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