IMG-LOGO
Home Tutorial Expressions  of Angular JS

Expressions  of Angular JS

by MH RISHAD - 10 Nov 2019
IMG

Expressions  of Angular JS

AngularJS expressions written into double 2nd brackets: {{ expression }}.

AngularJS expressions also be written inside a directive: ng-bind="expression".

AngularJS will resolve the expression, and return the result exactly where the expression is written.

AngularJS expressions are much like JS expressions:

 It’s contained literals, operators, and variables.

 

Example

 {{ 2+ 2}} or {{ FirstName + " " + LastName }}
Example
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
 
<div ng-app="">
  <p>Expression 1: {{ 2 + 2 }}</p>
</div>
</body>
</html>

If you remove the ng-app directive, HTML will display the expression as it is, without solving it:

 

Example

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div>
  <p> Expression 1 : {{ 2 + 2 }}</p>
</div>
</body>
</html>

 

Easy to write expressions wherever you want, AngularJS will simply resolve the expression and return the result.

“Let AngularJS change the value of CSS properties.”

Can change the color of the input box below, by changing its value:

blue

Example

<div ng-app="" ng-init=" myColor ='tblue'">
<input style="background-color:{{myColor}}" ng-model=" myColor ">
</div>

AngularJS Numbers

AngularJS numbers are like as JavaScript numbers:

Example

<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total: {{ quantity * cost }}</p>
</div>

Same example using ng-bind:

Example

<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total: <span ng-bind="quantity * cost"></span></p>
</div>

Using ng-init is not very common. You will learn a better way to initialize data in the chapter about controllers.

AngularJS Strings

AngularJS strings are much like JavaScript strings:

Example

<div ng-app="" ng-init="FirstName=’Smith’;LastName=’John’">
<p>The name is {{ FirstName + " " + LastName }}</p>
</div>

Same example using ng-bind:

Example

<div ng-app="" ng-init=" FirstName = ‘Smith’; LastName =’John’">
<p>Name is <span ng-bind=" FirstName + ' ' + LastName "></span></p>
</div>

AngularJS Objects

AngularJS objects are like JavaScript objects:

Example

<div ng-app="" ng-init="person={ FirstName: ‘Smith’, LastName: ’John’}">
<p>Name is {{ person. LastName }}</p>
</div>

Same example using ng-bind:

Example

<div ng-app="" ng-init="person={ FirstName:'Smith’, LastName: ’John’}">
<p>Name is <span ng-bind="person. LastName"></span></p>
</div>

Arrays

AngularJS arrays are much more like JavaScript arrays:

Example

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>

Same example using ng-bind:

Example

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is <span ng-bind="points[2]"></span></p>
</div>

 

Thank You

Next Will Come Soon About “ Angular JS Modules “

Share:

Leave a Comment

Required fields are marked *