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:

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:
   
   1. <div ng-controller="appController">
   2. <div>
   3. <h4>Context Understanding Example</h4>
   4. <span>
   5. <button ng-click="showAlert()">Click Me 1</button>
   6. <button ng-click="alert('It does not work!')">Click Me 2</button>
   7. </span>
   8. </div>
   9. </div>
   Controller:
   
   1. <script>
   2. var app = angular.module("myapp", []);
   3. app.controller("appController", ['$scope', '$window', function ($scope, $window) {
   4. $scope.showAlert = function () {
   5. $window.alert('Hello C# Corner');
   6. }
   7. }]);
   8. </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.