14
14
15
15
## DI in a nutshell
16
16
17
- There are only three ways how an object or a function can get a hold of its dependencies:
17
+ There are only three ways an object or a function can get a hold of its dependencies:
18
18
19
19
1. The dependency can be created, typically using the `new` operator.
20
20
@@ -23,8 +23,8 @@ There are only three ways how an object or a function can get a hold of its depe
23
23
3. The dependency can be passed in to where it is needed.
24
24
25
25
26
- The first two options of creating or looking up dependencies are not optimal, because they hard
27
- code the dependency, making it difficult, if not impossible, to modify the dependencies.
26
+ The first two options of creating or looking up dependencies are not optimal because they hard
27
+ code the dependency. This make it difficult, if not impossible, to modify the dependencies.
28
28
This is especially problematic in tests, where it is often desirable to provide mock dependencies
29
29
for test isolation.
30
30
@@ -33,26 +33,26 @@ dependency from the component. The dependency is simply handed to the component.
33
33
34
34
<pre>
35
35
function SomeClass(greeter) {
36
- this.greeter = greeter
36
+ this.greeter = greeter;
37
37
}
38
38
39
39
SomeClass.prototype.doSomething = function(name) {
40
40
this.greeter.greet(name);
41
41
}
42
42
</pre>
43
43
44
- In the above example the `SomeClass` is not concerned with locating the `greeter` dependency, it
44
+ In the above example `SomeClass` is not concerned with locating the `greeter` dependency, it
45
45
is simply handed the `greeter` at runtime.
46
46
47
- This is desirable, but it puts the responsibility of getting hold of the dependency onto the
48
- code responsible for the construction of `SomeClass`.
47
+ This is desirable, but it puts the responsibility of getting hold of the dependency on the
48
+ code that constructs `SomeClass`.
49
49
50
50
To manage the responsibility of dependency creation, each Angular application has an {@link
51
51
api/angular.injector injector}. The injector is a service locator that is responsible for
52
52
construction and lookup of dependencies.
53
53
54
+ Here is an example of using the injector service:
54
55
55
- Here is an example of using the injector service.
56
56
<pre>
57
57
// Provide the wiring information in a module
58
58
angular.module('myModule', []).
@@ -101,7 +101,7 @@ dependency lookup responsibility to the injector by declaring the dependencies a
101
101
</pre>
102
102
103
103
Notice that by having the `ng-controller` instantiate the class, it can satisfy all of the
104
- dependencies of the `MyController` without the controller ever knowing about the injector. This is
104
+ dependencies of `MyController` without the controller ever knowing about the injector. This is
105
105
the best outcome. The application code simply ask for the dependencies it needs, without having to
106
106
deal with the injector. This setup does not break the Law of Demeter.
107
107
@@ -159,16 +159,18 @@ Sometimes using the `$inject` annotation style is not convenient such as when an
159
159
directives.
160
160
161
161
For example:
162
+
162
163
<pre>
163
164
someModule.factory('greeter', function($window) {
164
- ...;
165
+ ...
165
166
});
166
167
</pre>
167
168
168
- Results in code bloat due to the need of temporary variable:
169
+ Results in code bloat due to needing a temporary variable:
170
+
169
171
<pre>
170
172
var greeterFactory = function(renamed$window) {
171
- ...;
173
+ ...
172
174
};
173
175
174
176
greeterFactory.$inject = ['$window'];
@@ -177,9 +179,10 @@ Results in code bloat due to the need of temporary variable:
177
179
</pre>
178
180
179
181
For this reason the third annotation style is provided as well.
182
+
180
183
<pre>
181
184
someModule.factory('greeter', ['$window', function(renamed$window) {
182
- ...;
185
+ ...
183
186
}]);
184
187
</pre>
185
188
0 commit comments