Objectives and outcomes

In this tutorial we are going to learn about how expressions helps in using application data in HTML. Expressions are used by writing them inside curly braces {{}}. They can also be used with ng-bind statement. The expressions could be of any type namely numerical, string or object as well.



Below we have shown various examples of expressions use. First one is for numeric expressions by directly specifying values. Second uses variable which are initialized. Third is used to concatenate the strings. In the fourth expression we have used ng-bind as well we have accessed the application data which is present in array form by giving the index number. Fifth expression we have used to style the button.



<html>
<head>
<meta charset="utf-8">
<title>AngularJS Expressions</title>
<script src="angular-1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="">

<p>Numeric expressions: {{5 / 2}}</p><br/>

<div ng-init="opr1=3;opr2=6;">
<p>Numeric expression with variable: {{opr1 * opr2}}</p>
</div><br/>

<div ng-init="str1='Welcome';str2='codeshot.in';">
<p><b>{{str1 + " to " + str2}}</b></p>
</div><br/>

<div ng-init="name=['Alfred','Joseph','Tony'];">
<p>The name of third person is: <b><span ng-bind="names[2]"></span></b></p>
</div><br/>

<div ng-init="colr='red';bdr='1px solid #585858';" >
<button style="color:{{colr}}; border:{{bdr}};">text-color</button>
</div>

</div>
</body>
</html>


Numeric expressions: {{5 / 2}}


Numeric expression with variable: {{opr1 * opr2}}


{{str1 + " to " + str2}}


The name of third person is: