honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(hierarchical-di): copy edits (#3354)

This commit is contained in:
Kapunahele Wong 2017-03-08 16:34:05 -05:00 committed by Jules Kremer
parent 66562c8710
commit 8d88107004
1 changed files with 24 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -85,11 +85,11 @@ figure.image-display
The guide sample includes a `VillainsListComponent` that displays a list of villains.
It gets those villains from a `VillainsService`.
While you could provide `VillainsService` in the root `AppModule` (that's where you'll find the `HeroesService`),
While you _could_ provide `VillainsService` in the root `AppModule` (that's where you'll find the `HeroesService`),
that would make the `VillainsService` available everywhere in the application, including the _Hero_ workflows.
If you later modify the `VillainsService`, you could break something in a hero component somewhere.
That's not supposed to happen but the way you've provided the service creates that risk.
If you later modified the `VillainsService`, you could break something in a hero component somewhere.
That's not supposed to happen but providing the service in the root `AppModule` creates that risk.
Instead, provide the `VillainsService` in the `providers` metadata of the `VillainsListComponent` like this:
@ -100,12 +100,12 @@ figure.image-display
the service becomes available only in the `VillainsListComponent` and its sub-component tree.
It's still a singleton, but it's a singleton that exist solely in the _villain_ domain.
You are confident that a hero component can't access it. You've reduced your exposure to error.
Now you know that a hero component can't access it. You've reduced your exposure to error.
### Scenario: multiple edit sessions
Many applications allow users to work on several open tasks at the same time.
For example, in a tax preparation application, the preparer could be working several tax returns,
For example, in a tax preparation application, the preparer could be working on several tax returns,
switching from one to the other throughout the day.
This guide demonstrates that scenario with an example in the Tour of Heroes theme.
@ -114,10 +114,10 @@ figure.image-display
To open a hero's tax return, the preparer clicks on a hero name, which opens a component for editing that return.
Each selected hero tax return opens in its own component and multiple returns can be open at the same time.
Each tax return component
* is its own tax return editing session.
* can change a tax return without affecting a return in another component.
* has the ability to save the changes to its tax return or cancel them.
Each tax return component has the following characteristics:
* Is its own tax return editing session.
* Can change a tax return without affecting a return in another component.
* Has the ability to save the changes to its tax return or cancel them.
figure.image-display
img(src="/resources/images/devguide/dependency-injection/hid-heroes-anim.gif" width="400" alt="Heroes in action")
@ -130,7 +130,7 @@ figure.image-display
Here is the `HeroTaxReturnService`.
It caches a single `HeroTaxReturn`, tracks changes to that return, and can save or restore it.
It also delegates to the application-wide, singleton `HeroService`, which it gets by injection.
It also delegates to the application-wide singleton `HeroService`, which it gets by injection.
+makeExample('src/app/hero-tax-return.service.ts')
@ -163,7 +163,7 @@ figure.image-display
.l-sub-section
:marked
The rest of the scenario code relies on other Angular features and techniques that you can learn about elsewhere in the documentation.
You can review it and download it from the <live-example></live-example>
You can review it and download it from the <live-example></live-example>.
:marked
### Scenario: specialized providers
@ -198,8 +198,7 @@ figure.image-display
.l-sub-section
:marked
The code for this _cars_ scenario is in the `car.components.ts` and `car.services.ts` files of the sample
which you can review and download from the <live-example></live-example>
which you can review and download from the <live-example></live-example>.
//- ## Advanced Dependency Injection in Angular
//- Restrict Dependency Lookups
//- [TODO] (@Host) This has been postponed for now until we come up with a decent use case