a blog for those who code

Thursday 1 January 2015

Let us know a little about AngularJS Expressions

In this post we will discuss little about AngularJS Expressions. In our earlier post we have gone through the Basic Introduction to AngularJS and Creating Basic AngularJS Application : Hello World.

AngularJS expressions are written inside double curly braces {{expression}}. AngularJS expressions binds data to HTML using ng-bind directive. AngularJS Expressions are like Javascript Expressions i.e. they can contain literals, operators and variables.

Example 1 : Normal Arithmatic Operations

<!DOCTYPE html>
<html>

<body>
    <h1> Hello World</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
    <div ng-app="">
       <p>Addition : {{ 7 + 5 }}</p>
       <p>Substraction : {{ 7 - 5 }}</p>
       <p>Muoltiplication : {{ 7 * 5 }}</p>
       <p>Division : {{ 7 / 5 }}</p>
       <p>Modulus : {{ 7 % 5 }}</p>
    </div>
</body>
</html>

Example 2 : Arithmetic Operations using variables

<!DOCTYPE html>
<html>

<body>
    <h3>Example 2 : Arithmetic Operations using variables</h3>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
    <div ng-app="" ng-init="number1=7;number2=5">
       <p>Addition : {{ number1 + number2 }}</p>
       <p>Substraction : {{ number1 - number2 }}</p>
       <p>Muoltiplication : {{ number1 * number2 }}</p>
       <p>Division : {{ number1 / number2 }}</p>
       <p>Modulus : {{ number1 % number2 }}</p>
    </div>
</body>
</html>

Example 3 : Using Strings

<!DOCTYPE html>
<html>

<body>
    <h3>Example 3 : Using String</h3>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
    <div ng-app="" ng-init="var1='Hello';var2='World'">
       <p>Output : {{ var1 + " " + var2 }}</p>
    </div>
</body>
</html>

Example 4 : Using Objects

<!DOCTYPE html>
<html>

<body>
    <h3>Example 4 : Using Objects</h3>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
    <div ng-app="" ng-init="variables={var1:'Hello',var2:'World'}">
       <p>First Variable : {{ variables.var1 }}</p>
       <p>Second Variable : {{ variables.var2 }}</p>
       <p>Output : {{ variables.var1 + " " + variables.var2 }}</p>
    </div>
</body>
</html>

Example 5 : Using Arrays

<!DOCTYPE html>
<html>

<body>
    <h3>Example 5 : Using Arrays</h3>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
    <div ng-app="" ng-init="year=[2010,2011,2012,2013,2014,2015]">
       <p>Year 1 : {{ year[0] }}</p>
       <p>Year 2 : {{ year[1] }}</p>
       <p>Year 3 : {{ year[2] }}</p>
       <p>Year 4 : {{ year[3] }}</p>
       <p>Year 5 : {{ year[4] }}</p>
       <p>Year 6 : {{ year[5] }}</p>
    </div>
</body>
</html>

Instead of using normal {{ expression }} you can also use ng-bind i.e. <span ng-bind="expression"></span>

Please Like and Share the Blog, if you find it interesting and helpful.

No comments:

Post a Comment