docs(router): Updated routing examples to use routing modules (#2478)

Simplified routing in tutorial example

Updated ngmodule guide and ngmodule faq with routing module prose

Author: brandonroberts

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.routing.ts renamed to public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app-routing.module.ts

@@ -1,5 +1,5 @@
 // #docregion
-import { ModuleWithProviders } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { Routes, RouterModule }  from '@angular/router';
 
 import { MovieListComponent } from './movie-list.component';
@@ -9,4 +9,8 @@ const routes: Routes = [
   { path: 'movies', component: MovieListComponent }
 ];
 
-export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.module.ts

@@ -5,13 +5,13 @@ import { FormsModule }   from '@angular/forms';
 
 import { AppComponent }  from './app.component';
 import { MovieListComponent } from './movie-list.component';
-import { routing } from './app.routing';
+import { AppRoutingModule } from './app-routing.module';
 
 @NgModule({
   imports: [
     BrowserModule,
     FormsModule,
-    routing
+    AppRoutingModule
   ],
   declarations: [
     AppComponent,

public/docs/_examples/cb-dependency-injection/ts/app/app-routing.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule }  from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  providers: [],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}

public/docs/_examples/cb-dependency-injection/ts/app/app.module.ts

@@ -3,7 +3,7 @@ import { BrowserModule }                from '@angular/platform-browser';
 import { FormsModule }                  from '@angular/forms';
 import { HttpModule }                   from '@angular/http';
 
-/* import { routing }                   from './app.routing';*/
+// import { AppRoutingModule }             from './app-routing.module';
 import { LocationStrategy,
          HashLocationStrategy }         from '@angular/common';
 import { NgModule }                     from '@angular/core';
@@ -56,7 +56,7 @@ const c_components = [
     FormsModule,
     HttpModule,
     InMemoryWebApiModule.forRoot(HeroData)
-    // routing TODO: add routes
+    // AppRoutingModule TODO: add routes
   ],
   declarations: [
     declarations,

public/docs/_examples/cb-dependency-injection/ts/app/app.routing.ts

@@ -1,4 +1,4 @@
-import { ModuleWithProviders }  from '@angular/core';
+import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
 export const routes: Routes = [
@@ -7,4 +7,8 @@ export const routes: Routes = [
   { path: 'heroes', loadChildren: 'app/hero/hero.module.3#HeroModule' }
 ];
 
-export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}

public/docs/_examples/ngmodule/ts/app/app.routing.3.ts renamed to public/docs/_examples/ngmodule/ts/app/app-routing.module.3.ts

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

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

@@ -11,14 +11,16 @@ import { UserService }        from './user.service';
 
 /* Feature Modules */
 import { ContactModule }      from './contact/contact.module.3';
-import { routing }            from './app.routing.3';
+
+/* Routing Module */
+import { AppRoutingModule }   from './app-routing.module.3';
 
 @NgModule({
 // #docregion imports
   imports:      [
     BrowserModule,
     ContactModule,
-    routing
+    AppRoutingModule
   ],
 // #enddocregion imports
   providers:    [ UserService ],

public/docs/_examples/ngmodule/ts/app/app.module.3.ts

@@ -8,9 +8,11 @@ import { BrowserModule }  from '@angular/platform-browser';
 import { AppComponent }   from './app.component';
 
 /* Feature Modules */
-import { ContactModule }  from './contact/contact.module';
-import { CoreModule }     from './core/core.module';
-import { routing }        from './app.routing';
+import { ContactModule }    from './contact/contact.module';
+import { CoreModule }       from './core/core.module';
+
+/* Routing Module */
+import { AppRoutingModule } from './app-routing.module';
 
 @NgModule({
   // #docregion import-for-root
@@ -29,7 +31,7 @@ import { routing }        from './app.routing';
 // #docregion
     CoreModule.forRoot({userName: 'Miss Marple'}),
 // #docregion v4
-    routing
+    AppRoutingModule
   ],
   // #enddocregion import-for-root
   declarations: [ AppComponent ],

public/docs/_examples/ngmodule/ts/app/app.module.ts

@@ -0,0 +1,12 @@
+import { NgModule }            from '@angular/core';
+import { RouterModule }        from '@angular/router';
+
+import { ContactComponent }    from './contact.component.3';
+
+@NgModule({
+  imports: [RouterModule.forChild([
+    { path: 'contact', component: ContactComponent}
+  ])],
+  exports: [RouterModule]
+})
+export class ContactRoutingModule {}