docs(toh-6/ts): Upgraded http tutorial to use new router

Author: brandonroberts

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

public/docs/_examples/toh-6/ts/app/app.component.ts

@@ -1,36 +1,27 @@
 // #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',
 
   template: `
     <h1>{{title}}</h1>
     <nav>
-      <a [routerLink]="['Dashboard']">Dashboard</a>
-      <a [routerLink]="['Heroes']">Heroes</a>
+      <a [routerLink]="['/dashboard']" routerLinkActive="active">Dashboard</a>
+      <a [routerLink]="['/heroes']" routerLinkActive="active">Heroes</a>
     </nav>
     <router-outlet></router-outlet>
   `,
   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';
 }

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)
+];

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);
   }
 }

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

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]);
   }
 }

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

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