Hopiu/angular.js
1
0
Fork 0
mirror of https://github.com/Hopiu/angular.js.git synced 2026-05-17 11:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs(guide): fix non-working example + add docs for implicit DI

Browse source
This commit is contained in:
Daniel Zen 2012-03-13 17:23:38 -04:00 committed by Igor Minar
parent e9e3ee012b
commit 7b52586f7c
1 changed files with 51 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
docs/content/guide/dev_guide.services.injecting_controllers.ngdoc
View file

@ -6,12 +6,12 @@ Using services as dependencies for controllers is very similar to using services
for another service. for another service.
Since JavaScript is a dynamic language, DI can't figure out which services to inject by static 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 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. `$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 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 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 with injected parameters. The names of parameters in factory function don't matter, but by
convention they match the service IDs. convention they match the service IDs, which has added benefits discussed below.
<pre> <pre>
function myController($loc, $log) { function myController($loc, $log) {
@ -44,28 +44,67 @@ angular.
}; };
}]); }]);
function myController(notifyService) { function myController(scope, notifyService) {
this.callNotify = function(msg) { scope.callNotify = function(msg) {
notifyService(msg); notifyService(msg);
}; };
} }
myController.$inject = ['notify']; myController.$inject = ['$scope','notify'];
</script> </script>
<div ng:controller="myController"> <div ng-controller="myController">
<p>Let's try this simple notify service, injected into the controller...</p> <p>Let's try this simple notify service, injected into the controller...</p>
<input ng:init="message='test'" type="text" ng:model="message" /> <input ng-init="message='test'" ng-model="message" >
<button ng:click="callNotify(message);">NOTIFY</button> <button ng-click="callNotify(message);">NOTIFY</button>
</div> </div>
</doc:source> </doc:source>
<doc:scenario> <doc:scenario>
it('should test service', function() { it('should test service', function() {
expect(element(':input[ng\\:model="message"]').val()).toEqual('test'); expect(element(':input[ng\\:model="message"]').val()).toEqual('test');
}); });
</doc:scenario> </doc:scenario>
</doc:example> </doc: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:
<doc:example module="MyServiceModuleDI">
<doc:source>
<script type="text/javascript">
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);
};
}
</script>
<div 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>
</div>
</doc:source>
</doc:example>
However, if you plan to {@link http://en.wikipedia.org/wiki/Minification_(programming) minify} 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 ## Related Topics