@@ -44,7 +44,7 @@ figure.image-display
4444 img( src ="/resources/images/devguide/dependency-injection/component-hierarchy.png" alt ="injector tree" width ="600" )
4545
4646:marked
47- ### Injector bubbling
47+ ### Injector bubbling
4848
4949 When a component requests a dependency, Angular tries to satisfy that dependency with a provider registered in that component's own injector.
5050 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
6262 ### Re-providing a service at different levels
6363
6464 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.
6666 But you *can*.
6767
6868 As the resolution logic works upwards, the first provider encountered wins.
6969 Thus, a provider in an intermediate injector intercepts a request for a service from something lower in the tree.
7070 It effectively "reconfigures" and "shadows" a provider at a higher level in the tree.
7171
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.
7373 All requests bubble up to the root <span if-docs="ts"><code>NgModule</code></span> injector that you configured with the `!{_bootstrapModule}` method.
7474
7575.l-main-section
@@ -85,11 +85,11 @@ figure.image-display
8585 The guide sample includes a `VillainsListComponent` that displays a list of villains.
8686 It gets those villains from a `VillainsService`.
8787
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`),
8989 that would make the `VillainsService` available everywhere in the application, including the _Hero_ workflows.
9090
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.
9393
9494 Instead, provide the `VillainsService` in the `providers` metadata of the `VillainsListComponent` like this:
9595
@@ -100,37 +100,37 @@ figure.image-display
100100 the service becomes available only in the `VillainsListComponent` and its sub-component tree.
101101 It's still a singleton, but it's a singleton that exist solely in the _villain_ domain.
102102
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.
104104
105105 ### Scenario: multiple edit sessions
106106
107107 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,
109109 switching from one to the other throughout the day.
110110
111111 This guide demonstrates that scenario with an example in the Tour of Heroes theme.
112112 Imagine an outer `HeroListComponent` that displays a list of super heroes.
113113
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.
115115 Each selected hero tax return opens in its own component and multiple returns can be open at the same time.
116116
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.
121121
122122figure.image-display
123123 img( src ="/resources/images/devguide/dependency-injection/hid-heroes-anim.gif" width ="400" alt ="Heroes in action" )
124124
125125: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.
128128 In the real world, with a rich tax return data model, the change management would be tricky.
129129 You might delegate that management to a helper service, as this example does.
130130
131- Here is the `HeroTaxReturnService`.
131+ Here is the `HeroTaxReturnService`.
132132 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.
134134
135135+ makeExample('src/app/hero-tax-return.service.ts' )
136136
@@ -146,7 +146,7 @@ figure.image-display
146146 The component also asks the service to save and restore this tax return.
147147
148148 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.
150150 Each component would overwrite the tax return that belonged to another hero.
151151 What a mess!
152152
@@ -155,15 +155,15 @@ figure.image-display
155155+ makeExcerpt('src/app/hero-tax-return.component.ts' , 'providers' , '' )
156156
157157: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.
160160 Providing the service at the component level ensures that _every_ instance of the component gets its own, private instance of the service.
161161 No tax return overwriting. No mess.
162-
162+
163163.l-sub-section
164164 :marked
165165 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>.
167167
168168:marked
169169 ### Scenario: specialized providers
@@ -172,7 +172,7 @@ figure.image-display
172172 deeper in the component tree.
173173
174174 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
176176 `CarService`, `EngineService` and `TiresService`.
177177
178178 You create a car component (A) that displays a car constructed from these three generic services.
@@ -198,8 +198,7 @@ figure.image-display
198198.l-sub-section
199199 :marked
200200 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>.
203202//- ## Advanced Dependency Injection in Angular
204203//- Restrict Dependency Lookups
205204//- [TODO] (@Host) This has been postponed for now until we come up with a decent use case
0 commit comments