From 5c5c9ca16c3252423d48576a12b954e8be34a216 Mon Sep 17 00:00:00 2001 From: Brandon Roberts Date: Wed, 17 Aug 2016 20:28:22 -0500 Subject: [PATCH] fix(toh-5): Fixed issues in tutorial flow The HeroDetailComponent should be in the module declarations from the beginning. InMemoryWebApiModule.forRoot(InMemoryDataService) and correct text --- public/docs/_examples/package.json | 2 +- .../_examples/toh-5/ts/app/app.module.1.ts | 10 ++--- .../docs/_examples/toh-5/ts/app/app.module.ts | 19 ++++----- .../docs/_examples/toh-6/ts/app/app.module.ts | 42 +++++++++---------- .../toh-6/ts/app/in-memory-data.service.ts | 3 +- public/docs/ts/latest/tutorial/toh-pt5.jade | 13 ++---- public/docs/ts/latest/tutorial/toh-pt6.jade | 23 ++++++---- 7 files changed, 53 insertions(+), 59 deletions(-) diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json index 7015bd0767..6c253c3e4c 100644 --- a/public/docs/_examples/package.json +++ b/public/docs/_examples/package.json @@ -35,7 +35,7 @@ "@angular/router": "3.0.0-rc.1", "@angular/router-deprecated": "2.0.0-rc.2", "@angular/upgrade": "2.0.0-rc.5", - "angular2-in-memory-web-api": "0.0.15", + "angular2-in-memory-web-api": "0.0.17", "bootstrap": "^3.3.6", "core-js": "^2.4.0", "reflect-metadata": "^0.1.3", diff --git a/public/docs/_examples/toh-5/ts/app/app.module.1.ts b/public/docs/_examples/toh-5/ts/app/app.module.1.ts index 473ca08fb8..e1cda9b620 100644 --- a/public/docs/_examples/toh-5/ts/app/app.module.1.ts +++ b/public/docs/_examples/toh-5/ts/app/app.module.1.ts @@ -3,11 +3,10 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; -import { AppComponent } from './app.component'; - -import { HeroesComponent } from './heroes.component'; - -import { HeroService } from './hero.service'; +import { AppComponent } from './app.component'; +import { HeroDetailComponent } from './hero-detail.component'; +import { HeroesComponent } from './heroes.component'; +import { HeroService } from './hero.service'; @NgModule({ imports: [ @@ -16,6 +15,7 @@ import { HeroService } from './hero.service'; ], declarations: [ AppComponent, + HeroDetailComponent, HeroesComponent ], providers: [ diff --git a/public/docs/_examples/toh-5/ts/app/app.module.ts b/public/docs/_examples/toh-5/ts/app/app.module.ts index a0ae4ecf83..67bafebd38 100644 --- a/public/docs/_examples/toh-5/ts/app/app.module.ts +++ b/public/docs/_examples/toh-5/ts/app/app.module.ts @@ -4,16 +4,13 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; -import { AppComponent } from './app.component'; -// #docregion routing -import { routing } from './app.routing'; -// #enddocregion routing - -import { HeroesComponent } from './heroes.component'; +import { AppComponent } from './app.component'; import { DashboardComponent } from './dashboard.component'; import { HeroDetailComponent } from './hero-detail.component'; - -import { HeroService } from './hero.service'; +import { HeroesComponent } from './heroes.component'; +import { HeroService } from './hero.service'; +// #docregion routing +import { routing } from './app.routing'; // #docregion routing @NgModule({ @@ -26,11 +23,9 @@ import { HeroService } from './hero.service'; // #docregion dashboard, hero-detail declarations: [ AppComponent, - HeroesComponent, DashboardComponent, - // #enddocregion dashboard - HeroDetailComponent - // #docregion dashboard + HeroDetailComponent, + HeroesComponent ], // #enddocregion dashboard, hero-detail providers: [ diff --git a/public/docs/_examples/toh-6/ts/app/app.module.ts b/public/docs/_examples/toh-6/ts/app/app.module.ts index 032ef28d8f..1712c79371 100644 --- a/public/docs/_examples/toh-6/ts/app/app.module.ts +++ b/public/docs/_examples/toh-6/ts/app/app.module.ts @@ -1,55 +1,51 @@ // #docplaster // #docregion , v1, v2 -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; -import { HttpModule } from '@angular/http'; +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; +import { HttpModule } from '@angular/http'; // #enddocregion v1 // Imports for loading & configuring the in-memory web api -import { XHRBackend } from '@angular/http'; - -import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api'; -import { InMemoryDataService } from './in-memory-data.service'; +import { InMemoryWebApiModule } from 'angular2-in-memory-web-api'; +import { InMemoryDataService } from './in-memory-data.service'; // #docregion v1 -import { AppComponent } from './app.component'; -import { routing } from './app.routing'; - -import { HeroesComponent } from './heroes.component'; +import { AppComponent } from './app.component'; import { DashboardComponent } from './dashboard.component'; +import { HeroesComponent } from './heroes.component'; import { HeroDetailComponent } from './hero-detail.component'; import { HeroService } from './hero.service'; // #enddocregion v1, v2 -// #docregion search import { HeroSearchComponent } from './hero-search.component'; // #docregion v1, v2 +import { routing } from './app.routing'; -// #enddocregion search @NgModule({ imports: [ BrowserModule, FormsModule, - routing, - HttpModule + HttpModule, + // #enddocregion v1 + // #docregion in-mem-web-api + InMemoryWebApiModule.forRoot(InMemoryDataService), + // #enddocregion in-mem-web-api + // #docregion v1 + routing ], // #docregion search declarations: [ AppComponent, - HeroesComponent, DashboardComponent, HeroDetailComponent, - // #enddocregion v1, v2 + HeroesComponent, + // #enddocregion v1, v2 HeroSearchComponent - // #docregion v1, v2 + // #docregion v1, v2 ], // #enddocregion search providers: [ HeroService, - // #enddocregion v1 - { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server - { provide: SEED_DATA, useClass: InMemoryDataService } // in-mem server data - // #docregion v1 ], bootstrap: [ AppComponent ] }) diff --git a/public/docs/_examples/toh-6/ts/app/in-memory-data.service.ts b/public/docs/_examples/toh-6/ts/app/in-memory-data.service.ts index 261795a641..c63151a122 100644 --- a/public/docs/_examples/toh-6/ts/app/in-memory-data.service.ts +++ b/public/docs/_examples/toh-6/ts/app/in-memory-data.service.ts @@ -1,5 +1,6 @@ // #docregion , init -export class InMemoryDataService { +import { InMemoryDbService } from 'angular2-in-memory-web-api'; +export class InMemoryDataService implements InMemoryDbService { createDb() { let heroes = [ {id: 11, name: 'Mr. Nice'}, diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade index 9f6a7793a1..c845938fff 100644 --- a/public/docs/ts/latest/tutorial/toh-pt5.jade +++ b/public/docs/ts/latest/tutorial/toh-pt5.jade @@ -479,15 +479,10 @@ code-example(format=''). The colon (:) in the path indicates that `:id` is a placeholder to be filled with a specific hero `id` when navigating to the `HeroDetailComponent`. -.l-sub-section - :marked - Remember to import the hero detail component before creating this route. - -+ifDocsFor('ts|js') - :marked - Add the `HeroDetailComponent` to our root NgModule's `declarations`. - - +makeExcerpt('app/app.module.ts', 'hero-detail') ++ifDocsFor('dart') + .l-sub-section + :marked + Remember to import the hero detail component before creating this route. :marked We're finished with the application routes. diff --git a/public/docs/ts/latest/tutorial/toh-pt6.jade b/public/docs/ts/latest/tutorial/toh-pt6.jade index cb7f750aec..bf98e28054 100644 --- a/public/docs/ts/latest/tutorial/toh-pt6.jade +++ b/public/docs/ts/latest/tutorial/toh-pt6.jade @@ -59,7 +59,7 @@ block http-providers So we register them in the `imports` array of `app.module.ts` where we bootstrap the application and its root `AppComponent`. - +makeExcerpt('app/app.module.ts (v1)') + +makeExample('app/app.module.ts', 'v1','app/app.module.ts (v1)') :marked Notice that we supply `!{_HttpModule}` as part of the *imports* !{_array} in root NgModule `AppModule`. @@ -88,10 +88,16 @@ block http-providers block backend :marked - We're replacing the default `XHRBackend`, the service that talks to the remote server, - with the in-memory web API service after priming it as follows: + We're importing the `InMemoryWebApiModule` and adding it to the module `imports`. + The `InMemoryWebApiModule` replaces the default `Http` client backend — + the supporting service that talks to the remote server — + with an _in-memory web API alternative service_. + +makeExcerpt(_appModuleTsVsMainTs, 'in-mem-web-api', '') + :marked + The `forRoot` configuration method takes an `InMemoryDataService` class + that will prime the in-memory database as follows: -+makeExample('app/in-memory-data.service.ts', 'init') ++makeExample('app/in-memory-data.service.ts', 'init')(format='.') p This file replaces the #[code #[+adjExPath('mock-heroes.ts')]] which is now safe to delete. @@ -500,24 +506,25 @@ block observable-transformers We take a different approach in this example. We combine all of the RxJS `Observable` extensions that _our entire app_ requires into a single RxJS imports file. - +makeExample('app/rxjs-extensions.ts') + +makeExample('app/rxjs-extensions.ts')(format='.') :marked We load them all at once by importing `rxjs-extensions` in `AppComponent`. - +makeExcerpt('app/app.component.ts', 'rxjs-extensions') + +makeExcerpt('app/app.component.ts', 'rxjs-extensions')(format='.') :marked ### Add the search component to the dashboard We add the hero search HTML element to the bottom of the `DashboardComponent` template. -+makeExample('app/dashboard.component.html') ++makeExample('app/dashboard.component.html')(format='.') - var _declarations = _docsFor == 'dart' ? 'directives' : 'declarations' - var declFile = _docsFor == 'dart' ? 'app/dashboard.component.ts' : 'app/app.module.ts' :marked - And finally, we import the `HeroSearchComponent` and add it to the `!{_declarations}` !{_array}: + And finally, we import the `HeroSearchComponent` from `'./hero-search.component.ts'` + and add it to the `!{_declarations}` !{_array}: +makeExcerpt(declFile, 'search')