docs(router): Added section for named outlets and secondary routes

Author: brandonroberts

public/docs/_examples/router/e2e-spec.ts

@@ -31,16 +31,21 @@ describe('Router', function () {
       loginHref: hrefEles.get(3),
       loginButton: element.all(by.css('my-app > ng-component > p > button')),
 
+      contactHref: hrefEles.get(4),
+      contactCancelButton: element.all(by.buttonText('Cancel')),
+
+      outletComponents: element.all(by.css('my-app > ng-component'))
     };
   }
 
   it('should be able to see the start screen', function () {
     let page = getPageStruct();
-    expect(page.hrefs.count()).toEqual(4, 'should be 4 dashboard choices');
+    expect(page.hrefs.count()).toEqual(5, 'should be 5 dashboard choices');
     expect(page.crisisHref.getText()).toEqual('Crisis Center');
     expect(page.heroesHref.getText()).toEqual('Heroes');
     expect(page.adminHref.getText()).toEqual('Admin');
     expect(page.loginHref.getText()).toEqual('Login');
+    expect(page.contactHref.getText()).toEqual('Contact');
   });
 
   it('should be able to see crises center items', function () {
@@ -118,6 +123,15 @@ describe('Router', function () {
     });
   });
 
+  it('should be able to see the secondary route', function () {
+    let page = getPageStruct();
+    page.heroesHref.click().then(function() {
+      return page.contactHref.click();
+    }).then(function() {
+      expect(page.outletComponents.count()).toBe(2, 'should be 2 displayed routes');
+    });
+  });
+
   function crisisCenterEdit(index: number, shouldSave: boolean) {
     let page = getPageStruct();
     let crisisEle: ElementFinder;

public/docs/_examples/router/ts/app/app-routing.module.3.ts

@@ -1,10 +1,17 @@
 // #docplaster
-// #docregion
+// #docregion , v3
 import { NgModule }     from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { ComposeMessageComponent } from './compose-message.component';
 
 const appRoutes: Routes = [
-
+// #enddocregion v3
+  {
+    path: 'compose',
+    component: ComposeMessageComponent,
+    outlet: 'modal'
+  }
+// #docregion v3
 ];
 
 @NgModule({
@@ -16,3 +23,4 @@ const appRoutes: Routes = [
   ]
 })
 export class AppRoutingModule {}
+// #enddocregion

public/docs/_examples/router/ts/app/app-routing.module.4.ts

@@ -3,10 +3,15 @@
 import { NgModule }             from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { CanDeactivateGuard } from './can-deactivate-guard.service';
+import { ComposeMessageComponent }  from './compose-message.component';
+import { CanDeactivateGuard }       from './can-deactivate-guard.service';
 
 const appRoutes: Routes = [
-
+  {
+    path: 'compose',
+    component: ComposeMessageComponent,
+    outlet: 'modal'
+  }
 ];
 
 @NgModule({

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

@@ -5,14 +5,21 @@ import { NgModule }     from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 // #enddocregion import-router
 
-import { CanDeactivateGuard } from './can-deactivate-guard.service';
+import { ComposeMessageComponent }  from './compose-message.component';
+import { CanDeactivateGuard }       from './can-deactivate-guard.service';
+
 // #docregion can-load-guard
 import { AuthGuard }          from './auth-guard.service';
 // #enddocregion can-load-guard
 
 // #docregion lazy-load-admin, can-load-guard
 
 const appRoutes: Routes = [
+  {
+    path: 'compose',
+    component: ComposeMessageComponent,
+    outlet: 'modal'
+  },
   {
     path: 'admin',
     loadChildren: 'app/admin/admin.module#AdminModule',

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

@@ -8,10 +8,16 @@ import {
 // #docregion preload-v1
 } from '@angular/router';
 
-import { CanDeactivateGuard } from './can-deactivate-guard.service';
-import { AuthGuard }          from './auth-guard.service';
+import { ComposeMessageComponent } from './compose-message.component';
+import { CanDeactivateGuard }      from './can-deactivate-guard.service';
+import { AuthGuard }               from './auth-guard.service';
 
 const appRoutes: Routes = [
+  {
+    path: 'compose',
+    component: ComposeMessageComponent,
+    outlet: 'modal'
+  },
   {
     path: 'admin',
     loadChildren: 'app/admin/admin.module#AdminModule',

public/docs/_examples/router/ts/app/app-routing.module.ts

@@ -3,11 +3,17 @@
 import { NgModule }             from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { CanDeactivateGuard } from './can-deactivate-guard.service';
-import { AuthGuard }          from './auth-guard.service';
-import { PreloadSelectedModules } from './selective-preload-strategy';
+import { ComposeMessageComponent }  from './compose-message.component';
+import { CanDeactivateGuard }       from './can-deactivate-guard.service';
+import { AuthGuard }                from './auth-guard.service';
+import { PreloadSelectedModules }   from './selective-preload-strategy';
 
 const appRoutes: Routes = [
+  {
+    path: 'compose',
+    component: ComposeMessageComponent,
+    outlet: 'modal'
+  },
   {
     path: 'admin',
     loadChildren: 'app/admin/admin.module#AdminModule',
@@ -25,7 +31,7 @@ const appRoutes: Routes = [
     data: {
       preload: true
     }
-  }
+  },
   // #enddocregion preload-v2
 ];
 

public/docs/_examples/router/ts/app/app.component.4.ts

@@ -12,6 +12,9 @@ import { Component } from '@angular/core';
       <a routerLink="/admin" routerLinkActive="active">Admin</a>
     </nav>
     <router-outlet></router-outlet>
+  // #enddocregion template
+    <router-outlet name="modal"></router-outlet>
+  // #enddocregion template    
   `
   // #enddocregion template
 })

public/docs/_examples/router/ts/app/app.component.ts

@@ -12,8 +12,10 @@ import { Component } from '@angular/core';
       <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
       <a routerLink="/admin" routerLinkActive="active">Admin</a>
       <a routerLink="/login" routerLinkActive="active">Login</a>
+      <a [routerLink]="[{ outlets: { modal: ['compose'] } }]">Contact</a>
     </nav>
     <router-outlet></router-outlet>
+    <router-outlet name="modal"></router-outlet>
   `
   // #enddocregion template
 })

public/docs/_examples/router/ts/app/app.module.4.ts

@@ -12,25 +12,32 @@ import { HeroesModule }           from './heroes/heroes.module';
 // #docregion crisis-center-module
 import { CrisisCenterModule }     from './crisis-center/crisis-center.module';
 // #enddocregion crisis-center-module
+
+import { ComposeMessageComponent } from './compose-message.component';
 // #docregion admin-module
 import { AdminModule }            from './admin/admin.module';
 // #docregion crisis-center-module
 
 import { DialogService }          from './dialog.service';
 
+
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     HeroesModule,
     CrisisCenterModule,
 // #enddocregion crisis-center-module
+// #enddocregion admin-module
     AdminModule,
 // #docregion crisis-center-module
     AppRoutingModule
   ],
   declarations: [
-    AppComponent
+    AppComponent,
+// #enddocregion admin-module, crisis-center-module
+    ComposeMessageComponent
+// #docregion admin-module, crisis-center-module
   ],
   providers: [
     DialogService

public/docs/_examples/router/ts/app/app.module.5.ts

@@ -1,28 +1,31 @@
+// #docplaster
 // #docregion
 import { NgModule }       from '@angular/core';
-import { BrowserModule }  from '@angular/platform-browser';
+import { CommonModule }   from '@angular/common';
 import { FormsModule }    from '@angular/forms';
 
-import { AppComponent }        from './app.component';
-import { AppRoutingModule }    from './app-routing.module';
+import { AppComponent }         from './app.component';
+import { AppRoutingModule }     from './app-routing.module';
 
-import { HeroesModule }        from './heroes/heroes.module';
-import { CrisisCenterModule }  from './crisis-center/crisis-center.module';
-import { AdminModule }         from './admin/admin.module';
+import { HeroesModule }             from './heroes/heroes.module';
+import { CrisisCenterModule }       from './crisis-center/crisis-center.module';
+import { ComposeMessageComponent }  from './compose-message.component';
 
-import { DialogService }       from './dialog.service';
+import { AdminModule }            from './admin/admin.module';
+import { DialogService }          from './dialog.service';
 
 @NgModule({
   imports: [
-    BrowserModule,
+    CommonModule,
     FormsModule,
     HeroesModule,
     CrisisCenterModule,
     AdminModule,
     AppRoutingModule
   ],
   declarations: [
-    AppComponent
+    AppComponent,
+    ComposeMessageComponent
   ],
   providers: [
     DialogService
@@ -31,3 +34,4 @@ import { DialogService }       from './dialog.service';
 })
 export class AppModule {
 }
+// #enddocregion