mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-17 07:40:22 +00:00
80 lines
2.5 KiB
Text
80 lines
2.5 KiB
Text
@ngdoc overview
|
|
@name Developer Guide: 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 must 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.
|
|
|
|
<pre>
|
|
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'];
|
|
</pre>
|
|
|
|
<doc:example>
|
|
<doc:source>
|
|
<script type="text/javascript">
|
|
angular.module.MyServiceModule = ['$provide', function($provide){
|
|
$provide.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(notifyService) {
|
|
this.callNotify = function(msg) {
|
|
notifyService(msg);
|
|
};
|
|
}
|
|
|
|
myController.$inject = ['notify'];
|
|
</script>
|
|
|
|
<div ng:controller="myController" ng:module="MyServiceModule">
|
|
<p>Let's try this simple notify service, injected into the controller...</p>
|
|
<input ng:init="message='test'" type="text" ng:model="message" />
|
|
<button ng:click="callNotify(message);">NOTIFY</button>
|
|
</div>
|
|
</doc:source>
|
|
<doc:scenario>
|
|
it('should test service', function() {
|
|
expect(element(':input[ng\\:model="message"]').val()).toEqual('test');
|
|
});
|
|
</doc:scenario>
|
|
</doc:example>
|
|
|
|
|
|
## Related Topics
|
|
|
|
{@link dev_guide.services.understanding_services Understanding Angular Services}
|
|
{@link dev_guide.services.creating_services Creating Angular Services}
|
|
{@link dev_guide.services.registering_services Registering Angular Services}
|
|
{@link dev_guide.services.managing_dependencies Managing Service Dependencies}
|
|
{@link dev_guide.services.testing_services Testing Angular Services}
|
|
|
|
## Related API
|
|
|
|
{@link api/angular.module.NG Angular Service API}
|