Implementing Dependency Injection
Once you have defined a module and appropriate providers, you can add the module as a dependency to other modules, controllers, and a variety of other AngularJS objects. You need to set the value of the $inject property of the object that depends on the providers. The $inject property contains an array of provider names that should be injected into it.
For example, the following code defines a basic controller that accepts the $scope and appMsg parameters. Then the $inject property is set to an array that contains $scope, which is the AngularJS scope service that provides access to the scope and a custom appMsg. Both $scope and appMsg are injected into the myController function:
var myController = function($scope, appMsg) {
$scope.message = appMsg;
};
controller['$inject'] = ['$scope', 'appMsg'];
myApp.myController('controllerA', controller);
This method can become a bit clumsy when you’re implementing certain objects, so AngularJS also provides a bit more elegant method for injecting the dependencies, using the following syntax in place of the normal constructor function:
[providerA, providerB, . . ., function(objectA, objectB, . . .) {} ]
For example, the above code can also be written as:
myApp.controller('controllerA', ['$scope', 'appMsg', function($scope, appMsg) {
$scope.message = appMsg;
}]);
Listing 21.1 shows how to implement dependency injection with two modules, each with a value provider and a controller. Lines 2 and 8 add the value providers. Lines 3 and 9 use dependency injection to inject the value providers into the controllers for each module.
Notice in line 6 that the definition for the myApp module includes the myMod module in its dependency list. This injects myMod, including the controllerB functionality, enclosed inside.
Listing 21.2 shows HTML that implements the myApp module as the AngularJS application. Notice that it uses both the controllerA and controllerB controllers. They can be used because the myMod module was injected into the myApp module. Figure 21.1 shows the resulting webpage, with a different message from each module’s controller.
Listing 21.1 injector.js: Implementing dependency injection in controller and module definitions
01 var myMod = angular.module('myMod', []);
02 myMod.value('modMsg', 'Hello from My Module'),
03 myMod.controller('controllerB', ['$scope', 'modMsg',
04 function($scope, msg) {
05 $scope.message = msg;
06 }]);
07 var myApp = angular.module('myApp', ['myMod']);
08 myApp.value('appMsg', 'Hello from My App'),
09 myApp.controller('controllerA', ['$scope', 'appMsg',
10 function($scope, msg) {
11 $scope.message = msg;
12 }]);
Listing 21.2 injector.html: Using HTML code to implement an AngularJS module that depends on another module
01 <!doctype html>
02 <html ng-app="myApp">
03 <head>
04 <title>AngularJS Dependency Injection</title>
05 </head>
06 <body>
07 <div ng-controller="controllerA">
08 <h2>Application Message:</h2>
09 {{message}}
10 </div><hr>
11 <div ng-controller="controllerB">
12 <h2>Module Message:</h2>
13 {{message}}
14 </div>
15 <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
16 <script src="/js/injector.js"></script>
17 </body>
18 </html>
Figure 21.1 Implementing dependency injection to provide additional functionality to modules and controllers.