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

Commit f056a2d

Browse files
brandonrobertswardbell
brandonroberts
authored and
wardbell
committedJul 18, 2016
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
1 parent 83ba850 commit f056a2d

30 files changed

+330
-210
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

+6-1
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,17 @@ import { HeroService } from './heroes/hero.service';
3131
<a [routerLink]="['/crisis-center/1']">Dragon Crisis</a>
3232
// #enddocregion Dragon-anchor
3333
*/
34+
/* Crisis Center link with optional query params
35+
// #docregion cc-query-params
36+
<a [routerLink]="['/crisis-center', { foo: 'foo' }]">Crisis Center</a>
37+
// #enddocregion cc-query-params
38+
*/
3439
// #docregion template
3540
template: `
3641
<h1 class="title">Component Router</h1>
3742
<nav>
3843
<a [routerLink]="['/crisis-center']">Crisis Center</a>
39-
<a [routerLink]="['/crisis-center/1']">Dragon Crisis</a>
44+
<a [routerLink]="['/crisis-center/1', { foo: 'foo' }]">Dragon Crisis</a>
4045
<a [routerLink]="['/crisis-center/2']">Shark Crisis</a>
4146
</nav>
4247
<router-outlet></router-outlet>

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.1.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { provideRouter, RouterConfig } from '@angular/router';
1010
import { HeroListComponent } from './hero-list.component';
1111
import { CrisisCenterComponent } from './crisis-center/crisis-center.component';
1212
import { HeroDetailComponent } from './heroes/hero-detail.component';
13+
import { PageNotFoundComponent } from './not-found.component';
1314
// #enddocregion base-routes
1415

1516
// #docregion
@@ -20,8 +21,9 @@ const routes: RouterConfig = [
2021
{ path: 'heroes', component: HeroListComponent },
2122
// #enddocregion route-defs
2223
// #docregion hero-detail-route
23-
{ path: 'hero/:id', component: HeroDetailComponent }
24+
{ path: 'hero/:id', component: HeroDetailComponent },
2425
// #enddocregion hero-detail-route
26+
{ path: '**', component: PageNotFoundComponent }
2527
];
2628

2729
export const appRouterProviders = [

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.redirectUrl = 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.redirectUrl = 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

+3
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@ import 'rxjs/add/operator/delay';
1010
export class AuthService {
1111
isLoggedIn: boolean = false;
1212

13+
// store the URL so we can redirect after logging in
14+
redirectUrl: string;
15+
1316
login() {
1417
return Observable.of(true).delay(1000).do(val => this.isLoggedIn = true);
1518
}

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

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

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

+28-4
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,37 @@
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 } from '@angular/router';
4+
import { Observable } from 'rxjs/Observable';
5+
import 'rxjs/add/operator/map';
46

57
@Component({
68
template: `
79
<h3>CRISIS ADMINISTRATION</h3>
810
<p>Manage your crises here</p>
11+
12+
<p>Session ID: {{ sessionId | async }}</p>
13+
<a id="anchor"></a>
14+
<p>Token: {{ token | async }}</p>
915
`,
10-
directives: [ROUTER_DIRECTIVES]
16+
directives: []
1117
})
18+
export class CrisisAdminComponent implements OnInit {
19+
sessionId: Observable<string>;
20+
token: Observable<string>;
21+
22+
constructor(private router: Router) {}
23+
24+
ngOnInit() {
25+
// Capture the session ID if available
26+
this.sessionId = this.router
27+
.routerState
28+
.queryParams
29+
.map(params => params['session_id'] || 'None');
1230

13-
export class CrisisAdminComponent { }
31+
// Capture the fragment if available
32+
this.token = this.router
33+
.routerState
34+
.fragment
35+
.map(fragment => fragment || 'None');
36+
}
37+
}

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.

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
// TODO SOMEDAY: Feature Componetized like CrisisCenter
44
import { Component, OnInit, OnDestroy } from '@angular/core';
55
// #docregion import-router
6-
import { Router } from '@angular/router';
6+
import { Router, ActivatedRoute } from '@angular/router';
77
// #enddocregion import-router
88

99
import { Hero, HeroService } from './hero.service';
@@ -31,13 +31,13 @@ export class HeroListComponent implements OnInit, OnDestroy {
3131

3232
constructor(
3333
private service: HeroService,
34+
private route: ActivatedRoute,
3435
private router: Router) {}
3536
// #enddocregion ctor
3637

3738
ngOnInit() {
38-
this.sub = this.router
39-
.routerState
40-
.queryParams
39+
this.sub = this.route
40+
.params
4141
.subscribe(params => {
4242
this.selectedId = +params['id'];
4343
this.service.getHeroes()

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// #docregion
2-
import { RouterConfig } from '@angular/router';
3-
import { HeroListComponent } from './hero-list.component';
4-
import { HeroDetailComponent } from './hero-detail.component';
2+
import { RouterConfig } from '@angular/router';
3+
import { HeroListComponent } from './hero-list.component';
4+
import { HeroDetailComponent } from './hero-detail.component';
55

66
export const heroesRoutes: RouterConfig = [
77
{ path: 'heroes', component: HeroListComponent },

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

+6-3
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,12 @@ export class LoginComponent {
2929
this.authService.login().subscribe(() => {
3030
this.setMessage();
3131
if (this.authService.isLoggedIn) {
32-
// Todo: capture where the user was going and nav there.
33-
// Meanwhile redirect the user to the crisis admin
34-
this.router.navigate(['/crisis-center/admin']);
32+
// Get the redirect URL from our auth service
33+
// If no redirect has been set, use the default
34+
let redirect = this.authService.redirectUrl ? this.authService.redirectUrl : '/crisis-center/admin';
35+
36+
// Redirect the user
37+
this.router.navigate([redirect]);
3538
}
3639
});
3740
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// #docregion
22
import { RouterConfig } from '@angular/router';
3-
import { AuthGuard } from './auth.guard';
3+
import { AuthGuard } from './auth-guard.service';
44
import { AuthService } from './auth.service';
55
import { LoginComponent } from './login.component';
66

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

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// #docregion
2+
import { Component } from '@angular/core';
3+
4+
@Component({
5+
template: `
6+
<h2>Page Not Found</h2>
7+
`
8+
})
9+
export class PageNotFoundComponent {}

Diff for: ‎public/docs/ts/latest/guide/router.jade

+172-90
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)
This repository has been archived.