डाउनलोड पी.डी.एफ. ई-बुक्स
AJS - Expression

Expressions का इस्तेमाल HTML पर data को bind करने के लिए किया जाता है |

AngularJS के Expressions; Javascript के तरह होते है लेकिन ये Expressions {{..}} के अन्दर close किये जाते है |

Expression को लिखने के दो प्रकार है |

  1. {{expreesion}}
  2. ng-bind="expression" or class="ng-bind : expression"

Syntax for Expression

{{expression}}

As Attribute :
<element ng-bind="expression">
</element>

As Class:
<element class="ng-bind : expression">
</element>

What can Expression do ?

AngularJS Expression ये Javascript के सभी Operators का इस्तेमाल कर सकता है |

Expressions किसी भी data type के literals को समाविष्ट कर सकता है |

Javascript के मुकाबले AngularJS Expressions HTML में लिखा जाता है | लेकिन Javascript में उन्हें <script> Element के अन्दर लिखना पड़ता है |


What can not Expression do ?

Angular Expression ये किसी भी प्रकार के Loops, Conditional Statements, Exceptions और Regular Expressions को support नहीं करता है |

AngularJS Expressions({{..}}) पर Functions को दिया नहीं जा सकता है |

AngularJS Expressions ये comma(,), return और void को allow नहीं करता है |


Using Some Literals in Expressions

Source Code :
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>

<div ng-app="">

Integer(Number) : {{20}} <br />
Float(Number) : {{20.20}} <br />
String : {{"Welcome"}} <br />
Boolean : {{true}} <br />

</div>

</body>
</html>
Output :
Integer(Number) : 20 
Float(Number) : 20.2 
String : Welcome 
Boolean : true 

Example for Expressions

Source Code :
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>

<div ng-app="" ng-init="a=20;b=20">

Addition of a and b : {{a + b}} <br />
Boolean : {{true + true}} <!--true = 1 and false = 0 --><br /><br />

<div ng-bind="'Addition of a and b : '+ (a+b)"></div>

</div>

</body>
</html>
Output :
Addition of a and b : 40 
Boolean : 2 

Addition of a and b : 40

AngularJS Numbers and Strings

Source Code :
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>

<div ng-app="" ng-init="a=20;b=20;c='Hello';d='World'">

Addition of a and b : {{a + b}} <br />
Subtraction of a and b : {{a - b}} <br />
String : {{c +" "+ d}}

</div>

</body>
</html>
Output :
Addition of a and b : 40 
Subtraction of a and b : 0 
String : Hello World

AngularJS Array

Source Code :
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>

<div ng-app="" ng-init="arr = ['Ramesh', 'Rakesh', 'Mangesh']">

Array : {{arr}} <br /><br />

arr[0] : {{arr[0]}}<br />
arr[1] : {{arr[1]}}<br /><br />

<div ng-repeat="a in arr" >
{{a}}<br />
</div>

</div>

</body>
</html>
Output :
Array : ["Ramesh","Rakesh","Mangesh"]

arr[0] : Ramesh
arr[1] : Rakesh

Ramesh
Rakesh
Mangesh

AngularJS Objects

Source Code :
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>

<div ng-app="" ng-init="obj = {'name1':'Ramesh', 'name2':'Rakesh', 'name3':'Mangesh'}">

<div ng-repeat="(key, value) in obj" >
{{key}} : {{value}}<br />
</div>

</div>

</body>
</html>
Output :
Ramesh
Rakesh
Mangesh