Quick Contact


    AngularJS Expressions

    In AngularJS, expressions are used to bind application data to HTML. AngularJS resolves the expression, and return the result exactly where the expression is written.

    Expressions are written inside double braces {{expression}}.They can also be written inside a directive:

    ng-bind=”expression”.

    AnularJS expressions are very similar to JavaScript expressions. They can contain literals, operators, and variables. For example:

    {{ 4 + 4 }} or {{ firstName + ” ” + lastName }}

    AngularJS Expressions Example
    	< !DOCTYPE html>  
    	< html>  
    	< script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">< /script>  
    	< body>  
    	< div ng-app>  
    	< p>A simple expression example: {{ 4 + 4 }}< /p>  
    	< /div>  
    	< /body>  
    	< /html>  
    	
    Output

    A simple expression example: {{ 4 + 4 }}

    Note:

    If you remove the directive “ng-app”, HTML will display the expression without solving it.

    Example:
    	< !DOCTYPE html>  
    	< html>  
    	< script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">< /script>  
    	< body>  
    	< p>When we remove the directive "ng-app", HTML will display the expression without solving it.< /p>  
    	< div>  
    	< p>A simple expression example:  {{ 4 + 4 }}< /p>  
    	< /div>  
    	< /body>  
    	< /html>
    	
    Output

    Enroll Yourself in Live Classes For Online Summer Training.

    When we remove the directive “ng-app”, HTML will display the expression without solving it.

    A simple expression example: {{ 4 + 4 }}

    You can also write expressions wherever you want, AngularJS will resolve the expression and return the result.

    Let’s take an example to change the color of input box by changing its value.

    Example:
    	< !DOCTYPE html>  
    	< html>  
    	< script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">< /script>  
    	< body>  
    	< p>Change the value of the input field:< /p>  
    	< div ng-app="" ng-init="myCol='pink'">  
    	< input style="background-color:{{myCol}}" ng-model="myCol" value="{{myCol}}">  
    	< /div>  
    	< p>AngularJS resolves the expression and returns the result.< /p>  
    	< p>The background color of the input box will be whatever you write in the input field.< /p>  
    	< /body>  
    	< /html>  
    	
    Output

    Change the value of the input field:

    AngularJS resolves the expression and returns the result.

    The background color of the input box will be whatever you write in the input field.

    AngularJS Numbers

    AngularJS numbers are similar to JavaScript numbers.

    	< !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="quantity=4;cost=4">  
    	< p>Total in dollar: {{ quantity * cost }}< /p>  
    	< /div>  
    	< /body>  
    	< /html>  
    	
    Output

    Total in dollar: {{ quantity * cost }}

    We can use the same example by using ng-bind:

    Example
    	< !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="quantity=4;cost=4">  
    	< p>Total in dollar: < span ng-bind="quantity * cost">< /span>< /p>  
    	< /div>  
    	< /body>  
    	< /html>   
    	
    Output

    Total in dollar:16

    AngularJS Strings
    	< !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="firstName='Navi';lastName='Singh'">  
    	< p>My full name is: {{ firstName + " " + lastName }}< /p>  
    	< /div>  
    	< /body>  
    	< /html>
    	
    Output

    My full name is: Navi Singh

    Example with ng-bind:
    	< !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="firstName='Navi';lastName='Singh'">  
    	< p>My full name is: < span ng-bind="firstName + ' ' + lastName">< /span>< /p>  
    	< /div>  
    	< /body>  
    	< /html>  
    	
    Output

    My full name is: Navi Singh

    AngularJS Objects
    	< !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="person={firstName:'Navi',lastName:'Singh'}">  
    	< p>My name is {{ person.firstName }}< /p>  
    	< /div>  
    	< /body>  
    	< /html>
    	
    Output

    My name isNavi

    Same example with ng-bind:
    	< !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="person={firstName:'Navi',lastName:'Singh'}">  
    	< p>The name is < span ng-bind="person.firstName">< /span>< /p>  
    	< /div>  
    	< /body>  
    	< /html>
    	
    Output

    The name isNavi

    AngularJS Arrays
    	< !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="points=[1,15,19,2,40]">  
    	< p>The first result is {{ points[0] }}< /p>  
    	< /div>  
    	< /body>  
    	< /html>
    	
    Output

    The first result is 1

    Same example with ng-bind:
    	< !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="points=[1,15,19,2,40]">  
    	< p>The first result is < span ng-bind="points[0]">< /span>< /p>  
    	< /div>  
    	< /body>  
    	< /html>
    	
    Output

    The first result is 1

    Difference between AngularJS Expressions and JavaScript expressions:
    • AngularJS expressions can be written inside HTML, while JavaScript expressions cannot.
    • AngularJS expressions support filters, while JavaScript expressions do not.
    • AngularJS expressions do not support conditionals, loops, and exceptions, while JavaScript expressions do.
    Similarity between AngularJS Expressions and JavaScript expressions:
    • AngularJS expressions and JavaScript expressions both can contain literals, operators and variables.

    Enroll Yourself in Live Classes For Angular Training Online.

    Copyright 1999- Ducat Creative, All rights reserved.