Using Expressions
Using expressions is the simplest way to represent data from the scope in an AngularJS view. Expressions are encapsulated blocks of code inside brackets: {{expression}}. The AngularJS compiler compiles an expression into HTML elements so that the results of the expression are displayed. For example, look at the following expressions:
{{1+5}}
{{'One' + 'Two'}}
Based on those expressions, the webpage displays these values:
6
OneTwo
Expressions are bound to the data model, which provides two huge benefits. First, you can use the property names and functions that are defined in the scope inside your expressions. Second, because the expressions are bound to the scope, when data in the scope changes, so do the expressions. For example, say that the scope contains the following values:
$scope.name='Brad';
$scope.score=95;
You can directly reference the name and score values in the template expressions as shown below:
Name: {{name}}
Score: {{score}}
Adjusted: {{score+5}}
AngularJS expressions are similar to JavaScript expressions in several ways, but they differ in these ways:
Attribute evaluation: Property names are evaluated against the scope model instead of against the global JavaScript namespace.
More forgiving: Expressions do not throw exceptions when they encounter undefined or null variable types; instead, they treat these as having no value.
No flow control: Expressions do not allow JavaScript conditionals or loops. Also, you cannot throw an error inside an expression.
AngularJS evaluates the strings used to define the value of directives as expressions. This allows you to include expression-type syntax within a definition. For example, when you set the value of the ng-click directive in the template, you specify an expression. Inside that expression, you can reference scope variable and use other expression syntax, as shown below:
<span ng-click="scopeFunction()"></span>
<span ng-click="scopeFunction(scopeVariable, 'stringParameter')"></span>
<span ng-click="scopeFunction(5*scopeVariable)"></span>
Since the AngularJS template expressions have access to the scope, you can also make changes to the scope inside the AngularJS expression. For example, the following ng-click directive changes the value of msg inside the scope model:
<span ng-click="msg='clicked'"></span>
Listings 23.1 and 23.2 illustrate the various methods of implementing expressions in an AngularJS template that are linked to the scope. Listing 23.1 implements a simple controller named myController that defines first, last, newFirst, and newLast properties. Also, a combine() function combines two parameters and returns the results. The setName() function accepts two parameters and changes the values of first and last.
Listing 23.2 implements the various methods that use the scope and expressions. Line 9 adds two strings, and line 10 reads the first and last values from the scope. Lines 11 and 12 call the combine() function, which returns the combined string. Notice that line 12 passes first and last properties from the scope into the function.
Lines 13–16 evaluate the ng-click assignment as an expression. In line 13, because there are no quotes around newFirst and newLast, their values are read from the scope. However, line 15 passes the strings specified to the setName() function.
Figure 23.1 shows the AngularJS webpage defined by Listings 23.1 and 23.2.
Listing 23.1 angular_expressions.js: Building a scope that AngularJS expressions can use
01 angular.module('myApp', []).
02 controller('myController', function($scope) {
03 $scope.first = 'Thorin';
04 $scope.last = 'Oakenshield';
05 $scope.newFirst = 'Gandalf';
06 $scope.newLast = 'Greyhame';
07 $scope.combine = function(fName, lName){
08 return fName + ' ' + lName;
09 };
10 $scope.setName = function(fName, lName){
11 $scope.first = fName;
12 $scope.last = lName;
13 };
14 });
Listing 23.2 angular_expressions.html: An AngularJS template that uses expressions in various ways to obtain data from the scope model
01 <!doctype html>
02 <html ng-app="myApp">
03 <head>
04 <title>AngularJS Expressions</title>
05 </head>
06 <body>
07 <div ng-controller="myController">
08 <h1>Expressions</h1>
09 {{'Bilbo' + ' Baggins'}}<br>
10 {{first}} {{last}}<br>
11 {{combine('Bilbo', 'Baggins')}}<br>
12 {{combine(first, last)}}<br>
13 <p ng-click="setName(newFirst, newLast)">
14 Click to Change to {{newFirst}} {{newLast}}</p>
15 <p ng-click="setName('Bilbo', 'Baggins')">
16 Click to Change to Bilbo Baggins</p>
17 <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
18 <script src="/js/angular_expressions.js"></script>
19 </body>
20 </html>
