The Relationship Between Scopes and Controllers
Controllers are pieces of code that are intended to provide business logic by augmenting scope. You create controllers by using the controller() method on the Model object of an application. This function registers a controller as a provider in the module, but it does not create an instance of the controller. That occurs when the ng-controller directive is linked in an AngularJS template.
The controller() method accepts the controller name as the first parameter and an array of dependencies as the second parameter. For example, the following code defines a controller that uses dependency injection to access a value provider named start:
angular.module('myApp', []).
value('start', 200).
controller('Counter', ['$scope', 'start',
function($scope, startingValue) {
}]);
When a new instance of a controller is created in AngularJS, a new child scope specific to that controller is also created and is accessible via the $scope service that is injected into the preceding Counter controller. Also in the example shown previously, the start provider is injected into the controller and passed to the controller function as startingValue. The parameter injection is based on their position in the array passed to the controller() function.
The controller must initialize the state of a scope that is created and added to it. The controller is also responsible for any business logic attached to that scope. This can mean handling update changes to the scope, manipulating scope values, or emitting events based on the state of the scope.
Listing 4.1 shows how to implement a controller that utilizes dependency injection, initializes some values, and implements rudimentary business logic, using inc(), dec(), and calcDiff() functions. Notice in lines 5–8 that several values are stored in the scope variables start, current, difference, and change. Those values are subsequently manipulated in the inc(), dec(), and calcDiff() functions.
Listing 4.2 shows a basic AngularJS HTML template that provides the view to see and manipulate the values stored in the scope. Figure 4.1 shows the web page in action. You can set the increment/decrement value and then click on +/- buttons to decrement the current value and see the difference change in the scope.
Listing 4.1 scope_controller.js: Implementing a Basic Controller That Uses Dependency Injection, Initializes Scope Values, and Implements Business Logic
01 angular.module('myApp', []).
02 value('start', 200).
03 controller('Counter', ['$scope', 'start',
04 function($scope, start) {
05 $scope.start = start;
06 $scope.current = start;
07 $scope.difference = 0;
08 $scope.change = 1;
09 $scope.inc = function() {
10 $scope.current += $scope.change;
11 $scope.calcDiff();
12 };
13 $scope.dec = function() {
14 $scope.current -= $scope.change;
15 $scope.calcDiff();
16 };
17 $scope.calcDiff = function() {
18 $scope.difference = $scope.current - $scope.start;
19 };
20 }]);
Listing 4.2 scope_controller.html: HTML Template That Enables You to See the Data in the Scope Change Dynamically Based on Incrementing and Decrementing Values
01 <!doctype html>
02 <html ng-app="myApp">
03 <head>
04 <title>AngularJS Basic Scope</title>
05 </head>
06 <body>
07 <div ng-controller="Counter">
08 <span>Change Amount:</span>
09 <input type="number" ng-model="change"><hr>
10 <span>Starting Value:</span>
11 {{start}}
12 <br>
13 <span>CurrentValue:</span>
14 {{current}}
15 <button ng-click='inc()'>+</button>
16 <button ng-click='dec()'>-</button><hr>
17 <span>Difference:</span>
18 {{difference}}
19 </div>
20 <script src="http://code.angularjs.org/1.3.0/angular.min.js"></script>
21 <script src="js/scope_controller.js"></script>
22 </body>
23 </html>
Figure 4.1 A basic AngularJS application that stores initial and current values in the scope and then displays the difference to illustrate scope data interaction.