@@ -44,7 +44,7 @@ figure.image-display
44
44
img( src ="/resources/images/devguide/dependency-injection/component-hierarchy.png" alt ="injector tree" width ="600" )
45
45
46
46
:marked
47
- ### Injector bubbling
47
+ ### Injector bubbling
48
48
49
49
When a component requests a dependency, Angular tries to satisfy that dependency with a provider registered in that component's own injector.
50
50
If the component's injector lacks the provider, it passes the request up to its parent component's injector.
@@ -62,14 +62,14 @@ figure.image-display
62
62
### Re-providing a service at different levels
63
63
64
64
You can re-register a provider for a particular dependency token at multiple levels of the injector tree.
65
- You don't *have* to re-register providers. You shouldn't do so unless you have a good reason.
65
+ You don't *have* to re-register providers. You shouldn't do so unless you have a good reason.
66
66
But you *can*.
67
67
68
68
As the resolution logic works upwards, the first provider encountered wins.
69
69
Thus, a provider in an intermediate injector intercepts a request for a service from something lower in the tree.
70
70
It effectively "reconfigures" and "shadows" a provider at a higher level in the tree.
71
71
72
- If you only specify providers at the top level (typically the root `AppModule`), the tree of injectors appears to be flat.
72
+ If you only specify providers at the top level (typically the root `AppModule`), the tree of injectors appears to be flat.
73
73
All requests bubble up to the root <span if-docs="ts"><code>NgModule</code></span> injector that you configured with the `!{_bootstrapModule}` method.
74
74
75
75
.l-main-section
@@ -85,11 +85,11 @@ figure.image-display
85
85
The guide sample includes a `VillainsListComponent` that displays a list of villains.
86
86
It gets those villains from a `VillainsService`.
87
87
88
- While you could provide `VillainsService` in the root `AppModule` (that's where you'll find the `HeroesService`),
88
+ While you _could_ provide `VillainsService` in the root `AppModule` (that's where you'll find the `HeroesService`),
89
89
that would make the `VillainsService` available everywhere in the application, including the _Hero_ workflows.
90
90
91
- If you later modify the `VillainsService`, you could break something in a hero component somewhere.
92
- That's not supposed to happen but the way you've provided the service creates that risk.
91
+ If you later modified the `VillainsService`, you could break something in a hero component somewhere.
92
+ That's not supposed to happen but providing the service in the root `AppModule` creates that risk.
93
93
94
94
Instead, provide the `VillainsService` in the `providers` metadata of the `VillainsListComponent` like this:
95
95
@@ -100,37 +100,37 @@ figure.image-display
100
100
the service becomes available only in the `VillainsListComponent` and its sub-component tree.
101
101
It's still a singleton, but it's a singleton that exist solely in the _villain_ domain.
102
102
103
- You are confident that a hero component can't access it. You've reduced your exposure to error.
103
+ Now you know that a hero component can't access it. You've reduced your exposure to error.
104
104
105
105
### Scenario: multiple edit sessions
106
106
107
107
Many applications allow users to work on several open tasks at the same time.
108
- For example, in a tax preparation application, the preparer could be working several tax returns,
108
+ For example, in a tax preparation application, the preparer could be working on several tax returns,
109
109
switching from one to the other throughout the day.
110
110
111
111
This guide demonstrates that scenario with an example in the Tour of Heroes theme.
112
112
Imagine an outer `HeroListComponent` that displays a list of super heroes.
113
113
114
- To open a hero's tax return, the preparer clicks on a hero name, which opens a component for editing that return.
114
+ To open a hero's tax return, the preparer clicks on a hero name, which opens a component for editing that return.
115
115
Each selected hero tax return opens in its own component and multiple returns can be open at the same time.
116
116
117
- Each tax return component
118
- * is its own tax return editing session.
119
- * can change a tax return without affecting a return in another component.
120
- * has the ability to save the changes to its tax return or cancel them.
117
+ Each tax return component has the following characteristics:
118
+ * Is its own tax return editing session.
119
+ * Can change a tax return without affecting a return in another component.
120
+ * Has the ability to save the changes to its tax return or cancel them.
121
121
122
122
figure.image-display
123
123
img( src ="/resources/images/devguide/dependency-injection/hid-heroes-anim.gif" width ="400" alt ="Heroes in action" )
124
124
125
125
:marked
126
- One might suppose that the `HeroTaxReturnComponent` has logic to manage and restore changes.
127
- That would be a pretty easy task for a simple hero tax return.
126
+ One might suppose that the `HeroTaxReturnComponent` has logic to manage and restore changes.
127
+ That would be a pretty easy task for a simple hero tax return.
128
128
In the real world, with a rich tax return data model, the change management would be tricky.
129
129
You might delegate that management to a helper service, as this example does.
130
130
131
- Here is the `HeroTaxReturnService`.
131
+ Here is the `HeroTaxReturnService`.
132
132
It caches a single `HeroTaxReturn`, tracks changes to that return, and can save or restore it.
133
- It also delegates to the application-wide, singleton `HeroService`, which it gets by injection.
133
+ It also delegates to the application-wide singleton `HeroService`, which it gets by injection.
134
134
135
135
+ makeExample('src/app/hero-tax-return.service.ts' )
136
136
@@ -146,7 +146,7 @@ figure.image-display
146
146
The component also asks the service to save and restore this tax return.
147
147
148
148
There'd be big trouble if _this_ service were an application-wide singleton.
149
- Every component would share the same service instance.
149
+ Every component would share the same service instance.
150
150
Each component would overwrite the tax return that belonged to another hero.
151
151
What a mess!
152
152
@@ -155,15 +155,15 @@ figure.image-display
155
155
+ makeExcerpt('src/app/hero-tax-return.component.ts' , 'providers' , '' )
156
156
157
157
:marked
158
- The `HeroTaxReturnComponent` has its own provider of the `HeroTaxReturnService`.
159
- Recall that every component _instance_ has its own injector.
158
+ The `HeroTaxReturnComponent` has its own provider of the `HeroTaxReturnService`.
159
+ Recall that every component _instance_ has its own injector.
160
160
Providing the service at the component level ensures that _every_ instance of the component gets its own, private instance of the service.
161
161
No tax return overwriting. No mess.
162
-
162
+
163
163
.l-sub-section
164
164
:marked
165
165
The rest of the scenario code relies on other Angular features and techniques that you can learn about elsewhere in the documentation.
166
- You can review it and download it from the <live-example></live-example>
166
+ You can review it and download it from the <live-example></live-example>.
167
167
168
168
:marked
169
169
### Scenario: specialized providers
@@ -172,7 +172,7 @@ figure.image-display
172
172
deeper in the component tree.
173
173
174
174
Consider again the Car example from the [Dependency Injection](./dependency-injection.html) guide.
175
- Suppose you configured the root injector (marked as A) with _generic_ providers for
175
+ Suppose you configured the root injector (marked as A) with _generic_ providers for
176
176
`CarService`, `EngineService` and `TiresService`.
177
177
178
178
You create a car component (A) that displays a car constructed from these three generic services.
@@ -198,8 +198,7 @@ figure.image-display
198
198
.l-sub-section
199
199
:marked
200
200
The code for this _cars_ scenario is in the `car.components.ts` and `car.services.ts` files of the sample
201
- which you can review and download from the <live-example></live-example>
202
-
201
+ which you can review and download from the <live-example></live-example>.
203
202
//- ## Advanced Dependency Injection in Angular
204
203
//- Restrict Dependency Lookups
205
204
//- [TODO] (@Host) This has been postponed for now until we come up with a decent use case
0 commit comments