docs(router): Added content updates to developer guide

closes #1905
Added section for RouterLinkActive
Added section for global query params and fragments
Added section for RouterState
Added wildcard route to example configuration
Updated code samples
Renamed .guard files to .service
Renamed interfaces.ts to can-deactivate-guard.service.ts
Removed unused files

Author: brandonroberts

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

@@ -12,8 +12,8 @@ import { ROUTER_DIRECTIVES } from '@angular/router';
   template: `
     <h1>Component Router</h1>
     <nav>
-      <a [routerLink]="['/crisis-center']">Crisis Center</a>
-      <a [routerLink]="['/heroes']">Heroes</a>
+      <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
+      <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
     </nav>
     <router-outlet></router-outlet>
   `,

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

@@ -25,8 +25,8 @@ import { HeroService }           from './heroes/hero.service';
   template: `
     <h1>Component Router</h1>
     <nav>
-      <a [routerLink]="['/crisis-center']">Crisis Center</a>
-      <a [routerLink]="['/heroes']">Heroes</a>
+      <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
+      <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
     </nav>
     <router-outlet></router-outlet>
   `,

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

@@ -31,12 +31,17 @@ import { HeroService }           from './heroes/hero.service';
   <a [routerLink]="['/crisis-center/1']">Dragon Crisis</a>
   // #enddocregion Dragon-anchor
   */
+  /* Crisis Center link with optional query params
+  // #docregion cc-query-params
+  <a [routerLink]="['/crisis-center', { foo: 'foo' }]">Crisis Center</a>
+  // #enddocregion cc-query-params
+  */
 // #docregion template
   template: `
     <h1 class="title">Component Router</h1>
     <nav>
       <a [routerLink]="['/crisis-center']">Crisis Center</a>
-      <a [routerLink]="['/crisis-center/1']">Dragon Crisis</a>
+      <a [routerLink]="['/crisis-center/1', { foo: 'foo' }]">Dragon Crisis</a>
       <a [routerLink]="['/crisis-center/2']">Shark Crisis</a>
     </nav>
     <router-outlet></router-outlet>

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

@@ -11,9 +11,10 @@ import { HeroService }    from './heroes/hero.service';
   template: `
     <h1 class="title">Component Router</h1>
     <nav>
-      <a [routerLink]="['/crisis-center']">Crisis Center</a>
-      <a [routerLink]="['/heroes']">Heroes</a>
-      <a [routerLink]="['/crisis-center/admin']">Crisis Admin</a>
+      <a routerLink="/crisis-center" routerLinkActive="active"
+         [routerLinkActiveOptions]="{ exact: true }">Crisis Center</a>
+      <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
+      <a routerLink="/crisis-center/admin" routerLinkActive="active">Crisis Admin</a>
     </nav>
     <router-outlet></router-outlet>
   `,

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

@@ -12,10 +12,11 @@ import { HeroService }    from './heroes/hero.service';
   template: `
     <h1 class="title">Component Router</h1>
     <nav>
-      <a [routerLink]="['/crisis-center']">Crisis Center</a>
-      <a [routerLink]="['/heroes']">Heroes</a>
-      <a [routerLink]="['/crisis-center/admin']">Crisis Admin</a>
-      <a [routerLink]="['/login']">Login</a>
+      <a routerLink="/crisis-center" routerLinkActive="active"
+         routerLinkActiveOptions="{ exact: true }">Crisis Center</a>
+      <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
+      <a routerLink="/crisis-center/admin" routerLinkActive="active">Crisis Admin</a>
+      <a routerLink="/login" routerLinkActive="active">Login</a>
     </nav>
     <router-outlet></router-outlet>
   `,

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

@@ -10,6 +10,7 @@ import { provideRouter, RouterConfig } from '@angular/router';
 import { HeroListComponent }     from './hero-list.component';
 import { CrisisCenterComponent } from './crisis-center/crisis-center.component';
 import { HeroDetailComponent }   from './heroes/hero-detail.component';
+import { PageNotFoundComponent } from './not-found.component';
 // #enddocregion base-routes
 
 // #docregion
@@ -20,8 +21,9 @@ const routes: RouterConfig = [
   { path: 'heroes', component: HeroListComponent },
   // #enddocregion route-defs
   // #docregion hero-detail-route
-  { path: 'hero/:id', component: HeroDetailComponent }
+  { path: 'hero/:id', component: HeroDetailComponent },
   // #enddocregion hero-detail-route
+  { path: '**', component: PageNotFoundComponent }
 ];
 
 export const appRouterProviders = [

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

@@ -7,7 +7,7 @@ import { heroesRoutes }       from './heroes/heroes.routes';
 import { loginRoutes,
          authProviders }      from './login.routes';
 
-import { CanDeactivateGuard } from './interfaces';
+import { CanDeactivateGuard } from './can-deactivate-guard.service';
 
 export const routes: RouterConfig = [
   ...heroesRoutes,

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

@@ -1,6 +1,8 @@
 // #docregion
+import { Injectable }     from '@angular/core';
 import { CanActivate }    from '@angular/router';
 
+@Injectable()
 export class AuthGuard implements CanActivate {
   canActivate() {
     console.log('AuthGuard#canActivate called');

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

@@ -0,0 +1,22 @@
+// #docregion
+import { Injectable }             from '@angular/core';
+import { CanActivate, Router,
+         ActivatedRouteSnapshot,
+         RouterStateSnapshot }    from '@angular/router';
+import { AuthService }            from './auth.service';
+
+@Injectable()
+export class AuthGuard implements CanActivate {
+  constructor(private authService: AuthService, private router: Router) {}
+
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+    if (this.authService.isLoggedIn) { return true; }
+
+    // Store the attempted URL for redirecting
+    this.authService.redirectUrl = state.url;
+
+    // Navigate to the login page
+    this.router.navigate(['/login']);
+    return false;
+  }
+}

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

@@ -0,0 +1,32 @@
+// #docregion
+import { Injectable }             from '@angular/core';
+import { CanActivate, Router,
+         ActivatedRouteSnapshot,
+         RouterStateSnapshot }    from '@angular/router';
+import { AuthService }            from './auth.service';
+
+@Injectable()
+export class AuthGuard implements CanActivate {
+  constructor(private authService: AuthService, private router: Router) {}
+
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+    if (this.authService.isLoggedIn) { return true; }
+
+    // Store the attempted URL for redirecting
+    this.authService.redirectUrl = state.url;
+
+    // Create a dummy session id
+    let sessionId = 123456789;
+
+    // Set our navigation extras object
+    // that contains our global query params and fragment
+    let navigationExtras = {
+      queryParams: { 'session_id': sessionId },
+      fragment: 'anchor'
+    };
+
+    // Navigate to the login page with extras
+    this.router.navigate(['/login'], navigationExtras);
+    return false;
+  }
+}

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

@@ -10,6 +10,9 @@ import 'rxjs/add/operator/delay';
 export class AuthService {
   isLoggedIn: boolean = false;
 
+  // store the URL so we can redirect after logging in
+  redirectUrl: string;
+
   login() {
     return Observable.of(true).delay(1000).do(val => this.isLoggedIn = true);
   }

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

@@ -1,11 +1,13 @@
 // #docregion
+import { Injectable }    from '@angular/core';
 import { CanDeactivate } from '@angular/router';
 import { Observable }    from 'rxjs/Observable';
 
 export interface CanComponentDeactivate {
  canDeactivate: () => boolean | Observable<boolean>;
 }
 
+@Injectable()
 export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
   canDeactivate(component: CanComponentDeactivate): Observable<boolean> | boolean {
     return component.canDeactivate ? component.canDeactivate() : true;

public/docs/_examples/router/ts/app/interfaces.ts renamed to public/docs/_examples/router/ts/app/can-deactivate-guard.service.ts

@@ -0,0 +1,11 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  template:  `
+    <h3>CRISIS ADMINISTRATION</h3>
+    <p>Manage your crises here</p>
+  `,
+  directives: []
+})
+export class CrisisAdminComponent { }

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

@@ -1,13 +1,37 @@
 // #docregion
-import { Component }         from '@angular/core';
-import { ROUTER_DIRECTIVES } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { Router }            from '@angular/router';
+import { Observable }        from 'rxjs/Observable';
+import 'rxjs/add/operator/map';
 
 @Component({
   template:  `
     <h3>CRISIS ADMINISTRATION</h3>
     <p>Manage your crises here</p>
+
+    <p>Session ID: {{ sessionId | async }}</p>
+    <a id="anchor"></a>
+    <p>Token: {{ token | async }}</p>
   `,
-  directives: [ROUTER_DIRECTIVES]
+  directives: []
 })
+export class CrisisAdminComponent implements OnInit {
+  sessionId: Observable<string>;
+  token: Observable<string>;
+
+  constructor(private router: Router) {}
+
+  ngOnInit() {
+    // Capture the session ID if available
+    this.sessionId = this.router
+      .routerState
+      .queryParams
+      .map(params => params['session_id'] || 'None');
 
-export class CrisisAdminComponent { }
+    // Capture the fragment if available
+    this.token = this.router
+      .routerState
+      .fragment
+      .map(fragment => fragment || 'None');
+  }
+}

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

@@ -6,7 +6,7 @@ import { CrisisListComponent }   from './crisis-list.component';
 import { CrisisCenterComponent } from './crisis-center.component';
 import { CrisisAdminComponent }  from './crisis-admin.component';
 
-import { CanDeactivateGuard }    from '../interfaces';
+import { CanDeactivateGuard }    from '../can-deactivate-guard.service';
 
 export const crisisCenterRoutes: RouterConfig = [
   {

public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.3.ts

@@ -6,8 +6,8 @@ import { CrisisListComponent }   from './crisis-list.component';
 import { CrisisCenterComponent } from './crisis-center.component';
 import { CrisisAdminComponent }  from './crisis-admin.component';
 
-import { CanDeactivateGuard }    from '../interfaces';
-import { AuthGuard }             from '../auth.guard';
+import { CanDeactivateGuard }    from '../can-deactivate-guard.service';
+import { AuthGuard }             from '../auth-guard.service';
 
 export const crisisCenterRoutes: RouterConfig = [
   {

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

@@ -5,8 +5,8 @@ import { CrisisListComponent }   from './crisis-list.component';
 import { CrisisCenterComponent } from './crisis-center.component';
 import { CrisisAdminComponent }  from './crisis-admin.component';
 
-import { CanDeactivateGuard }    from '../interfaces';
-import { AuthGuard }             from '../auth.guard';
+import { CanDeactivateGuard }    from '../can-deactivate-guard.service';
+import { AuthGuard }             from '../auth-guard.service';
 
 export const crisisCenterRoutes: RouterConfig = [
   {

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

@@ -5,8 +5,8 @@ import { ActivatedRoute, Router }       from '@angular/router';
 import { Observable }                   from 'rxjs/Observable';
 import 'rxjs/add/observable/fromPromise';
 
-import { Crisis, CrisisService } from './crisis.service';
-import { DialogService } from '../dialog.service';
+import { Crisis, CrisisService }  from './crisis.service';
+import { DialogService }          from '../dialog.service';
 
 
 

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

@@ -5,8 +5,8 @@ import { Router, ActivatedRoute }       from '@angular/router';
 import { Observable }                   from 'rxjs/Observable';
 import 'rxjs/add/observable/fromPromise';
 
-import { Crisis, CrisisService } from './crisis.service';
-import { DialogService } from '../dialog.service';
+import { Crisis, CrisisService }  from './crisis.service';
+import { DialogService }          from '../dialog.service';
 
 @Component({
   template: `

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

@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router }       from '@angular/router';
 
 import { Crisis, CrisisService } from './crisis.service';
 

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

@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router }       from '@angular/router';
 
 import { Crisis, CrisisService } from './crisis.service';
 

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

@@ -56,7 +56,7 @@ export class HeroDetailComponent implements OnInit, OnDestroy  {
     let heroId = this.hero ? this.hero.id : null;
     // Pass along the hero id if available
     // so that the HeroList component can select that hero.
-    this.router.navigate(['/heroes'], { queryParams: { id: heroId, foo: 'foo' } });
+    this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);
   }
   // #enddocregion gotoHeroes-navigate
 }