diff --git a/aio/content/examples/toh-pt4/src/app/app.module.ts b/aio/content/examples/toh-pt4/src/app/app.module.ts index 70b26976da..f3cc34faff 100644 --- a/aio/content/examples/toh-pt4/src/app/app.module.ts +++ b/aio/content/examples/toh-pt4/src/app/app.module.ts @@ -21,7 +21,14 @@ import { MessagesComponent } from './messages/messages.component'; FormsModule ], // #docregion providers - providers: [ HeroService, MessageService ], + // #docregion providers-heroservice + providers: [ + HeroService, + // #enddocregion providers-heroservice + MessageService + // #docregion providers-heroservice + ], + // #enddocregion providers-heroservice // #enddocregion providers bootstrap: [ AppComponent ] }) diff --git a/aio/content/tutorial/toh-pt4.md b/aio/content/tutorial/toh-pt4.md index 807f886f31..241e50799f 100644 --- a/aio/content/tutorial/toh-pt4.md +++ b/aio/content/tutorial/toh-pt4.md @@ -97,7 +97,7 @@ Since you did not, you'll have to provide it yourself. Open the `AppModule` class, import the `HeroService`, and add it to the `@NgModule.providers` array. - + The `providers` array tells Angular to create a single, shared instance of `HeroService` @@ -105,6 +105,12 @@ and inject into any class that asks for it. The `HeroService` is now ready to plug into the `HeroesComponent`. +
+ +This is a interim code sample that will allow you to provide and use the `HeroService`. At this point, the code will differ from the `HeroService` in the ["final code review"](#final-code-review). + +
+
Learn more about _providers_ in the [Providers](guide/providers) guide. @@ -423,6 +429,10 @@ Here are the code files discussed on this page and your app should look like thi path="toh-pt4/src/app/messages/messages.component.css"> + + +