AngularJS Expression

Pritty October 4, 2018 Angular Js, Web Development Leave a comment 415 Views

Angularjs expressions are used to bind the data to html.The angularjs expressions are written inside {{ expression }} . It also written inside a directive like ng-bind=”expression”. AngularJS expressions are much like JavaScript expressions. They can contain literals, operators, and variables.

Eg: {{ 15 + 15 }} or {{ firstName + ” ” + lastName }}

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app>
<p>My first expression: {{ 15 + 15 }}</p>
</div>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<p>My first expression: {{ 15 + 15 }}</p>

</div>

</body>

</html>

The output of above code is like: My first expression: 30.

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

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

<!DOCTYPE html>

<html>

<body>

<div>

<p>My first expression: {{ 15 + 15 }}</p>

</div>

</body>

</html>

The output of above code is like: My first expression: {{ 15 + 15 }}.

AngularJS application expressions are pure javascript expressions and outputs the data where they are used.

Using object

<p>Roll No: {{student.firstname}}</p>

1	<p>Roll No: {{student.firstname}}</p>

Using numbers

<p>Total amount- Books : {{cost * numbers}} Rs</p>

1	<p>Total amount- Books : {{cost * numbers}} Rs</p>

In the AngularJS expressions with numbers example we just want to show a simple addition of two number variables called number1 and number2 and displayed their total(after addition) value.

<!DOCTYPE html>  
<html>  
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<body>  
<div ng-app="" ng-init="number1=20;number2=20;">  
<p>After Addition: {{number1+ number2 }}</p>  
</div>  
</body>  
</html>

<!DOCTYPE html>

<html>

<body>

<p>After Addition: {{number1+ number2 }}</p>

</div>

</body>

</html>

The output of above code is like: After Addition: 40.

Using array

<p>Marks(Math): {{marks[3]}}</p>

1	<p>Marks(Math): {{marks[3]}}</p>

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  

<div ng-app="" ng-init="marks=[11,15,29]">

    Subject1 : {{marks[0] }}<br>
    Subject2 : {{marks[1] }}<br>
    Subject3 : {{marks[2] }}<br>
</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

Subject1 : {{marks[0] }}<br>

Subject2 : {{marks[1] }}<br>

Subject3 : {{marks[2] }}<br>

</div>

</body>

</html>

The output as :

Subject1 :11
Subject2 :15
Subject3 :29

Using strings

<p>Hello {{student.firstname + " " + student.lastname}}!</p>

1	<p>Hello {{student.firstname + " " + student.lastname}}!</p>

In the AngularJS expressions with string example, we are going to define 2 strings of “firstName” and “lastName” and display them using expressions accordingly.

<!DOCTYPE html>
<html>
<body>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  


    <div ng-app="" ng-init="firstName='Pritty';lastName='Times'">

        First Name : {{firstName}}<br>
        last Name : {{lastName}}

    </div>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

First Name : {{firstName}}<br>

last Name : {{lastName}}

</div>

</body>

</html>

The output of above code is like:
First Name : Pritty
last Name : Times