The Relationship Between Scopes and Templates
Templates provide the view for an AngularJS application. HTML elements are defined as controllers, using the ng-controller attribute. Inside a controller HTML element and its children, the scope for that controller is available for expressions and other AngularJS functionality.
Values in a scope can be directly linked to the values of <input>, <select>, and <textarea> elements in the template, using the ng-model directive. This directive links the value of an element to a property name in the scope. When the user changes the value of the input element, the scope is automatically updated. For example, the following links the value of a number of <input> element to the scope named valueA:
<input type="number" ng-model="valueA" />
You can add scope properties and even functions to expressions in a template by using the {{expression}} syntax. The code inside the brackets is evaluated, and the results are displayed in the rendered view. For example, if a scope contains properties named valueA and valueB, you can reference these properties in an expression in the template as shown below:
{{valueA + valueB}}
You can also use scope properties and functions when defining AngularJS directives in a template. For example, the ng-click directive binds the browser click event to a function in a scope named addValues() and passes the values of properties valueA and valueB in the scope:
<span ng-click="addValues(valueA, valueB")>Add Values{{valueA}} & {{valueB}}</span>
Notice that in this code, the {{}} brackets are required. However, in the addValues() function call they are not required. That is because ng-click and other AngularJS directives automatically evaluate as expressions.
The code in Listing 22.2 and Listing 22.3 puts all these concepts together in a very basic example to make it easy to understand the relationship between the model and scope. Listing 22.2 implements a controller named SimpleTemplate that initializes a scope with three values: valueA, valueB, and valueC. The scope also contains a function named addValues() that accepts two parameters and adds them together to set the value of $scope.valueC.
Listing 22.3 implements a template that initializes the SimpleTemplate controller defined in Listing 22.2. Lines 8 and 9 link the scope properties valueA and valueB to <input> elements by using ng-model. Line 10 adds valueA and valueB in the scope to display the added value.
Lines 11 and 12 implement an <input> element that uses ng-click to bind the browser click event to the addValues() function in the scope. Notice that valueA and valueB are passed in as parameters to the function.
Figure 22.1 shows this simple application in a web browser. As the two input elements are changed, the expressions change automatically. However, the valueC expression changes only when the Click to Add Values element is clicked.
Listing 22.2 scope_template.js: Implementing a basic controller to support template functionality
01 angular.module('myApp', []).
02 controller('SimpleTemplate', function($scope) {
03 $scope.valueA = 5;
04 $scope.valueB = 7;
05 $scope.valueC = 12;
06 $scope.addValues = function(v1, v2) {
07 var v = angular.$rootScope;
08 $scope.valueC = v1 + v2;
09 };
10 });
Listing 22.3 scope_template.html: HTML template code that implements a controller and various HTML fields linked to the scope
01 <!doctype html>
02 <html ng-app="myApp">
03 <head>
04 <title>AngularJS Scope and Templates</title>
05 </head>
06 <body>
07 <div ng-controller="SimpleTemplate">
08 ValueA: <input type="number" ng-model="valueA" /><br>
09 ValueB: <input type="number" ng-model="valueB" /><br><br>
10 Expression Value: {{valueA + valueB}}<br><br>
11 <input type="button" ng-click="addValues(valueA, valueB)"
12 value ="Click to Add Values {{valueA}} & {{valueB}}" /><br>
13 Clicked Value: {{valueC}}<br>
14 </div>
15 <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
16 <script src="/js/scope_template.js"></script>
17 </body>
18 </html>
Figure 22.1 A basic AngularJS template that implements a controller and links several fields to the scope to provide both input of values and displayed results.