mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-05-10 07:44:43 +00:00
docs(di): fix typos and grammar
This commit is contained in:
parent
2d5297e665
commit
b1157aafd7
1 changed files with 16 additions and 13 deletions
|
|
@ -14,7 +14,7 @@ book.
|
||||||
|
|
||||||
## DI in a nutshell
|
## DI in a nutshell
|
||||||
|
|
||||||
There are only three ways how an object or a function can get a hold of its dependencies:
|
There are only three ways an object or a function can get a hold of its dependencies:
|
||||||
|
|
||||||
1. The dependency can be created, typically using the `new` operator.
|
1. The dependency can be created, typically using the `new` operator.
|
||||||
|
|
||||||
|
|
@ -23,8 +23,8 @@ There are only three ways how an object or a function can get a hold of its depe
|
||||||
3. The dependency can be passed in to where it is needed.
|
3. The dependency can be passed in to where it is needed.
|
||||||
|
|
||||||
|
|
||||||
The first two options of creating or looking up dependencies are not optimal, because they hard
|
The first two options of creating or looking up dependencies are not optimal because they hard
|
||||||
code the dependency, making it difficult, if not impossible, to modify the dependencies.
|
code the dependency. This make it difficult, if not impossible, to modify the dependencies.
|
||||||
This is especially problematic in tests, where it is often desirable to provide mock dependencies
|
This is especially problematic in tests, where it is often desirable to provide mock dependencies
|
||||||
for test isolation.
|
for test isolation.
|
||||||
|
|
||||||
|
|
@ -33,7 +33,7 @@ dependency from the component. The dependency is simply handed to the component.
|
||||||
|
|
||||||
<pre>
|
<pre>
|
||||||
function SomeClass(greeter) {
|
function SomeClass(greeter) {
|
||||||
this.greeter = greeter
|
this.greeter = greeter;
|
||||||
}
|
}
|
||||||
|
|
||||||
SomeClass.prototype.doSomething = function(name) {
|
SomeClass.prototype.doSomething = function(name) {
|
||||||
|
|
@ -41,18 +41,18 @@ dependency from the component. The dependency is simply handed to the component.
|
||||||
}
|
}
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
In the above example the `SomeClass` is not concerned with locating the `greeter` dependency, it
|
In the above example `SomeClass` is not concerned with locating the `greeter` dependency, it
|
||||||
is simply handed the `greeter` at runtime.
|
is simply handed the `greeter` at runtime.
|
||||||
|
|
||||||
This is desirable, but it puts the responsibility of getting hold of the dependency onto the
|
This is desirable, but it puts the responsibility of getting hold of the dependency on the
|
||||||
code responsible for the construction of `SomeClass`.
|
code that constructs `SomeClass`.
|
||||||
|
|
||||||
To manage the responsibility of dependency creation, each Angular application has an {@link
|
To manage the responsibility of dependency creation, each Angular application has an {@link
|
||||||
api/angular.injector injector}. The injector is a service locator that is responsible for
|
api/angular.injector injector}. The injector is a service locator that is responsible for
|
||||||
construction and lookup of dependencies.
|
construction and lookup of dependencies.
|
||||||
|
|
||||||
|
Here is an example of using the injector service:
|
||||||
|
|
||||||
Here is an example of using the injector service.
|
|
||||||
<pre>
|
<pre>
|
||||||
// Provide the wiring information in a module
|
// Provide the wiring information in a module
|
||||||
angular.module('myModule', []).
|
angular.module('myModule', []).
|
||||||
|
|
@ -101,7 +101,7 @@ dependency lookup responsibility to the injector by declaring the dependencies a
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
Notice that by having the `ng-controller` instantiate the class, it can satisfy all of the
|
Notice that by having the `ng-controller` instantiate the class, it can satisfy all of the
|
||||||
dependencies of the `MyController` without the controller ever knowing about the injector. This is
|
dependencies of `MyController` without the controller ever knowing about the injector. This is
|
||||||
the best outcome. The application code simply ask for the dependencies it needs, without having to
|
the best outcome. The application code simply ask for the dependencies it needs, without having to
|
||||||
deal with the injector. This setup does not break the Law of Demeter.
|
deal with the injector. This setup does not break the Law of Demeter.
|
||||||
|
|
||||||
|
|
@ -159,16 +159,18 @@ Sometimes using the `$inject` annotation style is not convenient such as when an
|
||||||
directives.
|
directives.
|
||||||
|
|
||||||
For example:
|
For example:
|
||||||
|
|
||||||
<pre>
|
<pre>
|
||||||
someModule.factory('greeter', function($window) {
|
someModule.factory('greeter', function($window) {
|
||||||
...;
|
...
|
||||||
});
|
});
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
Results in code bloat due to the need of temporary variable:
|
Results in code bloat due to needing a temporary variable:
|
||||||
|
|
||||||
<pre>
|
<pre>
|
||||||
var greeterFactory = function(renamed$window) {
|
var greeterFactory = function(renamed$window) {
|
||||||
...;
|
...
|
||||||
};
|
};
|
||||||
|
|
||||||
greeterFactory.$inject = ['$window'];
|
greeterFactory.$inject = ['$window'];
|
||||||
|
|
@ -177,9 +179,10 @@ Results in code bloat due to the need of temporary variable:
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
For this reason the third annotation style is provided as well.
|
For this reason the third annotation style is provided as well.
|
||||||
|
|
||||||
<pre>
|
<pre>
|
||||||
someModule.factory('greeter', ['$window', function(renamed$window) {
|
someModule.factory('greeter', ['$window', function(renamed$window) {
|
||||||
...;
|
...
|
||||||
}]);
|
}]);
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue