docs(toh): Updated routing tutorial to use routing module

Author: brandonroberts

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

@@ -1,5 +1,5 @@
 // #docregion , heroes, routing
-import { ModuleWithProviders }  from '@angular/core';
+import { NgModule }  from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
 import { HeroesComponent } from './heroes.component';
@@ -13,5 +13,13 @@ const appRoutes: Routes = [
 // #enddocregion heroes, routing
 
 // #docregion routing-export
-export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
+@NgModule({
+  imports: [
+    RouterModule.forRoot(appRoutes)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class AppRoutingModule {}
 // #enddocregion routing-export

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

@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion , heroes
-import { ModuleWithProviders }  from '@angular/core';
+import { NgModule }  from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
 // #enddocregion heroes
@@ -40,4 +40,12 @@ const appRoutes: Routes = [
 ];
 // #enddocregion heroes
 
-export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
+@NgModule({
+  imports: [
+    RouterModule.forRoot(appRoutes)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class AppRoutingModule {}

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

@@ -10,14 +10,14 @@ import { HeroDetailComponent }  from './hero-detail.component';
 import { HeroesComponent }      from './heroes.component';
 import { HeroService }          from './hero.service';
 // #docregion routing
-import { routing } from './app.routing';
+import { AppRoutingModule }     from './app-routing.module';
 // #docregion routing
 
 @NgModule({
   imports: [
     BrowserModule,
     FormsModule,
-    routing
+    AppRoutingModule
   ],
   // #enddocregion routing
   // #docregion dashboard, hero-detail

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

@@ -0,0 +1,37 @@
+// #docregion
+import { NgModule }             from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { DashboardComponent }  from './dashboard.component';
+import { HeroesComponent }     from './heroes.component';
+import { HeroDetailComponent } from './hero-detail.component';
+
+const appRoutes: Routes = [
+  {
+    path: '',
+    redirectTo: '/dashboard',
+    pathMatch: 'full'
+  },
+  {
+    path: 'dashboard',
+    component: DashboardComponent
+  },
+  {
+    path: 'detail/:id',
+    component: HeroDetailComponent
+  },
+  {
+    path: 'heroes',
+    component: HeroesComponent
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(appRoutes)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class AppRoutingModule {}

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

@@ -24,7 +24,7 @@ import { HeroService }          from './hero.service';
 // #enddocregion v1, v2
 import { HeroSearchComponent }  from './hero-search.component';
 // #docregion v1, v2
-import { routing }              from './app.routing';
+import { AppRoutingModule }     from './app-routing.module';
 
 @NgModule({
   imports: [
@@ -36,7 +36,7 @@ import { routing }              from './app.routing';
     InMemoryWebApiModule.forRoot(InMemoryDataService),
     // #enddocregion in-mem-web-api
     // #docregion v1
-    routing
+    AppRoutingModule
   ],
   // #docregion search
   declarations: [

public/docs/ts/latest/tutorial/toh-pt5.jade

@@ -2,7 +2,7 @@
 
 block includes
   include ../_util-fns
-  - var _appRoutingTsVsAppComp = 'app.routing.ts'
+  - var _appRoutingTsVsAppComp = 'app-routing.module.ts'
   - var _declsVsDirectives = 'declarations'
   - var _RoutesVsAtRouteConfig = 'Routes'
   - var _RouterModuleVsRouterDirectives = 'RouterModule'
@@ -202,7 +202,7 @@ block router-config-intro
 
   Let's define our first route as a route to the heroes component:
 
-- var _file = _docsFor == 'dart' ? 'app.component.ts' : 'app.routing.ts'
+- var _file = _docsFor == 'dart' ? 'app.component.ts' : 'app-routing.module.ts'
 +makeExcerpt('app/' + _file + ' (heroes route)', 'heroes')
 
 - var _are = _docsFor == 'dart' ? 'takes' : 'are'
@@ -224,22 +224,24 @@ block router-config-intro
 
 +ifDocsFor('ts|js')
   :marked
-    We'll export a `routing` constant initialized using the `RouterModule.forRoot` method applied to our !{_array} of routes.
-    This method returns a **configured router module** that we'll add to our root NgModule, `AppModule`.
+    We'll create and export an `NgModule` named `AppRoutingModule` that contains our root routing configuration.
+    The `AppRoutingModule` class imports the `RouterModule.forRoot` method applied to our !{_array} of routes.
+    We'll also add the `RouterModule` to the NgModule `exports`, so modules that add the `AppRoutingModule` to their
+    `imports` will have access to the router directives.
 
-  +makeExcerpt('app/app.routing.1.ts (excerpt)', 'routing-export')
+  +makeExcerpt('app/app-routing.module.1.ts (app routing)', 'routing-export')
 
   .l-sub-section
     :marked
-      We call the `forRoot` method because we're providing a configured router at the _root_ of the application.
+      We use the `forRoot` method because we're providing a configured router at the _root_ of the application.
       The `forRoot` method gives us the Router service providers and directives needed for routing.
 
   :marked
     ### Make the router available
 
-    We've setup initial routes in the `app.routing.ts` file. Now we'll add it to our root NgModule.
+    We've setup initial routes in the `app-routing.module.ts` file. Now we'll add it to our `AppModule`.
 
-    Import the `routing` constant from `app.routing.ts` and add it the `imports` !{_array} of `AppModule`.
+    Import the `AppRoutingModule` class from `app-routing.module.ts` and add it the `imports` !{_array} of `AppModule`.
 
   +makeExcerpt('app/app.module.ts', 'routing')
 
@@ -319,12 +321,12 @@ block routerLink
   Import the dashboard component and
   add the following route definition to the `!{_RoutesVsAtRouteConfig}` !{_array} of definitions.
 
-- var _file = _docsFor == 'dart' ? 'lib/app_component.dart' : 'app/app.routing.ts'
+- var _file = _docsFor == 'dart' ? 'lib/app_component.dart' : 'app/app-routing.module.ts'
 +makeExcerpt(_file + ' (Dashboard route)', 'dashboard')
 
 +ifDocsFor('ts|js')
   :marked
-    Also import and add `DashboardComponent` to our root NgModule's `declarations`.
+    Also import and add `DashboardComponent` to our `AppModule`'s `declarations`.
 
   +makeExcerpt('app/app.module.ts', 'dashboard')
 
@@ -340,7 +342,7 @@ block redirect-vs-use-as-default
     We can use a redirect route to make this happen. Add the following
     to our array of route definitions:
 
-  +makeExcerpt('app/app.routing.ts','redirect')
+  +makeExcerpt('app/app-routing.module.ts','redirect')
 
   .l-sub-section
     :marked
@@ -466,7 +468,7 @@ code-example(format='').
 
   Here's the *route definition* we'll use.
 
-- var _file = _docsFor == 'dart' ? 'app/app.component.ts' : 'app/app.routing.ts'
+- var _file = _docsFor == 'dart' ? 'app/app.component.ts' : 'app/app-routing.module.ts'
 +makeExcerpt(_file + ' (hero detail)','hero-detail')
 
 :marked
@@ -633,7 +635,7 @@ block extract-id
   token in the parameterized hero detail route definition we added to
   `!{_appRoutingTsVsAppComp}` earlier in the chapter:
 
-- var _file = _docsFor == 'dart' ? 'app/app.component.ts' : 'app/app.routing.ts'
+- var _file = _docsFor == 'dart' ? 'app/app.component.ts' : 'app/app-routing.module.ts'
 +makeExcerpt(_file + ' (hero detail)', 'hero-detail')
 
 :marked
@@ -660,7 +662,7 @@ block extract-id
 
 :marked
   Delete the `<h1>` at the top (forgot about it during the `AppComponent`-to-`HeroesComponent` conversion).
-  
+
   Delete the last line of the template with the `<my-hero-detail>` tags.
 
   We'll no longer show the full `HeroDetailComponent` here.
@@ -863,7 +865,7 @@ block file-tree-end
         .file app.component.css
         .file app.component.ts
         .file app.module.ts
-        .file app.routing.ts
+        .file app-routing.module.ts
         .file dashboard.component.css
         .file dashboard.component.html
         .file dashboard.component.ts