docs(router): heavy copy edits (#3021)

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

@@ -28,13 +28,13 @@ describe('Router', function () {
 
       adminHref: hrefEles.get(2),
       adminPreloadList: element.all(by.css('my-app > ng-component > ng-component > ul > li')),
-      
+
       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'))
     };
   }

public/docs/_examples/router/ts/app/admin/admin-dashboard.component.ts

@@ -2,7 +2,8 @@
 import { Component, OnInit }    from '@angular/core';
 import { ActivatedRoute }       from '@angular/router';
 import { Observable }           from 'rxjs/Observable';
-import { PreloadSelectedModules } from '../selective-preload-strategy';
+
+import { SelectivePreloadingStrategy } from '../selective-preloading-strategy';
 
 import 'rxjs/add/operator/map';
 
@@ -27,7 +28,7 @@ export class AdminDashboardComponent implements OnInit {
 
   constructor(
     private route: ActivatedRoute,
-    private preloadStrategy: PreloadSelectedModules
+    private preloadStrategy: SelectivePreloadingStrategy
   ) {
     this.modules = preloadStrategy.preloadedModules;
   }

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

@@ -8,7 +8,6 @@ import { AdminDashboardComponent }  from './admin-dashboard.component';
 import { ManageCrisesComponent }    from './manage-crises.component';
 import { ManageHeroesComponent }    from './manage-heroes.component';
 
-// #docregion admin-route
 import { AuthGuard }                from '../auth-guard.service';
 
 const adminRoutes: Routes = [

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

@@ -1,4 +1,3 @@
-// #docplaster
 // #docregion
 import { NgModule }       from '@angular/core';
 import { CommonModule }   from '@angular/common';
@@ -22,7 +21,4 @@ import { AdminRoutingModule }       from './admin-routing.module';
     ManageHeroesComponent
   ]
 })
-// #docregion admin-module-export
 export class AdminModule {}
-// #enddocregion admin-module-export
-// #enddocregion

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

@@ -0,0 +1,26 @@
+// #docregion
+import { animate, AnimationEntryMetadata, state, style, transition, trigger } from '@angular/core';
+
+// Component transition animations
+export const slideInDownAnimation: AnimationEntryMetadata =
+  trigger('routeAnimation', [
+    state('*',
+      style({
+        opacity: 1,
+        transform: 'translateX(0)'
+      })
+    ),
+    transition(':enter', [
+      style({
+        opacity: 0,
+        transform: 'translateX(-100%)'
+      }),
+      animate('0.2s ease-in')
+    ]),
+    transition(':leave', [
+      animate('0.5s ease-out', style({
+        opacity: 0,
+        transform: 'translateY(100%)'
+      }))
+    ])
+  ]);

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

@@ -1,17 +1,19 @@
-// #docplaster
 // #docregion
-import { NgModule }             from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { NgModule }              from '@angular/core';
+import { RouterModule, Routes }  from '@angular/router';
 
-import { CrisisListComponent }  from './crisis-list.component';
-import { HeroListComponent }    from './hero-list.component';
-import { PageNotFoundComponent }from './not-found.component';
+import { CrisisListComponent }   from './crisis-list.component';
+import { HeroListComponent }     from './hero-list.component';
+import { PageNotFoundComponent } from './not-found.component';
 
+// #docregion appRoutes
 const appRoutes: Routes = [
   { path: 'crisis-center', component: CrisisListComponent },
-  { path: 'heroes', component: HeroListComponent },
+  { path: 'heroes',        component: HeroListComponent },
+  { path: '',   redirectTo: '/heroes', pathMatch: 'full' },
   { path: '**', component: PageNotFoundComponent }
 ];
+// #enddocregion appRoutes
 
 @NgModule({
   imports: [

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

@@ -1,13 +1,15 @@
 // #docplaster
 // #docregion
-import { NgModule }             from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+// #docregion v2
+import { NgModule }              from '@angular/core';
+import { RouterModule, Routes }  from '@angular/router';
 
-import { CrisisListComponent }  from './crisis-list.component';
-import { PageNotFoundComponent }from './not-found.component';
+import { CrisisListComponent }   from './crisis-list.component';
+import { PageNotFoundComponent } from './not-found.component';
 
 const appRoutes: Routes = [
   { path: 'crisis-center', component: CrisisListComponent },
+  { path: '',   redirectTo: '/heroes', pathMatch: 'full' },
   { path: '**', component: PageNotFoundComponent }
 ];
 

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

@@ -1,17 +1,23 @@
 // #docplaster
 // #docregion , v3
-import { NgModule }     from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { NgModule }                from '@angular/core';
+import { RouterModule, Routes }    from '@angular/router';
+
 import { ComposeMessageComponent } from './compose-message.component';
+import { PageNotFoundComponent }   from './not-found.component';
 
 const appRoutes: Routes = [
 // #enddocregion v3
+// #docregion compose
   {
     path: 'compose',
     component: ComposeMessageComponent,
-    outlet: 'modal'
-  }
+    outlet: 'popup'
+  },
+// #enddocregion compose
 // #docregion v3
+  { path: '',   redirectTo: '/heroes', pathMatch: 'full' },
+  { path: '**', component: PageNotFoundComponent }
 ];
 
 @NgModule({

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

@@ -1,17 +1,19 @@
 // #docregion
-import { NgModule }             from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { PageNotFoundComponent }from './not-found.component';
+import { NgModule }              from '@angular/core';
+import { RouterModule, Routes }  from '@angular/router';
 
-import { ComposeMessageComponent }  from './compose-message.component';
-import { CanDeactivateGuard }       from './can-deactivate-guard.service';
+import { ComposeMessageComponent } from './compose-message.component';
+import { CanDeactivateGuard }      from './can-deactivate-guard.service';
+import { PageNotFoundComponent }   from './not-found.component';
 
 const appRoutes: Routes = [
   {
     path: 'compose',
     component: ComposeMessageComponent,
-    outlet: 'modal'
-  }
+    outlet: 'popup'
+  },
+  { path: '',   redirectTo: '/heroes', pathMatch: 'full' },
+  { path: '**', component: PageNotFoundComponent }
 ];
 
 @NgModule({

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

@@ -6,26 +6,28 @@ import { RouterModule, Routes } from '@angular/router';
 // #enddocregion import-router
 
 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
+import { PageNotFoundComponent }   from './not-found.component';
+
+import { CanDeactivateGuard }      from './can-deactivate-guard.service';
+import { AuthGuard }               from './auth-guard.service';
 
-// #docregion lazy-load-admin, can-load-guard
 
 const appRoutes: Routes = [
   {
     path: 'compose',
     component: ComposeMessageComponent,
-    outlet: 'modal'
+    outlet: 'popup'
   },
+// #docregion admin, admin-1
   {
     path: 'admin',
     loadChildren: 'app/admin/admin.module#AdminModule',
-// #enddocregion lazy-load-admin
+// #enddocregion admin-1
     canLoad: [AuthGuard]
-// #docregion lazy-load-admin
+// #docregion admin-1
   },
+// #enddocregion admin, admin-1
+  { path: '',   redirectTo: '/heroes', pathMatch: 'full' },
   { path: '**', component: PageNotFoundComponent }
 ];
 

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

@@ -9,6 +9,8 @@ import {
 } from '@angular/router';
 
 import { ComposeMessageComponent } from './compose-message.component';
+import { PageNotFoundComponent }   from './not-found.component';
+
 import { CanDeactivateGuard }      from './can-deactivate-guard.service';
 import { AuthGuard }               from './auth-guard.service';
 
@@ -16,33 +18,31 @@ const appRoutes: Routes = [
   {
     path: 'compose',
     component: ComposeMessageComponent,
-    outlet: 'modal'
+    outlet: 'popup'
   },
   {
     path: 'admin',
     loadChildren: 'app/admin/admin.module#AdminModule',
     canLoad: [AuthGuard]
   },
-  {
-    path: '',
-    redirectTo: '/heroes',
-    pathMatch: 'full'
-  },
   {
     path: 'crisis-center',
     loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule'
   },
+  { path: '',   redirectTo: '/heroes', pathMatch: 'full' },
   { path: '**', component: PageNotFoundComponent }
 ];
 
 @NgModule({
   imports: [
+    // #docregion forRoot
     RouterModule.forRoot(
       appRoutes
       // #enddocregion preload-v1
       , { preloadingStrategy: PreloadAllModules }
       // #docregion preload-v1
     )
+    // #enddocregion forRoot
   ],
   exports: [
     RouterModule

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

@@ -4,42 +4,39 @@ import { NgModule }             from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 import { ComposeMessageComponent }  from './compose-message.component';
+import { PageNotFoundComponent }    from './not-found.component';
+
 import { CanDeactivateGuard }       from './can-deactivate-guard.service';
 import { AuthGuard }                from './auth-guard.service';
-import { PreloadSelectedModules }   from './selective-preload-strategy';
+import { SelectivePreloadingStrategy }   from './selective-preloading-strategy';
 
 const appRoutes: Routes = [
   {
     path: 'compose',
     component: ComposeMessageComponent,
-    outlet: 'modal'
+    outlet: 'popup'
   },
   {
     path: 'admin',
     loadChildren: 'app/admin/admin.module#AdminModule',
     canLoad: [AuthGuard]
   },
-  {
-    path: '',
-    redirectTo: '/heroes',
-    pathMatch: 'full'
-  },
   // #docregion preload-v2
   {
     path: 'crisis-center',
     loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule',
-    data: {
-      preload: true
-    }
-  }
+    data: { preload: true }
+  },
   // #enddocregion preload-v2
+  { path: '',   redirectTo: '/heroes', pathMatch: 'full' },
+  { path: '**', component: PageNotFoundComponent }
 ];
 
 @NgModule({
   imports: [
     RouterModule.forRoot(
       appRoutes,
-      { preloadingStrategy: PreloadSelectedModules }
+      { preloadingStrategy: SelectivePreloadingStrategy }
     )
   ],
   exports: [
@@ -47,7 +44,7 @@ const appRoutes: Routes = [
   ],
   providers: [
     CanDeactivateGuard,
-    PreloadSelectedModules
+    SelectivePreloadingStrategy
   ]
 })
 export class AppRoutingModule {}

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

@@ -15,5 +15,4 @@ import { Component } from '@angular/core';
     <router-outlet></router-outlet>
   `
 })
-export class AppComponent {
-}
+export class AppComponent { }

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

@@ -46,5 +46,4 @@ import { Router }    from '@angular/router';
   `
 // #enddocregion template
 })
-export class AppComponent {
-}
+export class AppComponent { }

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

@@ -9,14 +9,15 @@ import { Component } from '@angular/core';
     <nav>
       <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
       <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
-      <a routerLink="/admin" routerLinkActive="active">Admin</a>
+   // #docregion contact-link
+     <a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>
+   // #enddocregion contact-link
     </nav>
+    // #docregion outlets
     <router-outlet></router-outlet>
-  // #enddocregion template
-    <router-outlet name="modal"></router-outlet>
-  // #enddocregion template    
-  `
+    <router-outlet name="popup"></router-outlet>
+    // #enddocregion outlets
+    `
   // #enddocregion template
 })
-export class AppComponent {
-}
+export class AppComponent { }

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

@@ -0,0 +1,20 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  // #docregion template
+  template: `
+    <h1 class="title">Angular Router</h1>
+    <nav>
+      <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
+      <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
+      <a routerLink="/admin" routerLinkActive="active">Admin</a>
+     <a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>
+    </nav>
+    <router-outlet></router-outlet>
+    <router-outlet name="popup"></router-outlet>
+    `
+  // #enddocregion template
+})
+export class AppComponent { }

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

@@ -12,10 +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>
+      <a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>
     </nav>
     <router-outlet></router-outlet>
-    <router-outlet name="modal"></router-outlet>
+    <router-outlet name="popup"></router-outlet>
   `
   // #enddocregion template
 })

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

@@ -1,53 +1,41 @@
+// NEVER USED. For docs only. Should compile though
 // #docplaster
-// #docregion
-// #docregion router-basics
 import { NgModule }             from '@angular/core';
-import { BrowserModule }        from '@angular/platform-browser';
-import { FormsModule }          from '@angular/forms';
 import { RouterModule, Routes } from '@angular/router';
 
-import { AppComponent }           from './app.component';
 import { HeroListComponent }      from './hero-list.component';
 import { CrisisListComponent }    from './crisis-list.component';
 import { PageNotFoundComponent }  from './not-found.component';
 import { PageNotFoundComponent as HeroDetailComponent } from './not-found.component';
-import { PageNotFoundComponent as HomeComponent } from './not-found.component';
 
-// #docregion route-config
+// #docregion
 const appRoutes: Routes = [
-  // #docregion route-defs
-  // #docregion hero-detail-route
-  { path: 'hero/:id', component: HeroDetailComponent },
-  // #enddocregion hero-detail-route
   { path: 'crisis-center', component: CrisisListComponent },
+  { path: 'hero/:id',      component: HeroDetailComponent },
   {
     path: 'heroes',
     component: HeroListComponent,
-    data: {
-      title: 'Heroes List'
-    }
+    data: { title: 'Heroes List' }
+  },
+  { path: '',
+    redirectTo: '/heroes',
+    pathMatch: 'full'
   },
-  { path: '', component: HomeComponent },
-  // #enddocregion route-defs
   { path: '**', component: PageNotFoundComponent }
 ];
 
 @NgModule({
   imports: [
-    BrowserModule,
-    FormsModule,
     RouterModule.forRoot(appRoutes)
+    // other imports here
   ],
-  declarations: [
-    AppComponent,
-    HeroListComponent,
-    HeroDetailComponent,
-    CrisisListComponent,
-    PageNotFoundComponent
-  ],
-  bootstrap: [ AppComponent ]
-})
-// #enddocregion router-basics
-export class AppModule {
-}
 // #enddocregion
+/*
+// #docregion
+  ...
+})
+export class AppModule { }
+// #enddocregion
+*/
+})
+export class AppModule0 { }

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

@@ -8,20 +8,26 @@ import { FormsModule }          from '@angular/forms';
 import { RouterModule, Routes } from '@angular/router';
 // #enddocregion import-router
 
-import { AppComponent }         from './app.component';
-import { CrisisListComponent }  from './crisis-list.component';
-import { HeroListComponent }    from './hero-list.component';
+import { AppComponent }          from './app.component';
+import { CrisisListComponent }   from './crisis-list.component';
+import { HeroListComponent }     from './hero-list.component';
 // #enddocregion first-config
-import { PageNotFoundComponent }from './not-found.component';
+import { PageNotFoundComponent } from './not-found.component';
 // #docregion first-config
 
+// #docregion appRoutes
 const appRoutes: Routes = [
   { path: 'crisis-center', component: CrisisListComponent },
   { path: 'heroes', component: HeroListComponent },
 // #enddocregion first-config
+
+  { path: '',   redirectTo: '/heroes', pathMatch: 'full' },
+// #docregion wildcard
   { path: '**', component: PageNotFoundComponent }
+// #enddocregion wildcard
 // #docregion first-config
 ];
+// #enddocregion appRoutes
 
 @NgModule({
   imports: [
@@ -39,6 +45,5 @@ const appRoutes: Routes = [
   ],
   bootstrap: [ AppComponent ]
 })
-export class AppModule {
-}
+export class AppModule { }
 // #enddocregion

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

@@ -8,9 +8,9 @@ import { FormsModule }    from '@angular/forms';
 import { AppComponent }     from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 
-import { CrisisListComponent }  from './crisis-list.component';
-import { HeroListComponent }    from './hero-list.component';
-import { PageNotFoundComponent }from './not-found.component';
+import { CrisisListComponent }   from './crisis-list.component';
+import { HeroListComponent }     from './hero-list.component';
+import { PageNotFoundComponent } from './not-found.component';
 
 @NgModule({
   imports: [
@@ -27,6 +27,5 @@ import { PageNotFoundComponent }from './not-found.component';
   bootstrap: [ AppComponent ]
 })
 // #enddocregion hero-import
-export class AppModule {
-}
+export class AppModule { }
 // #enddocregion

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

@@ -1,17 +1,14 @@
-// #docplaster
 // #docregion
-// #docregion hero-import
 import { NgModule }       from '@angular/core';
 import { BrowserModule }  from '@angular/platform-browser';
 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 { HeroesModule }         from './heroes/heroes.module';
-
-import { CrisisListComponent }    from './crisis-list.component';
-import { PageNotFoundComponent }  from './not-found.component';
+import { CrisisListComponent }   from './crisis-list.component';
+import { PageNotFoundComponent } from './not-found.component';
 
 @NgModule({
   imports: [
@@ -27,7 +24,4 @@ import { PageNotFoundComponent }  from './not-found.component';
   ],
   bootstrap: [ AppComponent ]
 })
-// #enddocregion hero-import
-export class AppModule {
-}
-// #enddocregion
+export class AppModule { }

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

@@ -7,6 +7,7 @@ import { FormsModule }    from '@angular/forms';
 
 import { AppComponent }            from './app.component';
 import { PageNotFoundComponent }   from './not-found.component';
+
 import { AppRoutingModule }        from './app-routing.module';
 import { HeroesModule }            from './heroes/heroes.module';
 // #docregion crisis-center-module
@@ -34,14 +35,14 @@ import { DialogService }           from './dialog.service';
   declarations: [
     AppComponent,
 // #enddocregion admin-module, crisis-center-module
-    ComposeMessageComponent
+    ComposeMessageComponent,
 // #docregion admin-module, crisis-center-module
+    PageNotFoundComponent
   ],
   providers: [
     DialogService
   ],
   bootstrap: [ AppComponent ]
 })
-export class AppModule {
-}
+export class AppModule { }
 // #enddocregion

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

@@ -9,7 +9,9 @@ import { AppRoutingModule }        from './app-routing.module';
 
 import { HeroesModule }            from './heroes/heroes.module';
 import { CrisisCenterModule }      from './crisis-center/crisis-center.module';
+
 import { ComposeMessageComponent } from './compose-message.component';
+import { PageNotFoundComponent } from './not-found.component';
 
 import { AdminModule }             from './admin/admin.module';
 import { DialogService }           from './dialog.service';
@@ -25,13 +27,12 @@ import { DialogService }           from './dialog.service';
   ],
   declarations: [
     AppComponent,
-    ComposeMessageComponent
+    ComposeMessageComponent,
+    PageNotFoundComponent
   ],
   providers: [
     DialogService
   ],
   bootstrap: [ AppComponent ]
 })
-export class AppModule {
-}
-// #enddocregion
+export class AppModule { }

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

@@ -4,7 +4,8 @@ import { BrowserModule }        from '@angular/platform-browser';
 import { FormsModule }          from '@angular/forms';
 import { Routes, RouterModule } from '@angular/router';
 
-import { AppComponent }  from './app.component';
+import { AppComponent }          from './app.component';
+import { PageNotFoundComponent } from './not-found.component';
 
 const routes: Routes = [
 
@@ -17,12 +18,12 @@ const routes: Routes = [
     RouterModule.forRoot(routes, { useHash: true })  // .../#/crisis-center/
   ],
   declarations: [
-    AppComponent
+    AppComponent,
+    PageNotFoundComponent
   ],
   providers: [
 
   ],
   bootstrap: [ AppComponent ]
 })
-export class AppModule {
-}
+export class AppModule { }

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

@@ -4,15 +4,14 @@ import { BrowserModule }  from '@angular/platform-browser';
 import { FormsModule }    from '@angular/forms';
 
 import { AppComponent }         from './app.component';
-import { PageNotFoundComponent }from './not-found.component';
 import { AppRoutingModule }     from './app-routing.module';
 
 import { HeroesModule }            from './heroes/heroes.module';
 import { CrisisCenterModule }      from './crisis-center/crisis-center.module';
 import { ComposeMessageComponent } from './compose-message.component';
-
-import { LoginRoutingModule }  from './login-routing.module';
-import { LoginComponent }       from './login.component';
+import { LoginRoutingModule }      from './login-routing.module';
+import { LoginComponent }          from './login.component';
+import { PageNotFoundComponent }   from './not-found.component';
 
 import { DialogService }       from './dialog.service';
 
@@ -28,12 +27,12 @@ import { DialogService }       from './dialog.service';
   declarations: [
     AppComponent,
     ComposeMessageComponent,
-    LoginComponent
+    LoginComponent,
+    PageNotFoundComponent
   ],
   providers: [
     DialogService
   ],
   bootstrap: [ AppComponent ]
 })
-export class AppModule {
-}
+export class AppModule { }

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

@@ -3,16 +3,16 @@ import { NgModule }       from '@angular/core';
 import { BrowserModule }  from '@angular/platform-browser';
 import { FormsModule }    from '@angular/forms';
 
-import { AppComponent }         from './app.component';
-import { PageNotFoundComponent } from './not-found.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 { ComposeMessageComponent }  from './compose-message.component';
-import { LoginRoutingModule }       from './login-routing.module';
-import { LoginComponent }           from './login.component';
+import { HeroesModule }            from './heroes/heroes.module';
+import { ComposeMessageComponent } from './compose-message.component';
+import { LoginRoutingModule }      from './login-routing.module';
+import { LoginComponent }          from './login.component';
+import { PageNotFoundComponent }   from './not-found.component';
 
-import { DialogService }        from './dialog.service';
+import { DialogService }           from './dialog.service';
 
 @NgModule({
   imports: [
@@ -25,13 +25,12 @@ import { DialogService }        from './dialog.service';
   declarations: [
     AppComponent,
     ComposeMessageComponent,
-    LoginComponent
+    LoginComponent,
+    PageNotFoundComponent
   ],
   providers: [
     DialogService
   ],
   bootstrap: [ AppComponent ]
 })
-export class AppModule {
-}
-// #enddocregion
+export class AppModule { }

public/docs/_examples/router/ts/app/auth-guard.service.ts

@@ -1,5 +1,4 @@
 // #docplaster
-// #docregion, admin-can-load
 import { Injectable }       from '@angular/core';
 import {
   CanActivate, Router,
@@ -25,12 +24,13 @@ export class AuthGuard implements CanActivate, CanActivateChild, CanLoad {
     return this.canActivate(route, state);
   }
 
+// #docregion, canLoad
   canLoad(route: Route): boolean {
     let url = `/${route.path}`;
 
     return this.checkLogin(url);
   }
-// #enddocregion admin-can-load
+// #enddocregion canLoad
 
   checkLogin(url: string): boolean {
     if (this.authService.isLoggedIn) { return true; }

public/docs/_examples/router/ts/app/compose-message.component.1.ts

@@ -1,108 +0,0 @@
-// #docplaster
-// #docregion
-// #docregion v1
-import 'rxjs/add/observable/of';
-import 'rxjs/add/operator/delay';
-import 'rxjs/add/operator/do';
-import { Component, HostBinding,
-         trigger, transition,
-         animate, style, state }  from '@angular/core';
-import { Router } from '@angular/router';
-
-import { Observable } from 'rxjs/Observable';
-
-@Component({
-  template: `
-    <h3>Contact Crisis Center</h3>
-    <div *ngIf="details">
-      {{ details }}
-    </div>
-    <div>
-      <div>
-        <label>Message: </label>
-      </div>
-      <div>
-        <textarea [(ngModel)]="message" rows="10" cols="35" [disabled]="sending"></textarea>
-      </div>
-    </div>
-    <p *ngIf="!sending">
-      <button (click)="send()">Send</button>
-// #enddocregion v1
-      <button (click)="cancel()">Cancel</button>
-// #docregion v1
-    </p>
-  `,
-  styles: [
-    `
-      :host {
-        position: relative;
-        bottom: 10%;
-      }
-    `
-  ],
-  animations: [
-    trigger('routeAnimation', [
-      state('*',
-        style({
-          opacity: 1,
-          transform: 'translateX(0)'
-        })
-      ),
-      transition(':enter', [
-        style({
-          opacity: 0,
-          transform: 'translateY(100%)'
-        }),
-        animate('0.2s ease-in')
-      ]),
-      transition(':leave', [
-        animate('0.5s ease-out', style({
-          opacity: 0,
-          transform: 'translateY(100%)'
-        }))
-      ])
-    ])
-  ]
-})
-export class ComposeMessageComponent {
-  @HostBinding('@routeAnimation') get routeAnimation() {
-    return true;
-  }
-
-  @HostBinding('style.display') get display() {
-    return 'block';
-  }
-
-  @HostBinding('style.position') get position() {
-    return 'absolute';
-  }
-
-  details: string;
-  sending: boolean = false;
-
-  constructor(private router: Router) {}
-
-  send() {
-    this.sending = true;
-    this.details = 'Sending Message...';
-
-    Observable.of(true)
-      .delay(1000)
-      .do(() => {
-        this.sending = false;
-// #enddocregion v1
-        this.closeModal();
-// #docregion v1
-      }).subscribe();
-  }
-
-// #enddocregion v1
-  closeModal() {
-    this.router.navigate(['/', { outlets: { modal: null }}]);
-  }
-
-  cancel() {
-    this.closeModal();
-  }
-}
-// #enddocregion

public/docs/_examples/router/ts/app/compose-message.component.html

@@ -0,0 +1,17 @@
+<!-- #docregion -->
+<h3>Contact Crisis Center</h3>
+<div *ngIf="details">
+  {{ details }}
+</div>
+<div>
+  <div>
+    <label>Message: </label>
+  </div>
+  <div>
+    <textarea [(ngModel)]="message" rows="10" cols="35" [disabled]="sending"></textarea>
+  </div>
+</div>
+<p *ngIf="!sending">
+  <button (click)="send()">Send</button>
+  <button (click)="cancel()">Cancel</button>
+</p>

public/docs/_examples/router/ts/app/compose-message.component.ts

@@ -1,77 +1,19 @@
 // #docregion
-import 'rxjs/add/observable/of';
-import 'rxjs/add/operator/delay';
-import 'rxjs/add/operator/do';
-import { Component, HostBinding,
-         trigger, transition,
-         animate, style, state }  from '@angular/core';
-import { Router } from '@angular/router';
+import { Component, HostBinding } from '@angular/core';
+import { Router }                 from '@angular/router';
 
-import { Observable } from 'rxjs/Observable';
+import { slideInDownAnimation }   from './animations';
 
 @Component({
-  template: `
-    <h3>Contact Crisis Center</h3>
-    <div *ngIf="details">
-      {{ details }}
-    </div>
-    <div>
-      <div>
-        <label>Message: </label>
-      </div>
-      <div>
-        <textarea [(ngModel)]="message" rows="10" cols="35" [disabled]="sending"></textarea>
-      </div>
-    </div>
-    <p *ngIf="!sending">
-      <button (click)="send()">Send</button>
-      <button (click)="cancel()">Cancel</button>
-    </p>
-  `,
-  styles: [
-    `
-      :host {
-        position: relative;
-        bottom: 10%;
-      }
-    `
-  ],
-  animations: [
-    trigger('routeAnimation', [
-      state('*',
-        style({
-          opacity: 1,
-          transform: 'translateX(0)'
-        })
-      ),
-      transition(':enter', [
-        style({
-          opacity: 0,
-          transform: 'translateY(100%)'
-        }),
-        animate('0.2s ease-in')
-      ]),
-      transition(':leave', [
-        animate('0.5s ease-out', style({
-          opacity: 0,
-          transform: 'translateY(100%)'
-        }))
-      ])
-    ])
-  ]
+  moduleId: module.id,
+  templateUrl: 'compose-message.component.html',
+  styles: [ ':host { position: relative; bottom: 10%; }' ],
+  animations: [ slideInDownAnimation ]
 })
 export class ComposeMessageComponent {
-  @HostBinding('@routeAnimation') get routeAnimation() {
-    return true;
-  }
-
-  @HostBinding('style.display') get display() {
-    return 'block';
-  }
-
-  @HostBinding('style.position') get position() {
-    return 'absolute';
-  }
+  @HostBinding('@routeAnimation') routeAnimation = true;
+  @HostBinding('style.display')   display = 'block';
+  @HostBinding('style.position')  position = 'absolute';
 
   details: string;
   sending: boolean = false;
@@ -82,24 +24,21 @@ export class ComposeMessageComponent {
     this.sending = true;
     this.details = 'Sending Message...';
 
-    Observable.of(true)
-      .delay(1000)
-      .do(() => {
-        this.sending = false;
-
-        // Close the modal
-        this.closeModal();
-      }).subscribe();
-  }
-
-  closeModal() {
-    // Providing a `null` value to the named outlet
-    // clears the contents of the named outlet
-    this.router.navigate([{ outlets: { modal: null }}]);
+    setTimeout(() => {
+      this.sending = false;
+      this.closePopup();
+    }, 1000);
   }
 
   cancel() {
-    // Close the modal
-    this.closeModal();
+    this.closePopup();
   }
+
+  // #docregion closePopup
+  closePopup() {
+    // Providing a `null` value to the named outlet
+    // clears the contents of the named outlet
+    this.router.navigate([{ outlets: { popup: null }}]);
+  }
+  // #enddocregion closePopup
 }

public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.2.ts

@@ -12,10 +12,10 @@ import { CrisisDetailComponent }     from './crisis-detail.component';
 // #docregion can-deactivate-guard
 import { CanDeactivateGuard }    from '../can-deactivate-guard.service';
 // #enddocregion can-deactivate-guard
-// #docregion crisis-detail-resolve
-import { CrisisDetailResolve }   from './crisis-detail-resolve.service';
+// #docregion crisis-detail-resolver
+import { CrisisDetailResolver }  from './crisis-detail-resolver.service';
 
-// #enddocregion crisis-detail-resolve
+// #enddocregion crisis-detail-resolver
 // #docregion routes
 
 const crisisCenterRoutes: Routes = [
@@ -43,11 +43,11 @@ const crisisCenterRoutes: Routes = [
             // #docregion can-deactivate-guard
             canDeactivate: [CanDeactivateGuard],
             // #enddocregion can-deactivate-guard
-            // #docregion crisis-detail-resolve
+            // #docregion crisis-detail-resolver
             resolve: {
-              crisis: CrisisDetailResolve
+              crisis: CrisisDetailResolver
             }
-            // #enddocregion crisis-detail-resolve
+            // #enddocregion crisis-detail-resolver
   // #docregion routes
           },
           {

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

@@ -8,11 +8,12 @@ import { CrisisListComponent }       from './crisis-list.component';
 import { CrisisCenterComponent }     from './crisis-center.component';
 import { CrisisDetailComponent }     from './crisis-detail.component';
 
-import { CanDeactivateGuard }    from '../can-deactivate-guard.service';
+import { CanDeactivateGuard }     from '../can-deactivate-guard.service';
 
-// #docregion crisis-detail-resolve
-import { CrisisDetailResolve }   from './crisis-detail-resolve.service';
+// #docregion crisis-detail-resolver
+import { CrisisDetailResolver }   from './crisis-detail-resolver.service';
 
+// #enddocregion crisis-detail-resolver
 const crisisCenterRoutes: Routes = [
   // #docregion redirect
   {
@@ -34,7 +35,7 @@ const crisisCenterRoutes: Routes = [
             component: CrisisDetailComponent,
             canDeactivate: [CanDeactivateGuard],
             resolve: {
-              crisis: CrisisDetailResolve
+              crisis: CrisisDetailResolver
             }
           },
           {
@@ -47,6 +48,7 @@ const crisisCenterRoutes: Routes = [
   }
 ];
 
+// #docregion crisis-detail-resolver
 @NgModule({
   imports: [
     RouterModule.forChild(crisisCenterRoutes)
@@ -55,8 +57,9 @@ const crisisCenterRoutes: Routes = [
     RouterModule
   ],
   providers: [
-    CrisisDetailResolve
+    CrisisDetailResolver
   ]
 })
 export class CrisisCenterRoutingModule { }
+// #enddocregion crisis-detail-resolver
 // #enddocregion

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

@@ -8,10 +8,8 @@ import { CrisisListComponent }       from './crisis-list.component';
 import { CrisisCenterComponent }     from './crisis-center.component';
 import { CrisisDetailComponent }     from './crisis-detail.component';
 
-import { CanDeactivateGuard }    from '../can-deactivate-guard.service';
-
-// #docregion crisis-detail-resolve
-import { CrisisDetailResolve }   from './crisis-detail-resolve.service';
+import { CanDeactivateGuard }     from '../can-deactivate-guard.service';
+import { CrisisDetailResolver }   from './crisis-detail-resolver.service';
 
 const crisisCenterRoutes: Routes = [
   {
@@ -27,7 +25,7 @@ const crisisCenterRoutes: Routes = [
             component: CrisisDetailComponent,
             canDeactivate: [CanDeactivateGuard],
             resolve: {
-              crisis: CrisisDetailResolve
+              crisis: CrisisDetailResolver
             }
           },
           {
@@ -48,7 +46,7 @@ const crisisCenterRoutes: Routes = [
     RouterModule
   ],
   providers: [
-    CrisisDetailResolve
+    CrisisDetailResolver
   ]
 })
 export class CrisisCenterRoutingModule { }

public/docs/_examples/router/ts/app/crisis-center/crisis-center.module.ts

@@ -28,7 +28,7 @@ import { CrisisCenterRoutingModule } from './crisis-center-routing.module';
   providers: [
     CrisisService
   ]
-  // #enddocregion crisis-detail-resolve
+  // #enddocregion crisis-detail-resolver
 })
 // #docregion crisis-center-module-export
 export class CrisisCenterModule {}

public/docs/_examples/router/ts/app/crisis-center/crisis-detail-resolver.service.ts

@@ -6,7 +6,7 @@ import { Router, Resolve, RouterStateSnapshot,
 import { Crisis, CrisisService } from './crisis.service';
 
 @Injectable()
-export class CrisisDetailResolve implements Resolve<Crisis> {
+export class CrisisDetailResolver implements Resolve<Crisis> {
   constructor(private cs: CrisisService, private router: Router) {}
 
   resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<Crisis> {

public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts

@@ -1,16 +1,14 @@
 // #docplaster
 // #docregion
 import 'rxjs/add/operator/switchMap';
-import { Component, OnInit,
-         HostBinding, trigger, transition,
-         animate, style, state }          from '@angular/core';
+import { Component, OnInit, HostBinding } from '@angular/core';
 import { ActivatedRoute, Router, Params } from '@angular/router';
 
+import { slideInDownAnimation }   from '../animations';
 import { Crisis, CrisisService }  from './crisis.service';
 import { DialogService }          from '../dialog.service';
 
 @Component({
-  // #docregion template
   template: `
   <div *ngIf="crisis">
     <h3>"{{ editName }}"</h3>
@@ -26,50 +24,17 @@ import { DialogService }          from '../dialog.service';
     </p>
   </div>
   `,
-  // #enddocregion template
   styles: ['input {width: 20em}'],
-  animations: [
-    trigger('routeAnimation', [
-      state('*',
-        style({
-          opacity: 1,
-          transform: 'translateX(0)'
-        })
-      ),
-      transition(':enter', [
-        style({
-          opacity: 0,
-          transform: 'translateX(-100%)'
-        }),
-        animate('0.2s ease-in')
-      ]),
-      transition(':leave', [
-        animate('0.5s ease-out', style({
-          opacity: 0,
-          transform: 'translateY(100%)'
-        }))
-      ])
-    ])
-  ]
+  animations: [ slideInDownAnimation ]
 })
-// #docregion cancel-save
 export class CrisisDetailComponent implements OnInit {
-  @HostBinding('@routeAnimation') get routeAnimation() {
-    return true;
-  }
-
-  @HostBinding('style.display') get display() {
-    return 'block';
-  }
-
-  @HostBinding('style.position') get position() {
-    return 'absolute';
-  }
+  @HostBinding('@routeAnimation') routeAnimation = true;
+  @HostBinding('style.display')   display = 'block';
+  @HostBinding('style.position')  position = 'absolute';
 
   crisis: Crisis;
   editName: string;
 
-// #enddocregion cancel-save
   constructor(
     private service: CrisisService,
     private router: Router,
@@ -92,7 +57,6 @@ export class CrisisDetailComponent implements OnInit {
   }
   // #enddocregion ngOnInit
 
-  // #docregion cancel-save
   cancel() {
     this.gotoCrises();
   }
@@ -101,9 +65,7 @@ export class CrisisDetailComponent implements OnInit {
     this.crisis.name = this.editName;
     this.gotoCrises();
   }
-  // #enddocregion cancel-save
 
-  // #docregion cancel-save-only
   canDeactivate(): Promise<boolean> | boolean {
     // Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged
     if (!this.crisis || this.crisis.name === this.editName) {
@@ -113,9 +75,7 @@ export class CrisisDetailComponent implements OnInit {
     // promise which resolves to true or false when the user decides
     return this.dialogService.confirm('Discard changes?');
   }
-  // #enddocregion cancel-save-only
 
-  // #docregion gotoCrises, relative-navigation
   gotoCrises() {
     let crisisId = this.crisis ? this.crisis.id : null;
     // Pass along the crisis id if available
@@ -124,8 +84,4 @@ export class CrisisDetailComponent implements OnInit {
     // Relative navigation back to the crises
     this.router.navigate(['../', { id: crisisId, foo: 'foo' }], { relativeTo: this.route });
   }
-  // #enddocregion gotoCrises, relative-navigation
-// #docregion cancel-save
 }
-// #enddocregion cancel-save
-// #enddocregion

public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts

@@ -1,10 +1,9 @@
 // #docplaster
 // #docregion
-import { Component, OnInit, HostBinding,
-         trigger, transition,
-         animate, style, state }  from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
+import { Component, OnInit, HostBinding } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 
+import { slideInDownAnimation }   from '../animations';
 import { Crisis }         from './crisis.service';
 import { DialogService }  from '../dialog.service';
 
@@ -25,43 +24,12 @@ import { DialogService }  from '../dialog.service';
   </div>
   `,
   styles: ['input {width: 20em}'],
-  // #enddocregion template
-  animations: [
-    trigger('routeAnimation', [
-      state('*',
-        style({
-          opacity: 1,
-          transform: 'translateX(0)'
-        })
-      ),
-      transition(':enter', [
-        style({
-          opacity: 0,
-          transform: 'translateX(-100%)'
-        }),
-        animate('0.2s ease-in')
-      ]),
-      transition(':leave', [
-        animate('0.5s ease-out', style({
-          opacity: 0,
-          transform: 'translateY(100%)'
-        }))
-      ])
-    ])
-  ]
+  animations: [ slideInDownAnimation ]
 })
 export class CrisisDetailComponent implements OnInit {
-  @HostBinding('@routeAnimation') get routeAnimation() {
-    return true;
-  }
-
-  @HostBinding('style.display') get display() {
-    return 'block';
-  }
-
-  @HostBinding('style.position') get position() {
-    return 'absolute';
-  }
+  @HostBinding('@routeAnimation') routeAnimation = true;
+  @HostBinding('style.display')   display = 'block';
+  @HostBinding('style.position')  position = 'absolute';
 
   crisis: Crisis;
   editName: string;
@@ -72,7 +40,7 @@ export class CrisisDetailComponent implements OnInit {
     public dialogService: DialogService
   ) {}
 
-// #docregion crisis-detail-resolve
+// #docregion ngOnInit
   ngOnInit() {
     this.route.data
       .subscribe((data: { crisis: Crisis }) => {
@@ -80,8 +48,9 @@ export class CrisisDetailComponent implements OnInit {
         this.crisis = data.crisis;
       });
   }
-// #enddocregion crisis-detail-resolve
+// #enddocregion ngOnInit
 
+  // #docregion cancel-save
   cancel() {
     this.gotoCrises();
   }
@@ -90,7 +59,9 @@ export class CrisisDetailComponent implements OnInit {
     this.crisis.name = this.editName;
     this.gotoCrises();
   }
+  // #enddocregion cancel-save
 
+  // #docregion canDeactivate
   canDeactivate(): Promise<boolean> | boolean {
     // Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged
     if (!this.crisis || this.crisis.name === this.editName) {
@@ -100,17 +71,16 @@ export class CrisisDetailComponent implements OnInit {
     // promise which resolves to true or false when the user decides
     return this.dialogService.confirm('Discard changes?');
   }
+  // #enddocregion canDeactivate
 
-  // #docregion gotoCrises
   gotoCrises() {
     let crisisId = this.crisis ? this.crisis.id : null;
     // Pass along the crisis id if available
     // so that the CrisisListComponent can select that crisis.
     // Add a totally useless `foo` parameter for kicks.
-    // #docregion gotoCrises-navigate
+  // #docregion gotoCrises-navigate
     // Relative navigation back to the crises
     this.router.navigate(['../', { id: crisisId, foo: 'foo' }], { relativeTo: this.route });
-    // #enddocregion gotoCrises-navigate
+  // #enddocregion gotoCrises-navigate
   }
-  // #enddocregion gotoCrises
 }

public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts

@@ -1,5 +1,3 @@
-// #docplaster
-// #docregion
 import 'rxjs/add/operator/do';
 import 'rxjs/add/operator/switchMap';
 import { Component, OnInit }              from '@angular/core';
@@ -9,28 +7,28 @@ import { Crisis, CrisisService } from './crisis.service';
 import { Observable }            from 'rxjs/Observable';
 
 @Component({
-  // #docregion template
+  // #docregion relative-navigation-router-link
   template: `
     <ul class="items">
-      <li *ngFor="let crisis of crises | async"
-        (click)="onSelect(crisis)">
-        <span class="badge">{{ crisis.id }}</span> {{ crisis.name }}
+      <li *ngFor="let crisis of crises | async">
+        <a [routerLink]="[crisis.id]"
+           [class.selected]="isSelected(crisis)">
+          <span class="badge">{{ crisis.id }}</span>
+          {{ crisis.name }}
+        </a>
       </li>
-    </ul>
-  `,
-  // #enddocregion template
+    </ul>`
+  // #enddocregion relative-navigation-router-link
 })
 export class CrisisListComponent implements OnInit {
   crises: Observable<Crisis[]>;
   selectedId: number;
 
-  // #docregion relative-navigation-ctor
   constructor(
     private service: CrisisService,
     private route: ActivatedRoute,
     private router: Router
   ) {}
-  // #enddocregion relative-navigation-ctor
 
   ngOnInit() {
     this.crises = this.route.params
@@ -40,17 +38,7 @@ export class CrisisListComponent implements OnInit {
       });
   }
 
-  // #docregion select
-  onSelect(crisis: Crisis) {
-    // Absolute link
-    this.router.navigate([crisis.id]);
+  isSelected(crisis: Crisis) {
+    return crisis.id === this.selectedId;
   }
-  // #enddocregion select
 }
-// #enddocregion
-
-/*
-// #docregion relative-navigation-router-link
-<a [routerLink]="[crisis.id]">{{ crisis.name }}</a>
-// #enddocregion relative-navigation-router-link
-*/

public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts

@@ -1,4 +1,3 @@
-// #docplaster
 // #docregion
 import 'rxjs/add/operator/switchMap';
 import { Component, OnInit }      from '@angular/core';
@@ -12,9 +11,10 @@ import { Crisis, CrisisService } from './crisis.service';
   template: `
     <ul class="items">
       <li *ngFor="let crisis of crises | async"
-        [class.selected]="isSelected(crisis)"
-        (click)="onSelect(crisis)">
-        <span class="badge">{{ crisis.id }}</span> {{ crisis.name }}
+        (click)="onSelect(crisis)"
+        [class.selected]="isSelected(crisis)">
+          <span class="badge">{{ crisis.id }}</span>
+          {{ crisis.name }}
       </li>
     </ul>
 
@@ -25,11 +25,13 @@ export class CrisisListComponent implements OnInit {
   crises: Observable<Crisis[]>;
   selectedId: number;
 
+  // #docregion ctor
   constructor(
     private service: CrisisService,
     private route: ActivatedRoute,
     private router: Router
   ) {}
+  // #enddocregion ctor
 
   isSelected(crisis: Crisis) {
     return crisis.id === this.selectedId;
@@ -43,12 +45,12 @@ export class CrisisListComponent implements OnInit {
       });
   }
 
-  // #docregion relative-navigation
+  // #docregion onSelect
   onSelect(crisis: Crisis) {
     this.selectedId = crisis.id;
 
     // Navigate with relative link
     this.router.navigate([crisis.id], { relativeTo: this.route });
   }
-  // #enddocregion relative-navigation
+  // #enddocregion onSelect
 }

public/docs/_examples/router/ts/app/hero-list.component.ts

@@ -7,7 +7,7 @@ import { Component } from '@angular/core';
     <h2>HEROES</h2>
     <p>Get your heroes here</p>
 
-    <button routerLink="/sidekicks">Go To Sidekicks</button>
+    <button routerLink="/sidekicks">Go to sidekicks</button>
   `
 })
 export class HeroListComponent { }

public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts

@@ -2,17 +2,14 @@
 // #docregion
 // #docregion rxjs-operator-import
 import 'rxjs/add/operator/switchMap';
-// #docregion rxjs-operator-import
-// #docregion route-animation-imports
-import { Component, OnInit, HostBinding,
-         trigger, transition, animate,
-         style, state } from '@angular/core';
-// #enddocregion route-animation-imports
+// #enddocregion rxjs-operator-import
+import { Component, OnInit, HostBinding } from '@angular/core';
 import { Router, ActivatedRoute, Params } from '@angular/router';
 
+import { slideInDownAnimation } from '../animations';
+
 import { Hero, HeroService }  from './hero.service';
 
-// #docregion route-animation
 @Component({
   template: `
   <h2>HEROES</h2>
@@ -29,44 +26,14 @@ import { Hero, HeroService }  from './hero.service';
     </p>
   </div>
   `,
-  animations: [
-    trigger('routeAnimation', [
-      state('*',
-        style({
-          opacity: 1,
-          transform: 'translateX(0)'
-        })
-      ),
-      transition(':enter', [
-        style({
-          opacity: 0,
-          transform: 'translateX(-100%)'
-        }),
-        animate('0.2s ease-in')
-      ]),
-      transition(':leave', [
-        animate('0.5s ease-out', style({
-          opacity: 0,
-          transform: 'translateY(100%)'
-        }))
-      ])
-    ])
-  ]
+  animations: [ slideInDownAnimation ]
 })
-// #docregion route-animation-host-binding
 export class HeroDetailComponent implements OnInit {
-// #enddocregion route-animation
-  @HostBinding('@routeAnimation') get routeAnimation() {
-    return true;
-  }
-
-  @HostBinding('style.display') get display() {
-    return 'block';
-  }
-
-  @HostBinding('style.position') get position() {
-    return 'absolute';
-  }
+// #docregion host-bindings
+  @HostBinding('@routeAnimation') routeAnimation = true;
+  @HostBinding('style.display')   display = 'block';
+  @HostBinding('style.position')  position = 'absolute';
+// #enddocregion host-bindings
 
   hero: Hero;
 
@@ -87,14 +54,13 @@ export class HeroDetailComponent implements OnInit {
   }
   // #enddocregion ngOnInit
 
-  // #docregion gotoHeroes-navigate
+  // #docregion gotoHeroes
   gotoHeroes() {
     let heroId = this.hero ? this.hero.id : null;
     // Pass along the hero id if available
     // so that the HeroList component can select that hero.
+    // Include a junk 'foo' property for fun.
     this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);
   }
-  // #enddocregion gotoHeroes-navigate
-// #docregion route-animation-host-binding
+  // #enddocregion gotoHeroes
 }
-// #enddocregion route-animation-host-binding

public/docs/_examples/router/ts/app/heroes/hero-list.component.1.ts

@@ -17,7 +17,7 @@ import { Hero, HeroService }   from './hero.service';
       </li>
     </ul>
 
-    <button routerLink="/sidekicks">Go To Sidekicks</button>
+    <button routerLink="/sidekicks">Go to sidekicks</button>
   `
   // #enddocregion template
 })

public/docs/_examples/router/ts/app/heroes/hero-list.component.ts

@@ -24,7 +24,7 @@ import { Hero, HeroService }  from './hero.service';
       </li>
     </ul>
 
-    <button routerLink="/sidekicks">Go To Sidekicks</button>
+    <button routerLink="/sidekicks">Go to sidekicks</button>
   `
   // #enddocregion template
 })

public/docs/_examples/router/ts/app/not-found.component.ts

@@ -2,8 +2,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  template: `
-    <h2>Page Not Found</h2>
-    `
+  template: '<h2>Page not found</h2>'
 })
 export class PageNotFoundComponent {}

public/docs/_examples/router/ts/app/selective-preloading-strategy.ts

@@ -5,10 +5,10 @@ import { PreloadingStrategy, Route } from '@angular/router';
 import { Observable } from 'rxjs/Observable';
 
 @Injectable()
-export class PreloadSelectedModules implements PreloadingStrategy {
+export class SelectivePreloadingStrategy implements PreloadingStrategy {
   preloadedModules: string[] = [];
 
-  preload(route: Route, load: Function): Observable<any> {
+  preload(route: Route, load: () => Observable<any>): Observable<any> {
     if (route.data && route.data['preload']) {
       // add the route path to our preloaded module array
       this.preloadedModules.push(route.path);

public/docs/_examples/router/ts/index.1.html

@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<!-- #docregion -->
-<html>
-  <head>
-     <!-- #docregion base-href -->
-    <base href="/">
-    <!-- #enddocregion base-href -->
-    <title>Router Sample v.1</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="styles.css">
-
-    <!-- Polyfills for older browsers -->
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-
-    <script src="node_modules/zone.js/dist/zone.js"></script>
-    <script src="node_modules/reflect-metadata/Reflect.js"></script>
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
-
-    <script src="systemjs.config.js"></script>
-    <script>
-      System.import('app/main.1') //  <-----  ONLY CHANGE
-            .catch(function(err){ console.error(err); });
-    </script>
-  </head>
-
-  <body>
-    <h1>Milestone 1</h1>
-    <my-app>loading...</my-app>
-  </body>
-
-</html>
-<!-- #enddocregion -->

public/docs/_examples/router/ts/index.html

@@ -3,7 +3,9 @@
 <html>
   <head>
     <!-- Set the base href -->
+    <!-- #docregion base-href -->
     <base href="/">
+    <!-- #enddocregion base-href -->
     <title>Router Sample</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">

public/docs/_examples/router/ts/plnkr.json

@@ -5,9 +5,7 @@
     "!**/*.js",
     "!**/*.[0-9].*",
     "!app/crisis-list.component.ts",
-    "!app/hero-list.component.ts",
-    "!app/crisis-center/add-crisis.component.ts",
-    "!app/not-found.component.ts"
+    "!app/hero-list.component.ts"
   ],
   "tags": ["router"]
 }

public/docs/ts/latest/guide/change-log.jade

@@ -5,6 +5,10 @@ block includes
   The Angular documentation is a living document with continuous improvements.
   This log calls attention to recent significant changes.
 
+  ## Router: more detail (2016-12-21)
+  Added more information to the [Router](router.html) guide 
+  including sections named outlets, wildcard routes, and preload strategies.
+
   ## Http: how to set default request headers (and other request options) (2016-12-14)
   Added section on how to set default request headers (and other request options) to 
   [Http](server-communication.html#override-default-request-options) guide.