In angular JS, expression starts with {{ and ends with }}. So an angular JS expression looks like {{expression}}. In this tutorial we will look into various examples of Angular JS Expressions.
[example title=”Example1:Adding two numbers. For below example the output is 7″]
<!DOCTYPE html>
<html lang=”en-US”>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<body>
<div ng-app=””>
{{5+2}}
</div>
</body>
</html>
[/example]
[example title=”Example2:Initialize variables before using in the expression”]
<!DOCTYPE html>
<html lang=”en-US”>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<body>
<div ng-app=”” ng-init=”firstName=’Hamidul’;lastName=’Islam'”>
Full Name is:{{firstName + ” “+lastName}}
</div>
</body>
</html>
[/example]
Explanation: In the above example the firstName and lastName are initialized. The output of the above example is
Full Name is:Hamidul Islam
[example title=”Example3:Addition and Multiplication of two numbers”]
<!DOCTYPE html>
<html lang=”en-US”>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<body>
<div ng-app=”” ng-init=”number1=3;number2=5″>
Addition of the two numbers:{{number1+number2}}
<br/>
Multiplication of the two numbers:{{number1*number2}}
</div>
</body>
</html>
[/example]
The output of the above example is
Addition of the two numbers:8
Multiplication of the two numbers:15
[example title=”Example4:Using object in expression”]
<!DOCTYPE html>
<html lang=”en-US”>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<body>
<div ng-app=”” ng-init=”customer={firstName:’Jan’,lastName:’Marc’}”>
<p>Customer last name is {{ customer.lastName }}</p>
</div>
</body>
</html>
[/example]
In the above example the customer is JSON object which is initialized using ng-init.The output is
Customer last name is Marc
[example title=”Example5:Using array in expression”]
<!DOCTYPE html>
<html lang=”en-US”>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<body>
<div ng-app=”” ng-init=”numbers=[10,11,190,20,44]”>
<p>The third number is {{ numbers[2] }}</p>
</div>
</body>
</html>
[/example]
In the above example numbers is an array which contains some numbers. The output is
The third number is 190