docs: use InMemoryWebApiModule everywhere

closes #2137

Author: wardbell

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 ];
+
+const b_components = [ BarryComponent, BethComponent, BobComponent ];
 
-// #docregion C_DIRECTIVES
-const C_DIRECTIVES = [
+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 { }

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 { }
 

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,

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' },

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)

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")

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 <span ngio-ex>app/app.module.ts></span> demonstrating these steps.