diff --git a/aio/content/examples/ngmodules/src/app/app.module.ts b/aio/content/examples/ngmodules/src/app/app.module.ts index 61f1dc599c..a19fbbae52 100644 --- a/aio/content/examples/ngmodules/src/app/app.module.ts +++ b/aio/content/examples/ngmodules/src/app/app.module.ts @@ -4,22 +4,20 @@ import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; /* App Root */ -import { AppComponent } from './app.component'; +import { AppComponent } from './app.component'; /* Feature Modules */ -import { ContactModule } from './contact/contact.module'; -import { CoreModule } from './core/core.module'; +import { ContactModule } from './contact/contact.module'; +// #docregion import-for-root +import { CoreModule } from './core/core.module'; +// #enddocregion import-for-root /* Routing Module */ import { AppRoutingModule } from './app-routing.module'; - +// #docregion import-for-root @NgModule({ - declarations: [ - AppComponent - ], - // #docregion import-for-root imports: [ BrowserModule, ContactModule, @@ -28,6 +26,11 @@ import { AppRoutingModule } from './app-routing.module'; ], // #enddocregion import-for-root providers: [], + declarations: [ + AppComponent + ], bootstrap: [AppComponent] + // #docregion import-for-root }) export class AppModule { } +// #enddocregion import-for-root diff --git a/aio/content/examples/ngmodules/src/app/core/core.module.ts b/aio/content/examples/ngmodules/src/app/core/core.module.ts index f87903e4d9..0d4c80fe74 100644 --- a/aio/content/examples/ngmodules/src/app/core/core.module.ts +++ b/aio/content/examples/ngmodules/src/app/core/core.module.ts @@ -1,31 +1,34 @@ -/* tslint:disable:member-ordering no-unused-variable */ - // #docregion whole-core-module -import { - ModuleWithProviders, NgModule, - Optional, SkipSelf } from '@angular/core'; +// #docregion whole-core-module +import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core'; -import { CommonModule } from '@angular/common'; +import { CommonModule } from '@angular/common'; -import { TitleComponent } from './title.component'; -import { UserService } from './user.service'; +import { TitleComponent } from './title.component'; +// #docregion user-service +import { UserService } from './user.service'; +// #enddocregion user-service import { UserServiceConfig } from './user.service'; + +// #docregion user-service @NgModule({ + // #enddocregion user-service imports: [ CommonModule ], declarations: [ TitleComponent ], exports: [ TitleComponent ], + // #docregion user-service providers: [ UserService ] }) export class CoreModule { - // #docregion ctor + // #enddocregion user-service + // #docregion ctor constructor (@Optional() @SkipSelf() parentModule: CoreModule) { if (parentModule) { throw new Error( 'CoreModule is already loaded. Import it in the AppModule only'); } } -// #enddocregion ctor - + // #enddocregion ctor // #docregion for-root static forRoot(config: UserServiceConfig): ModuleWithProviders { @@ -36,9 +39,8 @@ export class CoreModule { ] }; } - // #enddocregion for-root + // #docregion user-service } - +// #enddocregion user-service // #enddocregion whole-core-module - diff --git a/aio/content/guide/singleton-services.md b/aio/content/guide/singleton-services.md index 935dda52cb..9e558758cd 100644 --- a/aio/content/guide/singleton-services.md +++ b/aio/content/guide/singleton-services.md @@ -5,10 +5,8 @@ * A basic understanding of [Bootstrapping](guide/bootstrapping). * Familiarity with [Providers](guide/providers). -For a sample app using the app-wide singleton service -that this page describes, see the -live example -showcasing all the documented features of NgModules. +For a sample app using the app-wide singleton service that this page describes, see the + showcasing all the documented features of NgModules.
@@ -25,7 +23,7 @@ have the same lifetime of the application, hence singleton. The following example module is called, as a convention, `CoreModule`. This use of `@NgModule` creates organizational infrastructure and gives you a way of providing services from a designated NgModule. - + Here, `CoreModule` provides the `UserService`, and because `AppModule` @@ -66,7 +64,7 @@ If a module provides both providers and declarations (components, directives, pi -To make this more concrete, consider the `RouterModule` as an example. `RouterModule` needs to provide the `Router` service, as well as the `RouterOutlet` directive. `RouterModule` has to be imported by the root application module so that the application has a `Router` and the application has at least one `RouterOutlet`. It also must be imported by the individual route components so that they can place `RouterOutlet` directives into their template for sub-routes. +To make this more concrete, consider the `RouterModule` as an example. `RouterModule` needs to provide the `Router` service, as well as the `RouterOutlet` directive. `RouterModule` has to be imported by the root application module so that the application has a `Router` and the application has at least one `RouterOutlet`. It also must be imported by the individual route components so that they can place `RouterOutlet` directives into their template for sub-routes. If the `RouterModule` didn’t have `forRoot()` then each route component would instantiate a new `Router` instance, which would break the application as there can only be one `Router`. For this reason, the `RouterModule` has the `RouterOutlet` declaration so that it is available everywhere, but the `Router` provider is only in the `forRoot()`. The result is that the root application module imports `RouterModule.forRoot(...)` and gets a `Router`, whereas all route components import `RouterModule` which does not include the `Router`.