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 }}.
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.
<!DOCTYPE html>
<html>
<head>
<title> Simple App</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<h2>{{1 + 1}}</h2>
<h2>{{"john" + "lindquist"}}</h2>
<h2>{{3 * 3}}</h2>
<input type="text" ng-model="data.message">
<h1>{{data.message+" world"}}</h1>
</div>
</body>
</html>
Let’s see the output of the above expressions.
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
<!DOCTYPE html>
<html>
<head>
<title> Simple App</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body ng-app="expressionExample">
<div class="example2" ng-controller="ExampleController">
Name: <input ng-model="name" type="text"/>
<button ng-click="greet()">Greet</button>
<button ng-click="window.alert('Should not see me')">Won't greet</button>
</div>
</body>
<script type="text/javascript">
angular.module('expressionExample', [])
.controller('ExampleController', ['$window', '$scope', function($window, $scope) {
$scope.name = 'World';
$scope.greet = function() {
$window.alert('Hello ' + $scope.name);
};
}]);
</script>
</html>
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.
{{((a||{}).b||{}).c}}
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.
<!DOCTYPE html>
<html>
<head>
<title> Simple App</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body ng-app="expressionExample">
<div ng-controller="EventController">
<button ng-click="clickMe($event)">Click Me</button>
<p id="one-time-binding-example">One time binding: {{::name}}</p>
<p id="normal-binding-example">Normal binding: {{name}}</p>
</div
</body>
<script type="text/javascript">
angular.module('oneTimeBidingExampleApp', []).
controller('EventController', ['$scope', function($scope) {
var counter = 0;
var names = ['Igor', 'Misko', 'Chirayu', 'Lucas'];
/*
* expose the event object to the scope
*/
$scope.clickMe = function(clickEvent) {
$scope.name = names[counter % names.length];
counter++;
};
}]);
</script>
</html>
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
Tutorial Categories:
