Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit 0522296

Browse files
brandonrobertsbrandonroberts
committed
docs(router): Added content updates to developer guide
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
1 parent 08d051d commit 0522296

28 files changed

+295
-191
lines changed

Diff for: ‎public/docs/_examples/router/ts/app/app.component.1.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ import { ROUTER_DIRECTIVES } from '@angular/router';
1212
template: `
1313
<h1>Component Router</h1>
1414
<nav>
15-
<a [routerLink]="['/crisis-center']">Crisis Center</a>
16-
<a [routerLink]="['/heroes']">Heroes</a>
15+
<a [routerLink]="['/crisis-center']" routerLinkActive="active">Crisis Center</a>
16+
<a [routerLink]="['/heroes']" routerLinkActive="active">Heroes</a>
1717
</nav>
1818
<router-outlet></router-outlet>
1919
`,

Diff for: ‎public/docs/_examples/router/ts/app/app.component.2.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ import { HeroService } from './heroes/hero.service';
2525
template: `
2626
<h1>Component Router</h1>
2727
<nav>
28-
<a [routerLink]="['/crisis-center']">Crisis Center</a>
29-
<a [routerLink]="['/heroes']">Heroes</a>
28+
<a [routerLink]="['/crisis-center']" routerLinkActive="active">Crisis Center</a>
29+
<a [routerLink]="['/heroes']" routerLinkActive="active">Heroes</a>
3030
</nav>
3131
<router-outlet></router-outlet>
3232
`,

Diff for: ‎public/docs/_examples/router/ts/app/app.component.3.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -28,16 +28,16 @@ import { HeroService } from './heroes/hero.service';
2828
*/
2929
/* Crisis Center Detail link
3030
// #docregion Dragon-anchor
31-
<a [routerLink]="['/crisis-center/1']">Dragon Crisis</a>
31+
<a [routerLink]="['/crisis-center', 1]">Dragon Crisis</a>
3232
// #enddocregion Dragon-anchor
3333
*/
3434
// #docregion template
3535
template: `
3636
<h1 class="title">Component Router</h1>
3737
<nav>
3838
<a [routerLink]="['/crisis-center']">Crisis Center</a>
39-
<a [routerLink]="['/crisis-center/1']">Dragon Crisis</a>
40-
<a [routerLink]="['/crisis-center/2']">Shark Crisis</a>
39+
<a [routerLink]="['/crisis-center', 1, { foo: 'foo' }]">Dragon Crisis</a>
40+
<a [routerLink]="['/crisis-center', 2]">Shark Crisis</a>
4141
</nav>
4242
<router-outlet></router-outlet>
4343
`,

Diff for: ‎public/docs/_examples/router/ts/app/app.component.4.ts

+4-3
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,10 @@ import { HeroService } from './heroes/hero.service';
1111
template: `
1212
<h1 class="title">Component Router</h1>
1313
<nav>
14-
<a [routerLink]="['/crisis-center']">Crisis Center</a>
15-
<a [routerLink]="['/heroes']">Heroes</a>
16-
<a [routerLink]="['/crisis-center/admin']">Crisis Admin</a>
14+
<a [routerLink]="['/crisis-center']" routerLinkActive="active"
15+
[routerLinkActiveOptions]="{ exact: true }">Crisis Center</a>
16+
<a [routerLink]="['/heroes']" routerLinkActive="active">Heroes</a>
17+
<a [routerLink]="['/crisis-center/admin']" routerLinkActive="active">Crisis Admin</a>
1718
</nav>
1819
<router-outlet></router-outlet>
1920
`,

Diff for: ‎public/docs/_examples/router/ts/app/app.component.ts

+5-4
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,11 @@ import { HeroService } from './heroes/hero.service';
1212
template: `
1313
<h1 class="title">Component Router</h1>
1414
<nav>
15-
<a [routerLink]="['/crisis-center']">Crisis Center</a>
16-
<a [routerLink]="['/heroes']">Heroes</a>
17-
<a [routerLink]="['/crisis-center/admin']">Crisis Admin</a>
18-
<a [routerLink]="['/login']">Login</a>
15+
<a [routerLink]="['/crisis-center']" routerLinkActive="active"
16+
[routerLinkActiveOptions]="{ exact: true }">Crisis Center</a>
17+
<a [routerLink]="['/heroes']" routerLinkActive="active">Heroes</a>
18+
<a [routerLink]="['/crisis-center/admin']" routerLinkActive="active">Crisis Admin</a>
19+
<a [routerLink]="['/login']" routerLinkActive="active">Login</a>
1920
</nav>
2021
<router-outlet></router-outlet>
2122
`,

Diff for: ‎public/docs/_examples/router/ts/app/app.routes.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { heroesRoutes } from './heroes/heroes.routes';
77
import { loginRoutes,
88
authProviders } from './login.routes';
99

10-
import { CanDeactivateGuard } from './interfaces';
10+
import { CanDeactivateGuard } from './can-deactivate-guard.service';
1111

1212
export const routes: RouterConfig = [
1313
...heroesRoutes,

Diff for: ‎public/docs/_examples/router/ts/app/auth.guard.1.ts renamed to ‎public/docs/_examples/router/ts/app/auth-guard.service.1.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
// #docregion
2+
import { Injectable } from '@angular/core';
23
import { CanActivate } from '@angular/router';
34

5+
@Injectable()
46
export class AuthGuard implements CanActivate {
57
canActivate() {
68
console.log('AuthGuard#canActivate called');

Diff for: ‎public/docs/_examples/router/ts/app/auth-guard.service.2.ts

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
// #docregion
2+
import { Injectable } from '@angular/core';
3+
import { CanActivate, Router,
4+
ActivatedRouteSnapshot,
5+
RouterStateSnapshot } from '@angular/router';
6+
import { AuthService } from './auth.service';
7+
8+
@Injectable()
9+
export class AuthGuard implements CanActivate {
10+
constructor(private authService: AuthService, private router: Router) {}
11+
12+
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
13+
if (this.authService.isLoggedIn) { return true; }
14+
15+
// Store the attempted URL for redirecting
16+
this.authService.setRedirect(state.url);
17+
18+
// Navigate to the login page
19+
this.router.navigate(['/login']);
20+
return false;
21+
}
22+
}

Diff for: ‎public/docs/_examples/router/ts/app/auth-guard.service.ts

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// #docregion
2+
import { Injectable } from '@angular/core';
3+
import { CanActivate, Router,
4+
ActivatedRouteSnapshot,
5+
RouterStateSnapshot } from '@angular/router';
6+
import { AuthService } from './auth.service';
7+
8+
@Injectable()
9+
export class AuthGuard implements CanActivate {
10+
constructor(private authService: AuthService, private router: Router) {}
11+
12+
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
13+
if (this.authService.isLoggedIn) { return true; }
14+
15+
// Store the attempted URL for redirecting
16+
this.authService.setRedirect(state.url);
17+
18+
// Create a dummy session id
19+
let sessionId = 123456789;
20+
21+
// Set our navigation extras object
22+
// that contains our global query params and fragment
23+
let navigationExtras = {
24+
queryParams: { 'session_id': sessionId },
25+
fragment: 'anchor'
26+
};
27+
28+
// Navigate to the login page with extras
29+
this.router.navigate(['/login'], navigationExtras);
30+
return false;
31+
}
32+
}

Diff for: ‎public/docs/_examples/router/ts/app/auth.guard.ts

-15
This file was deleted.

Diff for: ‎public/docs/_examples/router/ts/app/auth.service.ts

+6
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import 'rxjs/add/operator/delay';
99
@Injectable()
1010
export class AuthService {
1111
isLoggedIn: boolean = false;
12+
redirectUrl: string;
1213

1314
login() {
1415
return Observable.of(true).delay(1000).do(val => this.isLoggedIn = true);
@@ -17,4 +18,9 @@ export class AuthService {
1718
logout() {
1819
this.isLoggedIn = false;
1920
}
21+
22+
setRedirect(url: string) {
23+
// store the URL so we can redirect after logging in
24+
this.redirectUrl = url;
25+
}
2026
}

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

+2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
// #docregion
2+
import { Injectable } from '@angular/core';
23
import { CanDeactivate } from '@angular/router';
34
import { Observable } from 'rxjs/Observable';
45

56
export interface CanComponentDeactivate {
67
canDeactivate: () => boolean | Observable<boolean>;
78
}
89

10+
@Injectable()
911
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
1012
canDeactivate(component: CanComponentDeactivate): Observable<boolean> | boolean {
1113
return component.canDeactivate ? component.canDeactivate() : true;

Diff for: ‎public/docs/_examples/router/ts/app/crisis-center/crisis-admin.component.1.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// #docregion
2+
import { Component } from '@angular/core';
3+
import { ROUTER_DIRECTIVES } from '@angular/router';
4+
5+
@Component({
6+
template: `
7+
<h3>CRISIS ADMINISTRATION</h3>
8+
<p>Manage your crises here</p>
9+
`,
10+
directives: [ROUTER_DIRECTIVES]
11+
})
12+
13+
export class CrisisAdminComponent { }

Diff for: ‎public/docs/_examples/router/ts/app/crisis-center/crisis-admin.component.ts

+29-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,39 @@
11
// #docregion
2-
import { Component } from '@angular/core';
3-
import { ROUTER_DIRECTIVES } from '@angular/router';
2+
import { Component, OnInit } from '@angular/core';
3+
import { ROUTER_DIRECTIVES,
4+
Router } from '@angular/router';
5+
import { Observable } from 'rxjs/Observable';
6+
import 'rxjs/add/operator/map';
47

58
@Component({
69
template: `
710
<h3>CRISIS ADMINISTRATION</h3>
811
<p>Manage your crises here</p>
12+
13+
<p>Session ID: {{ sessionId | async }}</p>
14+
<a id="anchor"></a>
15+
<p>Token: {{ token | async }}</p>
916
`,
1017
directives: [ROUTER_DIRECTIVES]
1118
})
1219

13-
export class CrisisAdminComponent { }
20+
export class CrisisAdminComponent implements OnInit {
21+
sessionId: Observable<string>;
22+
token: Observable<string>;
23+
24+
constructor(private router: Router) {}
25+
26+
ngOnInit() {
27+
// Capture the session ID if available
28+
this.sessionId = this.router
29+
.routerState
30+
.queryParams
31+
.map(params => params['session_id'] || 'None');
32+
33+
// Capture the fragment if available
34+
this.token = this.router
35+
.routerState
36+
.fragment
37+
.map(fragment => fragment || 'None');
38+
}
39+
}

Diff for: ‎public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.3.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { CrisisListComponent } from './crisis-list.component';
66
import { CrisisCenterComponent } from './crisis-center.component';
77
import { CrisisAdminComponent } from './crisis-admin.component';
88

9-
import { CanDeactivateGuard } from '../interfaces';
9+
import { CanDeactivateGuard } from '../can-deactivate-guard.service';
1010

1111
export const crisisCenterRoutes: RouterConfig = [
1212
{

Diff for: ‎public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.4.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ import { CrisisListComponent } from './crisis-list.component';
66
import { CrisisCenterComponent } from './crisis-center.component';
77
import { CrisisAdminComponent } from './crisis-admin.component';
88

9-
import { CanDeactivateGuard } from '../interfaces';
10-
import { AuthGuard } from '../auth.guard';
9+
import { CanDeactivateGuard } from '../can-deactivate-guard.service';
10+
import { AuthGuard } from '../auth-guard.service';
1111

1212
export const crisisCenterRoutes: RouterConfig = [
1313
{

Diff for: ‎public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import { CrisisListComponent } from './crisis-list.component';
55
import { CrisisCenterComponent } from './crisis-center.component';
66
import { CrisisAdminComponent } from './crisis-admin.component';
77

8-
import { CanDeactivateGuard } from '../interfaces';
9-
import { AuthGuard } from '../auth.guard';
8+
import { CanDeactivateGuard } from '../can-deactivate-guard.service';
9+
import { AuthGuard } from '../auth-guard.service';
1010

1111
export const crisisCenterRoutes: RouterConfig = [
1212
{

Diff for: ‎public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import { ActivatedRoute, Router } from '@angular/router';
55
import { Observable } from 'rxjs/Observable';
66
import 'rxjs/add/observable/fromPromise';
77

8-
import { Crisis, CrisisService } from './crisis.service';
9-
import { DialogService } from '../dialog.service';
8+
import { Crisis, CrisisService } from './crisis.service';
9+
import { DialogService } from '../dialog.service';
1010

1111

1212

Diff for: ‎public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import { Router, ActivatedRoute } from '@angular/router';
55
import { Observable } from 'rxjs/Observable';
66
import 'rxjs/add/observable/fromPromise';
77

8-
import { Crisis, CrisisService } from './crisis.service';
9-
import { DialogService } from '../dialog.service';
8+
import { Crisis, CrisisService } from './crisis.service';
9+
import { DialogService } from '../dialog.service';
1010

1111
@Component({
1212
template: `

Diff for: ‎public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// #docplaster
22
// #docregion
33
import { Component, OnInit, OnDestroy } from '@angular/core';
4-
import { ActivatedRoute, Router } from '@angular/router';
4+
import { ActivatedRoute, Router } from '@angular/router';
55

66
import { Crisis, CrisisService } from './crisis.service';
77

Diff for: ‎public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// #docplaster
22
// #docregion
33
import { Component, OnInit, OnDestroy } from '@angular/core';
4-
import { Router, ActivatedRoute } from '@angular/router';
4+
import { ActivatedRoute, Router } from '@angular/router';
55

66
import { Crisis, CrisisService } from './crisis.service';
77

Diff for: ‎public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export class HeroDetailComponent implements OnInit, OnDestroy {
5656
let heroId = this.hero ? this.hero.id : null;
5757
// Pass along the hero id if available
5858
// so that the HeroList component can select that hero.
59-
this.router.navigate(['/heroes'], { queryParams: { id: heroId, foo: 'foo' } });
59+
this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);
6060
}
6161
// #enddocregion gotoHeroes-navigate
6262
}

Diff for: ‎public/docs/_examples/router/ts/app/heroes/hero-list.component.2.ts

-64
This file was deleted.

0 commit comments

Comments
 (0)