Expressions In AngularJS

Introduction

Expressions in AngularJS are just like JavaScript code snippets. JavaScript code is usually written inside double braces: {{expression}}. In other words, Angular Expression are JavaScript code snippets with limited sub-set. Expressions are included in the HTML elements.

Example:

<div ng-controller="appController">
    <span>
        4+5 = {{4+5}}
    </span>
    <br />
    <br />
    <span ng-init="quantity=5;cost=25">
        Total Cost = {{quantity * cost}}
    </span>
</div>

Output:



Angular Expressions vs. JavaScript Expressions

The following are the differences between Angular Expressions and JavaScript Expressions

 

1. Context
   
   JavaScript expressions are evaluated globally whereas Angular expressions are evaluated locally using scope object. AngularJS does not use JavaScript function "EVAL" to evaluate expressions. AngularJS has one own service called "$parse" to evaluate expressions. AngularJS expression does not has access to the global variables such as document, location, etc. This restriction prevents accidental access to the global state. To access window and location global variables, AngularJS provided services $window and $location.
   
   Example:
   
   In the following example, I added two button and write click event by using directive ng-click. First button call controller function and alert some text. Second button directly call alert global function. Result first button works fine but second function does not work due to restriction of AngularJS.
   
   HTML:
   

   <div ng-controller="appController">
       <div>
           <h4>Context Understanding Example</h4>
           <span>
               <button ng-click="showAlert()">Click Me 1</button>
               <button ng-click="alert('It does not work!')">Click Me 2</button>
           </span>
       </div>
   </div>

   Controller:
   

   <script>
       var app = angular.module("myapp", []);
       app.controller("appController", ['$scope', '$window', function ($scope, $window) {
           $scope.showAlert = function () {
               $window.alert('Hello C# Corner');
           }
       }]);
   </script>

   Output:
   
   
   
   
2. Cannot use control flow statement
   
   We cannot write any control flow statement in AngularJS expression. But we can use ternary operator in expression. One of the reason of this behavior of AngularJS is we have to write all application logic inside the controller not in view. It means that we cannot use any conditional statement, loop and exception handling statement with expression.
   
   
3. We cannot declare function in AngularJS expression. This is due to avoid complex model transformation logic inside templates.
   
   
4. We cannot use or create regular expressions in an Angular expression.
   
   
5. We cannot use comma (,) or "void" operator in an AngularJS expression.
   
   
6. JavaScript expression generates type error and reference error when trying to evaluate undefined properties whereas AngularJS expression does not generate any exception.
   
   
7. We can use filter within the AngularJS expression to format and filter data before displaying it.

One time binding

An expression that starts with double colon (::) is considered as a one-time expression. This expression will stop recalculating expressions when they are stable. It happens after the first digest if expression value(s) is not an  undefined value.

Example:

In following example, I have put two span and defining expression: one with double colon (::) and second without double colon (::). And I am incrementing the value of expression on button click. Result is after the click of button, the  first span shows value 0 (initial value) and second span shows value 3 (current value).

<div ng-controller="appController">
    <div>
        <h4>One-Time Binding Example</h4>
        <span>
            <button ng-click="showCurrentValue()">Click Me</button>
            <br />
            <span>One-time binding: Button click count: {{::currentCount}}</span>
            <br />
            <span>Normal binding: Button click count: {{currentCount}}</span>
        </span>
    </div>
</div>

<script>
    var app = angular.module("myapp", []);
    app.controller("appController", ['$scope', '$window', function ($scope, $window) {
        $scope.currentCount = 0;
        $scope.showCurrentValue = function () {
            $scope.currentCount++;
        }
    }]);
</script>

Output:



Please note that one time binding feature introduced in AngularJS version 1.3.

Summary

Expression is a very useful feature of AngularJS. It binds the data to the HTML. AngularJS expressions are mostly same as JavaScript expressions and they can have literals, operators, and variables.