Simplified routing in tutorial example

Author: brandonroberts

public/docs/_examples/toh-5/ts/app/app-routing.module.1.ts

@@ -0,0 +1,48 @@
+// #docplaster
+// #docregion
+import { NgModule }       from '@angular/core';
+import { BrowserModule }  from '@angular/platform-browser';
+import { FormsModule }    from '@angular/forms';
+import { RouterModule }   from '@angular/router';
+
+import { AppComponent }        from './app.component';
+import { HeroDetailComponent } from './hero-detail.component';
+import { HeroesComponent }     from './heroes.component';
+import { HeroService }         from './hero.service';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule,
+    RouterModule.forRoot([
+      {
+        path: 'heroes',
+        component: HeroesComponent
+      }
+    ])
+  ],
+  declarations: [
+    AppComponent,
+    HeroDetailComponent,
+    HeroesComponent
+  ],
+  providers: [
+    HeroService
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule {
+}
+// #enddocregion
+/*
+// #docregion heroes, routing
+import { RouterModule }   from '@angular/router';
+
+RouterModule.forRoot([
+  {
+    path: 'heroes',
+    component: HeroesComponent
+  }
+])
+// #enddocregion heroes, routing
+*/

public/docs/_examples/toh-5/ts/app/app-routing.module.ts

@@ -0,0 +1,59 @@
+// #docregion
+import { NgModule }       from '@angular/core';
+import { BrowserModule }  from '@angular/platform-browser';
+import { FormsModule }    from '@angular/forms';
+import { RouterModule }   from '@angular/router';
+
+import { AppComponent }        from './app.component';
+import { HeroDetailComponent } from './hero-detail.component';
+import { DashboardComponent }  from './dashboard.component';
+import { HeroesComponent }     from './heroes.component';
+import { HeroService }         from './hero.service';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule,
+    RouterModule.forRoot([
+      // #docregion redirect
+      {
+        path: '',
+        redirectTo: '/dashboard',
+        pathMatch: 'full'
+      },
+      // #enddocregion redirect
+      // #docregion dashboard
+      {
+        path: 'dashboard',
+        component: DashboardComponent
+      },
+      // #enddocregion dashboard
+      // #docregion hero-detail
+      {
+        path: 'detail/:id',
+        component: HeroDetailComponent
+      },
+      // #enddocregion hero-detail
+      // #docregion heroes
+      // #docregion heroes, routing
+      {
+        path: 'heroes',
+        component: HeroesComponent
+      }
+      // #enddocregion heroes, routing
+    ])
+  ],
+  declarations: [
+    AppComponent,
+    DashboardComponent,
+    HeroDetailComponent,
+    HeroesComponent
+  ],
+  providers: [
+    HeroService
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule {
+}
+// #enddocregion

public/docs/_examples/toh-5/ts/app/app.module.2.ts

@@ -3,21 +3,37 @@
 import { NgModule }       from '@angular/core';
 import { BrowserModule }  from '@angular/platform-browser';
 import { FormsModule }    from '@angular/forms';
+import { RouterModule }   from '@angular/router';
 
 import { AppComponent }         from './app.component';
 import { DashboardComponent }   from './dashboard.component';
 import { HeroDetailComponent }  from './hero-detail.component';
 import { HeroesComponent }      from './heroes.component';
 import { HeroService }          from './hero.service';
-// #docregion routing
-import { AppRoutingModule }     from './app-routing.module';
-// #docregion routing
 
 @NgModule({
   imports: [
     BrowserModule,
     FormsModule,
-    AppRoutingModule
+    RouterModule.forRoot([
+      {
+        path: '',
+        redirectTo: '/dashboard',
+        pathMatch: 'full'
+      },
+      {
+        path: 'dashboard',
+        component: DashboardComponent
+      },
+      {
+        path: 'detail/:id',
+        component: HeroDetailComponent
+      },
+      {
+        path: 'heroes',
+        component: HeroesComponent
+      }
+    ])
   ],
   // #enddocregion routing
   // #docregion dashboard, hero-detail

public/docs/_examples/toh-5/ts/app/app.module.3.ts

@@ -9,6 +9,7 @@ import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule }   from '@angular/forms';
 import { HttpModule }    from '@angular/http';
+import { RouterModule }  from '@angular/router';
 
 // #enddocregion v1
 // Imports for loading & configuring the in-memory web api
@@ -24,7 +25,6 @@ import { HeroService }          from './hero.service';
 // #enddocregion v1, v2
 import { HeroSearchComponent }  from './hero-search.component';
 // #docregion v1, v2
-import { AppRoutingModule }     from './app-routing.module';
 
 @NgModule({
   imports: [
@@ -36,7 +36,25 @@ import { AppRoutingModule }     from './app-routing.module';
     InMemoryWebApiModule.forRoot(InMemoryDataService),
     // #enddocregion in-mem-web-api
     // #docregion v1
-    AppRoutingModule
+    RouterModule.forRoot([
+      {
+        path: '',
+        redirectTo: '/dashboard',
+        pathMatch: 'full'
+      },
+      {
+        path: 'dashboard',
+        component: DashboardComponent
+      },
+      {
+        path: 'detail/:id',
+        component: HeroDetailComponent
+      },
+      {
+        path: 'heroes',
+        component: HeroesComponent
+      }
+    ])
   ],
   // #docregion search
   declarations: [

public/docs/_examples/toh-5/ts/app/app.module.ts

@@ -27,7 +27,7 @@
   },
   "toh-pt5": {
     "title": "Routing",
-    "intro": "We add the Angular Component Router and learn to navigate among the views",
+    "intro": "We add the Angular Router and learn to navigate among the views",
     "nextable": true
   },
   "toh-pt6": {