diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/app.module.ts b/public/docs/_examples/cb-dependency-injection/ts/app/app.module.ts index 1f160dd0ce..7b9487e815 100644 --- a/public/docs/_examples/cb-dependency-injection/ts/app/app.module.ts +++ b/public/docs/_examples/cb-dependency-injection/ts/app/app.module.ts @@ -1,16 +1,16 @@ // #docregion import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; -import { XHRBackend } from '@angular/http'; -/* import { routing, - appRoutingProviders } from './app.routing';*/ +import { HttpModule } from '@angular/http'; + +/* import { routing } from './app.routing';*/ import { LocationStrategy, HashLocationStrategy } from '@angular/common'; import { NgModule } from '@angular/core'; import { HeroData } from './hero-data'; -import { InMemoryBackendService, - SEED_DATA } from 'angular2-in-memory-web-api'; +import { InMemoryWebApiModule } from 'angular2-in-memory-web-api'; + import { AppComponent } from './app.component'; import { HeroBioComponent } from './hero-bio.component'; @@ -32,47 +32,43 @@ import { ParentFinderComponent, BethComponent, BobComponent } from './parent-finder.component'; -const DIRECTIVES = [ +const declarations = [ + AppComponent, HeroBiosComponent, HeroBiosAndContactsComponent, HeroBioComponent, HeroesBaseComponent, SortedHeroesComponent, HeroOfTheMonthComponent, HeroContactComponent, HighlightDirective, ParentFinderComponent, - AppComponent ]; -const B_DIRECTIVES = [ BarryComponent, BethComponent, BobComponent ]; +const a_components = [AliceComponent, AlexComponent ]; -// #docregion C_DIRECTIVES -const C_DIRECTIVES = [ +const b_components = [ BarryComponent, BethComponent, BobComponent ]; + +const c_components = [ CarolComponent, ChrisComponent, CraigComponent, CathyComponent ]; -// #enddocregion C_DIRECTIVES -// #docregion bootstrap @NgModule({ imports: [ BrowserModule, FormsModule, + HttpModule, + InMemoryWebApiModule.forRoot(HeroData) // routing TODO: add routes ], - declarations: [ ...DIRECTIVES, - ...B_DIRECTIVES, - ...C_DIRECTIVES, - AliceComponent, - AlexComponent ], + declarations: [ + declarations, + a_components, + b_components, + c_components, + ], bootstrap: [ AppComponent ], + // #docregion providers providers: [ - // appRoutingProviders, TODO: add routes - { provide: LocationStrategy, useClass: HashLocationStrategy }, - - { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server - { provide: SEED_DATA, useClass: HeroData } // in-mem server data + { provide: LocationStrategy, useClass: HashLocationStrategy } ] + // #enddocregion providers }) -export class AppModule { - constructor() { - } -} -// #enddocregion bootstraps +export class AppModule { } diff --git a/public/docs/_examples/server-communication/ts/app/app.module.1.ts b/public/docs/_examples/server-communication/ts/app/app.module.1.ts index 51e52573cb..51329e31cb 100644 --- a/public/docs/_examples/server-communication/ts/app/app.module.1.ts +++ b/public/docs/_examples/server-communication/ts/app/app.module.1.ts @@ -14,7 +14,7 @@ import { AppComponent } from './app.component'; JsonpModule ], declarations: [ AppComponent ], - bootstrap: [ AppComponent ] + bootstrap: [ AppComponent ] }) export class AppModule { } diff --git a/public/docs/_examples/server-communication/ts/app/app.module.ts b/public/docs/_examples/server-communication/ts/app/app.module.ts index 528110661b..95490f2b1d 100644 --- a/public/docs/_examples/server-communication/ts/app/app.module.ts +++ b/public/docs/_examples/server-communication/ts/app/app.module.ts @@ -2,11 +2,12 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; -import { HttpModule, JsonpModule, XHRBackend } from '@angular/http'; +import { HttpModule, JsonpModule } from '@angular/http'; -import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api'; -import { HeroData } from './hero-data'; -import { AppComponent } from './app.component'; +import { InMemoryWebApiModule } from 'angular2-in-memory-web-api'; +import { HeroData } from './hero-data'; + +import { AppComponent } from './app.component'; import { HeroListComponent } from './toh/hero-list.component'; import { HeroListPromiseComponent } from './toh/hero-list.component.promise'; @@ -19,11 +20,10 @@ import { WikiSmartComponent } from './wiki/wiki-smart.component'; BrowserModule, FormsModule, HttpModule, - JsonpModule - ], - providers: [ - { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server - { provide: SEED_DATA, useClass: HeroData } // in-mem server data + JsonpModule, + // #docregion in-mem-web-api + InMemoryWebApiModule.forRoot(HeroData) + // #enddocregion in-mem-web-api ], declarations: [ AppComponent, diff --git a/public/docs/_examples/server-communication/ts/app/hero-data.ts b/public/docs/_examples/server-communication/ts/app/hero-data.ts index ad10b464c7..e5e0bab986 100644 --- a/public/docs/_examples/server-communication/ts/app/hero-data.ts +++ b/public/docs/_examples/server-communication/ts/app/hero-data.ts @@ -1,5 +1,6 @@ // #docregion -export class HeroData { +import { InMemoryDbService } from 'angular2-in-memory-web-api'; +export class HeroData implements InMemoryDbService { createDb() { let heroes = [ { id: '1', name: 'Windstorm' }, diff --git a/public/docs/_examples/style-guide/ts/app/main.ts b/public/docs/_examples/style-guide/ts/app/main.ts index 77e1c29934..b3901b5a8c 100644 --- a/public/docs/_examples/style-guide/ts/app/main.ts +++ b/public/docs/_examples/style-guide/ts/app/main.ts @@ -2,16 +2,14 @@ import { NgModule } from '@angular/core'; import { browserDynamicPlatform } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; -import { HttpModule, - XHRBackend } from '@angular/http'; +import { HttpModule} from '@angular/http'; +import { InMemoryWebApiModule } from 'angular2-in-memory-web-api'; + import { RouterModule } from '@angular/router'; import { HashLocationStrategy, LocationStrategy } from '@angular/common'; -import { InMemoryBackendService, - SEED_DATA } from 'angular2-in-memory-web-api'; - import 'rxjs/add/operator/map'; import { HeroData } from './hero-data'; @@ -49,6 +47,7 @@ const moduleMetadata = { imports: [ BrowserModule, HttpModule, + InMemoryWebApiModule.forRoot(HeroData), s0101.AppModule, s0207.AppModule, @@ -77,17 +76,16 @@ const moduleMetadata = { s0704.AppModule, s0901.AppModule, + RouterModule.forRoot([ { path: '', redirectTo: '/01-01', pathMatch: 'full' } ], {/* enableTracing: true */}), ], - declarations: [AppComponent], providers: [ - { provide: LocationStrategy, useClass: HashLocationStrategy }, - { provide: XHRBackend, useClass: InMemoryBackendService }, - { provide: SEED_DATA, useClass: HeroData } + { provide: LocationStrategy, useClass: HashLocationStrategy } ], - bootstrap: [ AppComponent ] + declarations: [ AppComponent ], + bootstrap: [ AppComponent ] }; @NgModule(moduleMetadata) diff --git a/public/docs/ts/latest/cookbook/dependency-injection.jade b/public/docs/ts/latest/cookbook/dependency-injection.jade index acfb42c1f5..cd4850dc64 100644 --- a/public/docs/ts/latest/cookbook/dependency-injection.jade +++ b/public/docs/ts/latest/cookbook/dependency-injection.jade @@ -80,25 +80,16 @@ include ../_util-fns .l-main-section :marked ## External module configuration - We can register _certain_ module providers in the `NgModule` rather than in the root application component. + We often register providers in the `NgModule` rather than in the root application component. - We'd do this when we expect to select or configure external modules that support our application - but (a) aren't conceptually part of the application and (b) that we could change later without - altering the essential logic of the application. + We do this when (a) we expect the service to be injectable everywhere + or (b) we must configure another application global service _before it starts_. - For example, we might configure the Component Router with different - [location strategies](../guide/router.html#location-strategy) based on environmental factors. - The choice of location strategy doesn't matter to the application itself. + We see an example of the second case here, where we configure the Component Router with a non-default + [location strategy](../guide/router.html#location-strategy) by listing its provider + in the `providers` list of the `AppModule`. - We could sneak in a fake HTTP backend with sample data during development rather than - allow http calls to a remote server (that might not yet exist). - We'll switch to the real backend in production. - The application shouldn't know or care one way or the other. - - See both examples in the following `app.module.ts` - where we list their service providers in the `providers` array of the `NgModule` (AppModule). - -+makeExample('cb-dependency-injection/ts/app/app.module.ts','bootstrap','app/app.module.ts')(format='.') ++makeExample('cb-dependency-injection/ts/app/app.module.ts','providers','app/app.module.ts (providers)')(format='.') a(id="injectable") a(id="nested-dependencies") diff --git a/public/docs/ts/latest/guide/server-communication.jade b/public/docs/ts/latest/guide/server-communication.jade index fbe656ba37..6c899f01e9 100644 --- a/public/docs/ts/latest/guide/server-communication.jade +++ b/public/docs/ts/latest/guide/server-communication.jade @@ -669,15 +669,26 @@ a#in-mem-web-api Ensure that the `HeroService` endpoint refers to the web API: +makeExample('server-communication/ts/app/toh/hero.service.ts', 'endpoint')(format=".") :marked - Finally, we need to redirect client HTTP requests to the in-memory web API. + Finally, redirect client HTTP requests to the in-memory web API. block redirect-to-web-api :marked - This redirection is easy to configure because Angular's `http` service delegates the client/server communication tasks + This redirection is easy to configure with the in-memory web API service module. + by adding the `InMemoryWebApiModule` to the `AppModule.imports` list. + At the same time, we calling its `forRoot` configuration method with the `HeroData` class. + +makeExample('server-communication/ts/app/app.module.ts', 'in-mem-web-api')(format=".") + :marked + ### How it works + + Angular's `http` service delegates the client/server communication tasks to a helper service called the `XHRBackend`. - To enable our server simulation, we replace the default `XHRBackend` service with - the in-memory web API service using standard Angular provider registration techniques. - We initialize the in-memory web API with *seed data* from the mock hero dataset at the same time. + Using standard Angular provider registration techniques, the `InMemoryWebApiModule` + replaces the default `XHRBackend` service with its own in-memory alternative. + The `forRoot` method initialize the in-memory web API with *seed data* from the mock hero dataset at the same time. + .l-sub-section + :marked + The `forRoot` method name is a strong reminder that you should only call the `InMemoryWebApiModule` _once_ + while setting the metadata for the root `AppModule`. Don't call it again!. :marked Here is the revised (and final) version of app/app.module.ts> demonstrating these steps.