Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit 8d88107

Browse files
kapunahelewongjuleskremer
authored andcommitted
docs(hierarchical-di): copy edits (#3354)
1 parent 66562c8 commit 8d88107

File tree

1 file changed

+24
-25
lines changed

1 file changed

+24
-25
lines changed

public/docs/ts/latest/guide/hierarchical-dependency-injection.jade

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -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

122122
figure.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

Comments
 (0)