Skip to content

Commit 99ff8ec

Browse files
committed
docs(hierarchical-di): post-RC5 Dart resync
Contributes to angular#2077. Depends on angular#2078.
1 parent 19d0606 commit 99ff8ec

File tree

2 files changed

+34
-40
lines changed

2 files changed

+34
-40
lines changed

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

+17-20
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ block includes
88
Angular has a Hierarchical Dependency Injection system.
99
There is actually a tree of injectors
1010
that parallel an application's component tree.
11-
We can re-configure the injectors at any level of that component tree with
11+
We can reconfigure the injectors at any level of that component tree with
1212
interesting and useful results.
1313

1414
In this chapter we explore these points and write some code.
@@ -67,10 +67,10 @@ figure.image-display
6767
We'll reserve discussion of this option for another day.
6868
:marked
6969
Such a proliferation of injectors makes little sense until we consider the possibility that injectors at different levels can be
70-
configured with different providers. We don't *have* to re-configure providers at every level. But we *can*.
70+
configured with different providers. We don't *have* to reconfigure providers at every level. But we *can*.
7171

72-
If we don't re-configure, the tree of injectors appears to be flat. All requests bubble up to the root injector that we
73-
configured with the `bootstrap` method.
72+
If we don't reconfigure, the tree of injectors appears to be flat. All requests bubble up to the root NgModule injector that we
73+
configured with the `!{_bootstrapModule}` method.
7474

7575
The ability to configure one or more providers at different levels opens up interesting and useful possibilities.
7676

@@ -140,11 +140,14 @@ figure.image-display
140140
Look closely at the metadata for our `HeroEditComponent`. Notice the `providers` property.
141141

142142
+makeExample('hierarchical-dependency-injection/ts/app/hero-editor.component.ts', 'providers')
143+
144+
- var _root_NgModule = _docsFor == 'dart' ? '<code>bootstrap</code> arguments' : 'root <code>NgModule</code>'
143145
:marked
144146
This adds a `RestoreService` provider to the injector of the `HeroEditComponent`.
145-
Couldn’t we simply alter our bootstrap call to this?
147+
Couldn’t we simply alter our !{_root_NgModule} to include this provider?
148+
149+
+makeExcerpt(_appModuleTsVsMainTs, 'bad-alternative')
146150

147-
+makeExample('hierarchical-dependency-injection/ts/app/main.ts', 'bad-alternative')
148151
:marked
149152
Technically we could, but our component wouldn’t quite behave the way it is supposed to. Remember that each injector treats the services that it provides as singletons. However, in order to be able to have multiple instances of `HeroEditComponent` edit multiple heroes at the same time we need to have multiple instances of the `RestoreService`. More specifically, each instance of `HeroEditComponent` needs to be bound to its own instance of the `RestoreService`.
150153

@@ -159,20 +162,14 @@ figure.image-display
159162
we would have exactly one instance of that service and it would be shared across the entire application.
160163

161164
That’s clearly not what we want in this scenario. We want each component to have its own instance of the `RestoreService`.
162-
Defining (or re-defining) a provider at the component level creates a new instance of the service for each new instance
165+
Defining (or redefining) a provider at the component level creates a new instance of the service for each new instance
163166
of that component. We've made the `RestoreService` a kind of "private" singleton for each `HeroEditComponent`,
164167
scoped to that component instance and its child components.
165168

166-
<!--
167-
## Advanced Dependency Injection in Angular 2
168-
169-
Restrict Dependency Lookups
170-
[TODO] (@Host) This has been postponed for now until we come up with a decent use case
171-
172-
173-
.l-main-section
174-
:marked
175-
## Dependency Visibility
176-
177-
[TODO] (providers vs viewProviders) This has been postponed for now until come up with a decent use case
178-
-->
169+
//- ## Advanced Dependency Injection in Angular 2
170+
//- Restrict Dependency Lookups
171+
//- [TODO] (@Host) This has been postponed for now until we come up with a decent use case
172+
//- .l-main-section
173+
//- :marked
174+
//- ## Dependency Visibility
175+
//- [TODO] (providers vs viewProviders) This has been postponed for now until come up with a decent use case

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

+17-20
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ block includes
88
Angular has a Hierarchical Dependency Injection system.
99
There is actually a tree of injectors
1010
that parallel an application's component tree.
11-
We can re-configure the injectors at any level of that component tree with
11+
We can reconfigure the injectors at any level of that component tree with
1212
interesting and useful results.
1313

1414
In this chapter we explore these points and write some code.
@@ -67,10 +67,10 @@ figure.image-display
6767
We'll reserve discussion of this option for another day.
6868
:marked
6969
Such a proliferation of injectors makes little sense until we consider the possibility that injectors at different levels can be
70-
configured with different providers. We don't *have* to re-configure providers at every level. But we *can*.
70+
configured with different providers. We don't *have* to reconfigure providers at every level. But we *can*.
7171

72-
If we don't re-configure, the tree of injectors appears to be flat. All requests bubble up to the root NgModule injector that we
73-
configured with the `bootstrapModule` method.
72+
If we don't reconfigure, the tree of injectors appears to be flat. All requests bubble up to the root
73+
<span if-docs="ts">NgModule</span> injector that we configured with the `!{_bootstrapModule}` method.
7474

7575
The ability to configure one or more providers at different levels opens up interesting and useful possibilities.
7676

@@ -140,11 +140,14 @@ figure.image-display
140140
Look closely at the metadata for our `HeroEditComponent`. Notice the `providers` property.
141141

142142
+makeExample('hierarchical-dependency-injection/ts/app/hero-editor.component.ts', 'providers')
143+
144+
- var _root_NgModule = _docsFor == 'dart' ? '<code>bootstrap</code> arguments' : 'root <code>NgModule</code>'
143145
:marked
144146
This adds a `RestoreService` provider to the injector of the `HeroEditComponent`.
145-
Couldn’t we simply alter our root NgModule to include this provider?
147+
Couldn’t we simply alter our !{_root_NgModule} to include this provider?
148+
149+
+makeExcerpt(_appModuleTsVsMainTs, 'bad-alternative')
146150

147-
+makeExample('hierarchical-dependency-injection/ts/app/app.module.ts', 'bad-alternative')
148151
:marked
149152
Technically we could, but our component wouldn’t quite behave the way it is supposed to. Remember that each injector treats the services that it provides as singletons. However, in order to be able to have multiple instances of `HeroEditComponent` edit multiple heroes at the same time we need to have multiple instances of the `RestoreService`. More specifically, each instance of `HeroEditComponent` needs to be bound to its own instance of the `RestoreService`.
150153

@@ -159,20 +162,14 @@ figure.image-display
159162
we would have exactly one instance of that service and it would be shared across the entire application.
160163

161164
That’s clearly not what we want in this scenario. We want each component to have its own instance of the `RestoreService`.
162-
Defining (or re-defining) a provider at the component level creates a new instance of the service for each new instance
165+
Defining (or redefining) a provider at the component level creates a new instance of the service for each new instance
163166
of that component. We've made the `RestoreService` a kind of "private" singleton for each `HeroEditComponent`,
164167
scoped to that component instance and its child components.
165168

166-
<!--
167-
## Advanced Dependency Injection in Angular 2
168-
169-
Restrict Dependency Lookups
170-
[TODO] (@Host) This has been postponed for now until we come up with a decent use case
171-
172-
173-
.l-main-section
174-
:marked
175-
## Dependency Visibility
176-
177-
[TODO] (providers vs viewProviders) This has been postponed for now until come up with a decent use case
178-
-->
169+
//- ## Advanced Dependency Injection in Angular 2
170+
//- Restrict Dependency Lookups
171+
//- [TODO] (@Host) This has been postponed for now until we come up with a decent use case
172+
//- .l-main-section
173+
//- :marked
174+
//- ## Dependency Visibility
175+
//- [TODO] (providers vs viewProviders) This has been postponed for now until come up with a decent use case

0 commit comments

Comments
 (0)