diff --git a/public/docs/ts/latest/tutorial/toh-pt3.jade b/public/docs/ts/latest/tutorial/toh-pt3.jade index eb91454d19..8ecad8dc24 100644 --- a/public/docs/ts/latest/tutorial/toh-pt3.jade +++ b/public/docs/ts/latest/tutorial/toh-pt3.jade @@ -171,7 +171,7 @@ code-example(format=".") :marked The `AppComponent`’s template should now look like this -+makeExample('toh-3/ts/app/app.component.ts', 'hero-detail-template', 'app.component.ts (Template)') ++makeExample('toh-3/ts/app/app.component.ts', 'hero-detail-template', 'app.component.ts (Template)')(format='.') :marked Thanks to the binding, the `HeroDetailComponent` should receive the hero from the `AppComponent` and display that hero's detail beneath the list. The detail should update every time the user picks a new hero. @@ -189,8 +189,7 @@ code-example(format=".") We tell Angular about it by listing it in the metadata `directives` array. Let's add that array property to the bottom of the `@Component` configuration object, immediately after the `template` and `styles` properties. -+makeExample('toh-3/ts/app/app.component.ts', 'directives') - ++makeExample('toh-3/ts/app/app.component.ts', 'directives', 'app/app.component.ts (Directives)') :marked ### It works! @@ -215,7 +214,7 @@ code-example(format=".") .file hero-detail.component.ts .file main.ts .file node_modules ... - .file typings ... + .file typings ... .file index.html .file package.json .file tsconfig.json diff --git a/public/docs/ts/latest/tutorial/toh-pt4.jade b/public/docs/ts/latest/tutorial/toh-pt4.jade index 81cf40f263..630007aacd 100644 --- a/public/docs/ts/latest/tutorial/toh-pt4.jade +++ b/public/docs/ts/latest/tutorial/toh-pt4.jade @@ -167,7 +167,7 @@ code-example(format="." language="bash"). ### Inject the *HeroService* - Two lines replace the one line of *new*: + Two lines replace the one line that created with *new*: 1. we add a constructor. 1. we add to the component's `providers` metadata @@ -178,11 +178,6 @@ code-example(format="." language="bash"). defines a private `heroService` property and identifies it as a `HeroService` injection site. :marked Now Angular will know to supply an instance of the `HeroService` when it creates a new `AppComponent`. - - Angular has to get that instance from somewhere. That's the role of the Angular *Dependency Injector*. - The **Injector** has a **container** of previously created services. - Either it finds and returns a pre-existing `HeroService` from its container or it creates a new instance, adds - it to the container, and returns it to Angular. .l-sub-section :marked @@ -201,22 +196,7 @@ code-example(format="." language="html"). :marked The `providers` array tells Angular to create a fresh instance of the `HeroService` when it creates a new `AppComponent`. The `AppComponent` can use that service to get heroes and so can every child component of its component tree. - -.l-sub-section - :marked - ### Services and the component tree - - Recall that the `AppComponent` creates an instance of `HeroDetail` by virtue of the - `` tag at the bottom of its template. That `HeroDetail` is a child of the `AppComponent`. - - If the `HeroDetailComponent` needed its parent component's `HeroService`, - it would ask Angular to inject the service into its constructor which would look just like the one for `AppComponent`: - +makeExample('toh-4/ts/app/app.component.1.ts', 'ctor', 'hero-detail.component.ts (constructor)') - :marked - The `HeroDetailComponent` must *not* repeat its parent's `providers` array! Guess [why](#shadow-provider). - - The `AppComponent` is the top level component of our application. - There should be only one instance of that component and only one instance of the `HeroService` in our entire app. +a#child-component :marked ### *getHeroes* in the *AppComponent* We've got the service in a `heroService` private variable. Let's use it. @@ -384,18 +364,3 @@ code-example(format="." language="html"). Back in the `AppComponent`, replace `heroService.getHeroes` with `heroService.getHeroesSlowly` and see how the app behaves. - -.l-main-section - -:marked - ### Appendix: Shadowing the parent's service - - We stated [earlier](#child-component) that if we injected the parent `AppComponent` `HeroService` - into the `HeroDetailComponent`, *we must not add a providers array* to the `HeroDetailComponent` metadata. - - Why? Because that tells Angular to create a new instance of the `HeroService` at the `HeroDetailComponent` level. - The `HeroDetailComponent` doesn't want its *own* service instance; it wants its *parent's* service instance. - Adding the `providers` array creates a new service instance that shadows the parent instance. - - Think carefully about where and when to register a provider. - Understand the scope of that registration. Be careful not to create a new service instance at the wrong level.