mirror of
https://github.com/zhigang1992/angular.js.git
synced 2026-04-03 17:15:37 +08:00
124 lines
4.0 KiB
Plaintext
124 lines
4.0 KiB
Plaintext
@ngdoc overview
|
|
@name Angular Services: Injecting Services Into Controllers
|
|
@description
|
|
|
|
Using services as dependencies for controllers is very similar to using services as dependencies
|
|
for another service.
|
|
|
|
Since JavaScript is a dynamic language, DI can't figure out which services to inject by static
|
|
types (like in static typed languages). Therefore, you can specify the service name by using the
|
|
`$inject` property, which is an array containing strings with names of services to be injected.
|
|
The name must match the corresponding service ID registered with angular. The order of the service
|
|
IDs matters: the order of the services in the array will be used when calling the factory function
|
|
with injected parameters. The names of parameters in factory function don't matter, but by
|
|
convention they match the service IDs, which has added benefits discussed below.
|
|
|
|
```js
|
|
function myController($loc, $log) {
|
|
this.firstMethod = function() {
|
|
// use $location service
|
|
$loc.setHash();
|
|
};
|
|
this.secondMethod = function() {
|
|
// use $log service
|
|
$log.info('...');
|
|
};
|
|
}
|
|
// which services to inject ?
|
|
myController.$inject = ['$location', '$log'];
|
|
```
|
|
|
|
<example module="MyServiceModule">
|
|
<file name="index.html">
|
|
<div id="simple" ng-controller="myController">
|
|
<p>Let's try this simple notify service, injected into the controller...</p>
|
|
<input ng-init="message='test'" ng-model="message" >
|
|
<button ng-click="callNotify(message);">NOTIFY</button>
|
|
<p>(you have to click 3 times to see an alert)</p>
|
|
</div>
|
|
</file>
|
|
|
|
<file name="script.js">
|
|
angular.
|
|
module('MyServiceModule', []).
|
|
factory('notify', ['$window', function(win) {
|
|
var msgs = [];
|
|
return function(msg) {
|
|
msgs.push(msg);
|
|
if (msgs.length == 3) {
|
|
win.alert(msgs.join("\n"));
|
|
msgs = [];
|
|
}
|
|
};
|
|
}]);
|
|
|
|
function myController(scope, notifyService) {
|
|
scope.callNotify = function(msg) {
|
|
notifyService(msg);
|
|
};
|
|
}
|
|
|
|
myController.$inject = ['$scope','notify'];
|
|
</file>
|
|
|
|
<file name="protractor.js" type="protractor">
|
|
it('should test service', function() {
|
|
expect(element(by.id('simple')).element(by.model('message')).getAttribute('value'))
|
|
.toEqual('test');
|
|
});
|
|
</file>
|
|
</example>
|
|
|
|
## Implicit Dependency Injection
|
|
|
|
A new feature of Angular DI allows it to determine the dependency from the name of the parameter.
|
|
Let's rewrite the above example to show the use of this implicit dependency injection of
|
|
`$window`, `$scope`, and our `notify` service:
|
|
|
|
<example module="MyServiceModuleDI">
|
|
<file name="index.html">
|
|
<div id="implicit" ng-controller="myController">
|
|
<p>Let's try the notify service, that is implicitly injected into the controller...</p>
|
|
<input ng-init="message='test'" ng-model="message">
|
|
<button ng-click="callNotify(message);">NOTIFY</button>
|
|
<p>(you have to click 3 times to see an alert)</p>
|
|
</div>
|
|
</file>
|
|
|
|
<file name="script.js">
|
|
angular.
|
|
module('MyServiceModuleDI', []).
|
|
factory('notify', function($window) {
|
|
var msgs = [];
|
|
return function(msg) {
|
|
msgs.push(msg);
|
|
if (msgs.length == 3) {
|
|
$window.alert(msgs.join("\n"));
|
|
msgs = [];
|
|
}
|
|
};
|
|
});
|
|
|
|
function myController($scope, notify) {
|
|
$scope.callNotify = function(msg) {
|
|
notify(msg);
|
|
};
|
|
}
|
|
</file>
|
|
</example>
|
|
|
|
However, if you plan to [minify](http://en.wikipedia.org/wiki/Minification_(programming)) your
|
|
code, your variable names will get renamed in which case you will still need to explicitly specify
|
|
dependencies with the `$inject` property.
|
|
|
|
## Related Topics
|
|
|
|
{@link dev_guide.services.understanding_services Understanding Angular Services}
|
|
{@link dev_guide.services.creating_services Creating Angular Services}
|
|
{@link dev_guide.services.managing_dependencies Managing Service Dependencies}
|
|
{@link dev_guide.services.testing_services Testing Angular Services}
|
|
|
|
## Related API
|
|
|
|
{@link ng Angular Service API}
|