From 97fbda0d768874bf6964497debb9b37feba3b5dd Mon Sep 17 00:00:00 2001 From: Brandon Roberts Date: Sun, 26 Jun 2016 12:13:44 -0500 Subject: [PATCH] docs(toh-6/ts): Upgraded http tutorial to use new router --- .../_examples/toh-6/ts/app/app.component.css | 2 +- .../_examples/toh-6/ts/app/app.component.ts | 19 +++------- .../docs/_examples/toh-6/ts/app/app.routes.ts | 30 ++++++++++++++++ .../toh-6/ts/app/dashboard.component.ts | 4 +-- .../toh-6/ts/app/hero-detail.component.ts | 35 +++++++++++-------- .../toh-6/ts/app/heroes.component.ts | 4 +-- public/docs/_examples/toh-6/ts/app/main.ts | 11 ++++-- public/docs/ts/latest/tutorial/toh-pt6.jade | 7 ++-- 8 files changed, 73 insertions(+), 39 deletions(-) create mode 100644 public/docs/_examples/toh-6/ts/app/app.routes.ts diff --git a/public/docs/_examples/toh-6/ts/app/app.component.css b/public/docs/_examples/toh-6/ts/app/app.component.css index f4e8082ea1..071e665767 100644 --- a/public/docs/_examples/toh-6/ts/app/app.component.css +++ b/public/docs/_examples/toh-6/ts/app/app.component.css @@ -24,6 +24,6 @@ nav a:hover { color: #039be5; background-color: #CFD8DC; } -nav a.router-link-active { +nav a.active { color: #039be5; } diff --git a/public/docs/_examples/toh-6/ts/app/app.component.ts b/public/docs/_examples/toh-6/ts/app/app.component.ts index 22317d4403..2a1ff50ba3 100644 --- a/public/docs/_examples/toh-6/ts/app/app.component.ts +++ b/public/docs/_examples/toh-6/ts/app/app.component.ts @@ -1,12 +1,9 @@ // #docplaster // #docregion -import { Component } from '@angular/core'; -import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated'; +import { Component } from '@angular/core'; +import { ROUTER_DIRECTIVES } from '@angular/router'; -import { DashboardComponent } from './dashboard.component'; -import { HeroesComponent } from './heroes.component'; -import { HeroDetailComponent } from './hero-detail.component'; -import { HeroService } from './hero.service'; +import { HeroService } from './hero.service'; @Component({ selector: 'my-app', @@ -14,23 +11,17 @@ import { HeroService } from './hero.service'; template: `

{{title}}

`, styleUrls: ['app/app.component.css'], directives: [ROUTER_DIRECTIVES], providers: [ - ROUTER_PROVIDERS, HeroService, ] }) -@RouteConfig([ - { path: '/dashboard', name: 'Dashboard', component: DashboardComponent, useAsDefault: true }, - { path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent }, - { path: '/heroes', name: 'Heroes', component: HeroesComponent } -]) export class AppComponent { title = 'Tour of Heroes'; } diff --git a/public/docs/_examples/toh-6/ts/app/app.routes.ts b/public/docs/_examples/toh-6/ts/app/app.routes.ts new file mode 100644 index 0000000000..b299102385 --- /dev/null +++ b/public/docs/_examples/toh-6/ts/app/app.routes.ts @@ -0,0 +1,30 @@ +// #docregion +import { provideRouter, RouterConfig } from '@angular/router'; + +import { DashboardComponent } from './dashboard.component'; +import { HeroesComponent } from './heroes.component'; +import { HeroDetailComponent } from './hero-detail.component'; + +export const routes: RouterConfig = [ + { + path: '', + redirectTo: '/dashboard', + terminal: true + }, + { + path: 'dashboard', + component: DashboardComponent + }, + { + path: 'detail/:id', + component: HeroDetailComponent + }, + { + path: 'heroes', + component: HeroesComponent + } +]; + +export const APP_ROUTER_PROVIDERS = [ + provideRouter(routes) +]; diff --git a/public/docs/_examples/toh-6/ts/app/dashboard.component.ts b/public/docs/_examples/toh-6/ts/app/dashboard.component.ts index 8ca1e3a2e2..08ffecc0ea 100644 --- a/public/docs/_examples/toh-6/ts/app/dashboard.component.ts +++ b/public/docs/_examples/toh-6/ts/app/dashboard.component.ts @@ -1,7 +1,7 @@ // #docplaster // #docregion import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router-deprecated'; +import { Router } from '@angular/router'; import { Hero } from './hero'; import { HeroService } from './hero.service'; @@ -26,7 +26,7 @@ export class DashboardComponent implements OnInit { } gotoDetail(hero: Hero) { - let link = ['HeroDetail', { id: hero.id }]; + let link = ['/detail', hero.id]; this.router.navigate(link); } } diff --git a/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts index 8da8978a08..85d722999e 100644 --- a/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts +++ b/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts @@ -1,9 +1,9 @@ // #docplaster // #docregion, variables-imports -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { Component, EventEmitter, Input, OnInit, OnDestroy, Output } from '@angular/core'; // #enddocregion variables-imports -import { RouteParams } from '@angular/router-deprecated'; +import { ActivatedRoute } from '@angular/router'; import { Hero } from './hero'; import { HeroService } from './hero.service'; @@ -14,31 +14,39 @@ import { HeroService } from './hero.service'; styleUrls: ['app/hero-detail.component.css'] }) // #docregion variables-imports -export class HeroDetailComponent implements OnInit { +export class HeroDetailComponent implements OnInit, OnDestroy { @Input() hero: Hero; @Output() close = new EventEmitter(); error: any; + sub: any; navigated = false; // true if navigated here // #enddocregion variables-imports constructor( private heroService: HeroService, - private routeParams: RouteParams) { + private route: ActivatedRoute) { } // #docregion ngOnInit ngOnInit() { - if (this.routeParams.get('id') !== null) { - let id = +this.routeParams.get('id'); - this.navigated = true; - this.heroService.getHero(id) - .then(hero => this.hero = hero); - } else { - this.navigated = false; - this.hero = new Hero(); - } + this.sub = this.route.params.subscribe(params => { + if (params['id'] !== undefined) { + let id = +params['id']; + this.navigated = true; + this.heroService.getHero(id) + .then(hero => this.hero = hero); + } else { + this.navigated = false; + this.hero = new Hero(); + } + }); } // #enddocregion ngOnInit + + ngOnDestroy() { + this.sub.unsubscribe(); + } + // #docregion save save() { this.heroService @@ -57,4 +65,3 @@ export class HeroDetailComponent implements OnInit { } // #enddocregion goBack } - diff --git a/public/docs/_examples/toh-6/ts/app/heroes.component.ts b/public/docs/_examples/toh-6/ts/app/heroes.component.ts index 1573b96be6..3bf618f5bd 100644 --- a/public/docs/_examples/toh-6/ts/app/heroes.component.ts +++ b/public/docs/_examples/toh-6/ts/app/heroes.component.ts @@ -1,6 +1,6 @@ // #docregion import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router-deprecated'; +import { Router } from '@angular/router'; import { Hero } from './hero'; import { HeroService } from './hero.service'; @@ -68,6 +68,6 @@ export class HeroesComponent implements OnInit { } gotoDetail() { - this.router.navigate(['HeroDetail', { id: this.selectedHero.id }]); + this.router.navigate(['/detail', this.selectedHero.id]); } } diff --git a/public/docs/_examples/toh-6/ts/app/main.ts b/public/docs/_examples/toh-6/ts/app/main.ts index 958b9a8c69..948e2ca5ba 100644 --- a/public/docs/_examples/toh-6/ts/app/main.ts +++ b/public/docs/_examples/toh-6/ts/app/main.ts @@ -11,16 +11,21 @@ import { InMemoryDataService } from './in-memory-data.service'; import { bootstrap } from '@angular/platform-browser-dynamic'; import { HTTP_PROVIDERS } from '@angular/http'; -import { AppComponent } from './app.component'; +import { AppComponent } from './app.component'; +import { APP_ROUTER_PROVIDERS } from './app.routes'; // #enddocregion v1, final /* // #docregion v1 -bootstrap(AppComponent, [ HTTP_PROVIDERS ]); +bootstrap(AppComponent, [ + APP_ROUTER_PROVIDERS, + HTTP_PROVIDERS +]); // #enddocregion v1 - */ +*/ // #docregion final bootstrap(AppComponent, [ + APP_ROUTER_PROVIDERS, HTTP_PROVIDERS, { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server { provide: SEED_DATA, useClass: InMemoryDataService } // in-mem server data diff --git a/public/docs/ts/latest/tutorial/toh-pt6.jade b/public/docs/ts/latest/tutorial/toh-pt6.jade index 3a1214bb17..4b25b30b86 100644 --- a/public/docs/ts/latest/tutorial/toh-pt6.jade +++ b/public/docs/ts/latest/tutorial/toh-pt6.jade @@ -7,7 +7,7 @@ block includes - var _Angular_http_library = 'Angular HTTP library' - var _HTTP_PROVIDERS = 'HTTP_PROVIDERS' - var _JSON_stringify = 'JSON.stringify' - + :marked # Getting and Saving Data with HTTP @@ -250,8 +250,8 @@ block hero-detail-comp-updates :marked ### Add/Edit in the *HeroDetailComponent* - We already have `HeroDetailComponent` for viewing details about a specific hero. - Add and Edit are natural extensions of the detail view, so we are able to reuse `HeroDetailComponent` with a few tweaks. + We already have `HeroDetailComponent` for viewing details about a specific hero. + Add and Edit are natural extensions of the detail view, so we are able to reuse `HeroDetailComponent` with a few tweaks. The original component was created to render existing data, but to add new data we have to initialize the `hero` property to an empty `Hero` object. @@ -373,6 +373,7 @@ block filetree .children .file app.component.ts .file app.component.css + .file app.routes.ts .file dashboard.component.css .file dashboard.component.html .file dashboard.component.ts