From 49df4ef454696a6b458a51bebbb2ee608cc72733 Mon Sep 17 00:00:00 2001 From: Judy Bogart Date: Mon, 25 Jun 2018 09:56:49 -0700 Subject: [PATCH] docs: add tree-shakable providers (#24481) PR Close #24481 --- aio/content/guide/architecture-components.md | 2 +- aio/content/guide/architecture-services.md | 24 +++++++++++++++++--- 2 files changed, 22 insertions(+), 4 deletions(-) diff --git a/aio/content/guide/architecture-components.md b/aio/content/guide/architecture-components.md index 54b053ecf8..b13a696671 100644 --- a/aio/content/guide/architecture-components.md +++ b/aio/content/guide/architecture-components.md @@ -40,7 +40,7 @@ Angular inserts an instance of the `HeroListComponent` view between those tags. * `templateUrl`: The module-relative address of this component's HTML template. Alternatively, you can provide the HTML template inline, as the value of the `template` property. This template defines the component's _host view_. -* `providers`: An array of **dependency injection providers** for services that the component requires. In the example, this tells Angular how provide the `HeroService` instance that the component's constructor uses to get the list of heroes to display. +* `providers`: An array of **dependency injection providers** for services that the component requires. In the example, this tells Angular how provide the `HeroService` instance that the component's constructor uses to get the list of heroes to display.
diff --git a/aio/content/guide/architecture-services.md b/aio/content/guide/architecture-services.md index 7e73d7b399..80ca961167 100644 --- a/aio/content/guide/architecture-services.md +++ b/aio/content/guide/architecture-services.md @@ -60,11 +60,29 @@ The process of `HeroService` injection looks something like this: ### Providing services -You must register at least one *provider* of any service you are going to use. You can register providers in modules or in components. +You must register at least one *provider* of any service you are going to use. A service can register providers itself, making it available everywhere, or you can register providers with specific modules or components. You register providers in the metadata of the service (in the `@Injectable` decorator), or in the `@NgModule` or `@Component` metadata -* When you add providers to the [root module](guide/architecture-modules), the same instance of a service is available to all components in your app. +* By default, the Angular CLI command `ng generate service` registers a provider with the root injector for your service by including provider metadata in the `@Injectable` decorator. The tutorial uses this method to register the provider of HeroService class definition: - +``` +@Injectable({ + providedIn: 'root', +}) +``` + + When you provide the service at the root level, Angular creates a single, shared instance of HeroService and injects into any class that asks for it. Registering the provider in the `@Injectable` metadata also allows Angular to optimize an app by removing the service if it turns out not to be used after all. + +* When you register a provider with a [specific NgModule](guide/architecture-modules), the same instance of a service is available to all components in that NgModule. To register at this level, use the `providers` property of the `@NgModule` decorator: + +``` +@NgModule({ + providers: [ + BackendService, + Logger + ], + ... +}) +``` * When you register a provider at the component level, you get a new instance of the service with each new instance of that component. At the component level, register a service provider in the `providers` property of the `@Component` metadata: