docs(router): Added content updates to developer guide

brandonroberts · brandonroberts · commit 052229603f84 · 2016-07-17T03:13:51.000-05:00
Added section for RouterLinkActive
Added section for global query params and fragments
Added section for RouterState
Updated code samples
Renamed .guard files to .service
Renamed interfaces.ts to can-deactivate-guard.service.ts
Removed unused files
diff --git a/public/docs/_examples/router/ts/app/app.component.1.ts b/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>
   `,
diff --git a/public/docs/_examples/router/ts/app/app.component.2.ts b/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>
   `,
diff --git a/public/docs/_examples/router/ts/app/app.component.3.ts b/public/docs/_examples/router/ts/app/app.component.3.ts
@@ -28,16 +28,16 @@ import { HeroService }           from './heroes/hero.service';
   */
   /* Crisis Center Detail link
   // #docregion Dragon-anchor
-  <a [routerLink]="['/crisis-center/1']">Dragon Crisis</a>
+  <a [routerLink]="['/crisis-center', 1]">Dragon Crisis</a>
   // #enddocregion Dragon-anchor
   */
 // #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/2']">Shark 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>
   `,
diff --git a/public/docs/_examples/router/ts/app/app.component.4.ts b/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>
   `,
diff --git a/public/docs/_examples/router/ts/app/app.component.ts b/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>
   `,
diff --git a/public/docs/_examples/router/ts/app/app.routes.ts b/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,
diff --git a/public/docs/_examples/router/ts/app/auth-guard.service.1.ts b/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');
diff --git a/public/docs/_examples/router/ts/app/auth-guard.service.2.ts b/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.setRedirect(state.url);
+
+    // Navigate to the login page
+    this.router.navigate(['/login']);
+    return false;
+  }
+}
diff --git a/public/docs/_examples/router/ts/app/auth-guard.service.ts b/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.setRedirect(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;
+  }
+}
diff --git a/public/docs/_examples/router/ts/app/auth.guard.ts b/public/docs/_examples/router/ts/app/auth.guard.ts
diff --git a/public/docs/_examples/router/ts/app/auth.service.ts b/public/docs/_examples/router/ts/app/auth.service.ts
@@ -9,6 +9,7 @@ import 'rxjs/add/operator/delay';
 @Injectable()
 export class AuthService {
   isLoggedIn: boolean = false;
+  redirectUrl: string;
 
   login() {
     return Observable.of(true).delay(1000).do(val => this.isLoggedIn = true);
@@ -17,4 +18,9 @@ export class AuthService {
   logout() {
     this.isLoggedIn = false;
   }
+
+  setRedirect(url: string) {
+    // store the URL so we can redirect after logging in
+    this.redirectUrl = url;
+  }
 }
diff --git a/public/docs/_examples/router/ts/app/can-deactivate-guard.service.ts b/public/docs/_examples/router/ts/app/can-deactivate-guard.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;
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-admin.component.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-admin.component.1.ts
@@ -0,0 +1,13 @@
+// #docregion
+import { Component }         from '@angular/core';
+import { ROUTER_DIRECTIVES } from '@angular/router';
+
+@Component({
+  template:  `
+    <h3>CRISIS ADMINISTRATION</h3>
+    <p>Manage your crises here</p>
+  `,
+  directives: [ROUTER_DIRECTIVES]
+})
+
+export class CrisisAdminComponent { }
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-admin.component.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-admin.component.ts
@@ -1,13 +1,39 @@
 // #docregion
-import { Component }         from '@angular/core';
-import { ROUTER_DIRECTIVES } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { ROUTER_DIRECTIVES,
+         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]
 })
 
-export class CrisisAdminComponent { }
+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');
+
+    // Capture the fragment if available
+    this.token = this.router
+      .routerState
+      .fragment
+      .map(fragment => fragment || 'None');
+  }
+}
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.3.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.3.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 = [
   {
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.4.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.4.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 = [
   {
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.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 = [
   {
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.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';
 
 
 
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.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: `
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts b/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 { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router }       from '@angular/router';
 
 import { Crisis, CrisisService } from './crisis.service';
 
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.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';
 
diff --git a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts b/public/docs/_examples/router/ts/app/heroes/hero-detail.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
 }
diff --git a/public/docs/_examples/router/ts/app/heroes/hero-list.component.2.ts b/public/docs/_examples/router/ts/app/heroes/hero-list.component.2.ts
diff --git a/public/docs/_examples/router/ts/app/heroes/hero-list.component.ts b/public/docs/_examples/router/ts/app/heroes/hero-list.component.ts
diff --git a/public/docs/_examples/router/ts/app/heroes/heroes.routes.ts b/public/docs/_examples/router/ts/app/heroes/heroes.routes.ts
diff --git a/public/docs/_examples/router/ts/app/login.component.ts b/public/docs/_examples/router/ts/app/login.component.ts
diff --git a/public/docs/_examples/router/ts/app/login.routes.ts b/public/docs/_examples/router/ts/app/login.routes.ts
diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade
