January 25, 2015 6:23 pm

AngularJs Expressions

Welcome to our next tutorial in this tutorial we will go through in detail about AngularJs Expressions and also some basic things for every AngularJs guy should know. Angular expressions are JavaScript like code snippets that are usually placed in bindings such as {{ expression }}.

AngularJs Expressions

For example, let’s see some expressions

  • 1+2
  • a+b
  • user.name
  • items[index]

Let’s see some live example with some basic expressions.

Let’s see the output of the above expressions.

expressionsexample1

As i said AngularJs expressions are like JavaScipt expressions, but there were some differences between them.

  • Context: JavaScript expressions are evaluated against global window. Where as AngularJs expressions are evaluated against a scope object.
  • Forgiving: In JavaScript, when you try to evaluate undefined properties it generates ReferenceError and TypeError. In Angular it generates undefined and null.
  • No Control Flow Statements: You cannot use the control flow statements like conditionals, loops or exceptions inside Angular Expressions.
  • No Functional Declarations: You cannot declare functions inside Angular Expressions or even inside ng-init  directive also.
  • No RegExp Creation With Literal Notation: You cannot create regular expressions in Angular Expression.
  • No Comma And Void Operators: You cannot use void  or , in an Angular Expression.
  • Filters:  You can use filters in expressions to format data before displaying it.

Let’s go in detail about the difference in between AnuglarJs and JavaScript expressions below.

Context

Angular does not use JavaScripts eval() to evaluate expressions. Instead Angular uses $parse service to processes these expressions. As i said before Angular doesn’t have access to global variables like window, document and location. Instead it uses services like $window and $location in function called from expressions.

Let’s see an example to access global variable using services provided by AngularJs

expressioncontext

Forgiving

In Angular expression evaluation forgiving to undefined and null. In javaScript if we evalutes a.b.c it throws an exception if a is not an object. But in case of angular it simply says undefined when it’s not able to find value for an expression. But we can clutter the code like below in angular.

One time binding

An expression that starts with :: is considered a one time expression. One time expressions will stop recalculating once they are stable, which happens after the first digest if the expression result is a no undefined value.

Let’s see a small example to see how this works.

The main purpose of this one time binding expression is to provide a way to create a binding that gets deregistered and frees up resources once the binding is stabilized. Reducing the number of expressions being watched makes the digest loop faster and allows more information to be showed up at the same time.

The one time binding follows value stabilized algorithm  to evaluate expressions. please check more about it in angularjs docs by the reference link.

Thanks

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories: