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

Commit f318954

Browse files
brandonrobertsnaomiblack
brandonroberts
authored and
naomiblack
committed
docs(toh-5): Upgraded tutorial to new router
1 parent 2eae445 commit f318954

15 files changed

+363
-266
lines changed

‎public/docs/_examples/styles.css

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
/* Master Styles */
22
h1 {
3-
color: #369;
4-
font-family: Arial, Helvetica, sans-serif;
3+
color: #369;
4+
font-family: Arial, Helvetica, sans-serif;
55
font-size: 250%;
66
}
7-
h2, h3 {
7+
h2, h3 {
88
color: #444;
9-
font-family: Arial, Helvetica, sans-serif;
9+
font-family: Arial, Helvetica, sans-serif;
1010
font-weight: lighter;
1111
}
12-
body {
13-
margin: 2em;
12+
body {
13+
margin: 2em;
1414
}
15-
body, input[text], button {
16-
color: #888;
17-
font-family: Cambria, Georgia;
15+
body, input[text], button {
16+
color: #888;
17+
font-family: Cambria, Georgia;
1818
}
1919
a {
2020
cursor: pointer;
@@ -34,7 +34,7 @@ button:hover {
3434
}
3535
button:disabled {
3636
background-color: #eee;
37-
color: #aaa;
37+
color: #aaa;
3838
cursor: auto;
3939
}
4040

@@ -54,7 +54,7 @@ nav a:hover {
5454
color: #039be5;
5555
background-color: #CFD8DC;
5656
}
57-
nav a.router-link-active {
57+
nav a.active {
5858
color: #039be5;
5959
}
6060

@@ -137,6 +137,6 @@ nav a.router-link-active {
137137
}
138138

139139
/* everywhere else */
140-
* {
141-
font-family: Arial, Helvetica, sans-serif;
140+
* {
141+
font-family: Arial, Helvetica, sans-serif;
142142
}

‎public/docs/_examples/toh-5/ts/app/app.component.1.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { HeroesComponent } from './heroes.component';
88
// #enddocregion
99

1010
// For testing only
11-
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
11+
import { ROUTER_DIRECTIVES } from '@angular/router';
1212

1313
// #docregion
1414
@Component({
@@ -20,7 +20,6 @@ import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/route
2020
directives: [HeroesComponent],
2121
providers: [
2222
// #enddocregion
23-
ROUTER_PROVIDERS,
2423
// #docregion
2524
HeroService
2625
]

‎public/docs/_examples/toh-5/ts/app/app.component.2.ts

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,38 +2,27 @@
22
// #docregion
33
import { Component } from '@angular/core';
44
// #docregion import-router
5-
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
5+
import { ROUTER_DIRECTIVES } from '@angular/router';
66
// #enddocregion import-router
77

88
import { HeroService } from './hero.service';
9-
import { HeroesComponent } from './heroes.component';
109

1110
@Component({
1211
selector: 'my-app',
1312
// #docregion template
1413
template: `
1514
<h1>{{title}}</h1>
16-
<a [routerLink]="['Heroes']">Heroes</a>
15+
<a [routerLink]="['/heroes']">Heroes</a>
1716
<router-outlet></router-outlet>
1817
`,
1918
// #enddocregion template
2019
// #docregion directives-and-providers
2120
directives: [ROUTER_DIRECTIVES],
2221
providers: [
23-
ROUTER_PROVIDERS,
2422
HeroService
2523
]
2624
// #enddocregion directives-and-providers
2725
})
28-
// #docregion route-config
29-
@RouteConfig([
30-
{
31-
path: '/heroes',
32-
name: 'Heroes',
33-
component: HeroesComponent
34-
}
35-
])
36-
// #enddocregion route-config
3726
export class AppComponent {
3827
title = 'Tour of Heroes';
3928
}

‎public/docs/_examples/toh-5/ts/app/app.component.3.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
// #docplaster
2+
// #docregion
3+
import { Component } from '@angular/core';
4+
import { ROUTER_DIRECTIVES } from '@angular/router';
5+
6+
import { HeroService } from './hero.service';
7+
8+
@Component({
9+
selector: 'my-app',
10+
// #docregion template
11+
template: `
12+
<h1>{{title}}</h1>
13+
<nav>
14+
// #docregion router-link-active
15+
<a [routerLink]="['/dashboard']" routerLinkActive="active">Dashboard</a>
16+
<a [routerLink]="['/heroes']" routerLinkActive="active">Heroes</a>
17+
// #enddocregion router-link-active
18+
</nav>
19+
<router-outlet></router-outlet>
20+
`,
21+
// #enddocregion template
22+
// #docregion style-urls
23+
styleUrls: ['app/app.component.css'],
24+
// #enddocregion style-urls
25+
directives: [ROUTER_DIRECTIVES],
26+
providers: [
27+
HeroService
28+
]
29+
})
30+
export class AppComponent {
31+
title = 'Tour of Heroes';
32+
}
33+
// #enddocregion

‎public/docs/_examples/toh-5/ts/app/app.component.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,6 @@ nav a:hover {
2424
color: #039be5;
2525
background-color: #CFD8DC;
2626
}
27-
nav a.router-link-active {
27+
nav a.active {
2828
color: #039be5;
2929
}

‎public/docs/_examples/toh-5/ts/app/app.component.ts

Lines changed: 3 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,8 @@
11
// #docplaster
22
// #docregion
33
import { Component } from '@angular/core';
4-
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
4+
import { ROUTER_DIRECTIVES } from '@angular/router';
55

6-
import { DashboardComponent } from './dashboard.component';
7-
import { HeroesComponent } from './heroes.component';
8-
// #docregion hero-detail-import
9-
import { HeroDetailComponent } from './hero-detail.component';
10-
// #enddocregion hero-detail-import
116
import { HeroService } from './hero.service';
127

138
@Component({
@@ -16,8 +11,8 @@ import { HeroService } from './hero.service';
1611
template: `
1712
<h1>{{title}}</h1>
1813
<nav>
19-
<a [routerLink]="['Dashboard']">Dashboard</a>
20-
<a [routerLink]="['Heroes']">Heroes</a>
14+
<a [routerLink]="['/dashboard']" routerLinkActive="active">Dashboard</a>
15+
<a [routerLink]="['/heroes']" routerLinkActive="active">Heroes</a>
2116
</nav>
2217
<router-outlet></router-outlet>
2318
`,
@@ -27,32 +22,9 @@ import { HeroService } from './hero.service';
2722
// #enddocregion style-urls
2823
directives: [ROUTER_DIRECTIVES],
2924
providers: [
30-
ROUTER_PROVIDERS,
3125
HeroService
3226
]
3327
})
34-
@RouteConfig([
35-
// #docregion dashboard-route
36-
{
37-
path: '/dashboard',
38-
name: 'Dashboard',
39-
component: DashboardComponent,
40-
useAsDefault: true
41-
},
42-
// #enddocregion dashboard-route
43-
// #docregion hero-detail-route
44-
{
45-
path: '/detail/:id',
46-
name: 'HeroDetail',
47-
component: HeroDetailComponent
48-
},
49-
// #enddocregion hero-detail-route
50-
{
51-
path: '/heroes',
52-
name: 'Heroes',
53-
component: HeroesComponent
54-
}
55-
])
5628
export class AppComponent {
5729
title = 'Tour of Heroes';
5830
}

‎public/docs/_examples/toh-5/ts/app/app.routes.1.ts

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
// #docregion
2+
import { provideRouter, RouterConfig } from '@angular/router';
3+
import { DashboardComponent } from './dashboard.component';
4+
import { HeroesComponent } from './heroes.component';
5+
// #docregion hero-detail-import
6+
import { HeroDetailComponent } from './hero-detail.component';
7+
// #enddocregion hero-detail-import
8+
9+
export const routes: RouterConfig = [
10+
// #docregion redirect-route
11+
{
12+
path: '',
13+
redirectTo: '/dashboard',
14+
terminal: true
15+
},
16+
// #enddocregion redirect-route
17+
// #docregion dashboard-route
18+
{
19+
path: 'dashboard',
20+
component: DashboardComponent
21+
},
22+
// #enddocregion dashboard-route
23+
// #docregion hero-detail-route
24+
{
25+
path: 'detail/:id',
26+
component: HeroDetailComponent
27+
},
28+
// #enddocregion hero-detail-route
29+
{
30+
path: 'heroes',
31+
component: HeroesComponent
32+
}
33+
];
34+
35+
export const APP_ROUTER_PROVIDERS = [
36+
provideRouter(routes)
37+
];

‎public/docs/_examples/toh-5/ts/app/app.routes.2.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
// #docregion
2+
import { provideRouter, RouterConfig } from '@angular/router';
3+
import { HeroesComponent } from './heroes.component';
4+
5+
const routes: RouterConfig = [
6+
{
7+
path: '/heroes',
8+
component: HeroesComponent
9+
}
10+
];
11+
12+
export const APP_ROUTER_PROVIDERS = [
13+
provideRouter(routes)
14+
];

‎public/docs/_examples/toh-5/ts/app/app.routes.ts

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// #docregion
2+
import { provideRouter, RouterConfig } from '@angular/router';
3+
4+
import { DashboardComponent } from './dashboard.component';
5+
import { HeroesComponent } from './heroes.component';
6+
// #docregion hero-detail-import
7+
import { HeroDetailComponent } from './hero-detail.component';
8+
// #enddocregion hero-detail-import
9+
10+
export const routes: RouterConfig = [
11+
{
12+
path: '',
13+
redirectTo: '/dashboard',
14+
terminal: true
15+
},
16+
{
17+
path: 'dashboard',
18+
component: DashboardComponent
19+
},
20+
{
21+
path: 'detail/:id',
22+
component: HeroDetailComponent
23+
},
24+
{
25+
path: 'heroes',
26+
component: HeroesComponent
27+
}
28+
];
29+
30+
export const APP_ROUTER_PROVIDERS = [
31+
provideRouter(routes)
32+
];

‎public/docs/_examples/toh-5/ts/app/dashboard.component.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
// #docregion
33
import { Component, OnInit } from '@angular/core';
44
// #docregion import-router
5-
import { Router } from '@angular/router-deprecated';
5+
import { Router } from '@angular/router';
66
// #enddocregion import-router
77

88
import { Hero } from './hero';
@@ -36,7 +36,7 @@ export class DashboardComponent implements OnInit {
3636

3737
// #docregion goto-detail
3838
gotoDetail(hero: Hero) {
39-
let link = ['HeroDetail', { id: hero.id }];
39+
let link = ['/detail', hero.id];
4040
this.router.navigate(link);
4141
}
4242
// #enddocregion goto-detail

‎public/docs/_examples/toh-5/ts/app/hero-detail.component.ts

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
// #docplaster
22
// #docregion
33
// #docregion import-oninit, v2
4-
import { Component, OnInit } from '@angular/core';
4+
import { Component, OnInit, OnDestroy } from '@angular/core';
55
// #enddocregion import-oninit
6-
// #docregion import-route-params
7-
import { RouteParams } from '@angular/router-deprecated';
8-
// #enddocregion import-route-params
6+
// #docregion import-activated-route
7+
import { ActivatedRoute } from '@angular/router';
8+
// #enddocregion import-activated-route
99

1010
import { Hero } from './hero';
1111
// #docregion import-hero-service
@@ -23,27 +23,36 @@ import { HeroService } from './hero.service';
2323
})
2424
// #enddocregion extract-template
2525
// #docregion implement
26-
export class HeroDetailComponent implements OnInit {
26+
export class HeroDetailComponent implements OnInit, OnDestroy {
2727
// #enddocregion implement
2828
hero: Hero;
29+
sub: any;
2930

3031
// #docregion ctor
3132
constructor(
3233
private heroService: HeroService,
33-
private routeParams: RouteParams) {
34+
private route: ActivatedRoute) {
3435
}
3536
// #enddocregion ctor
3637

3738
// #docregion ng-oninit
3839
ngOnInit() {
3940
// #docregion get-id
40-
let id = +this.routeParams.get('id');
41+
this.sub = this.route.params.subscribe(params => {
42+
let id = +params['id'];
43+
this.heroService.getHero(id)
44+
.then(hero => this.hero = hero);
45+
});
4146
// #enddocregion get-id
42-
this.heroService.getHero(id)
43-
.then(hero => this.hero = hero);
4447
}
4548
// #enddocregion ng-oninit
4649

50+
// #docregion ng-ondestroy
51+
ngOnDestroy() {
52+
this.sub.unsubscribe();
53+
}
54+
// #enddocregion ng-ondestroy
55+
4756
// #docregion go-back
4857
goBack() {
4958
window.history.back();

‎public/docs/_examples/toh-5/ts/app/heroes.component.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// #docplaster
22
// #docregion
33
import { Component, OnInit } from '@angular/core';
4-
import { Router } from '@angular/router-deprecated';
4+
import { Router } from '@angular/router';
55

66
import { Hero } from './hero';
77
import { HeroService } from './hero.service';
@@ -36,7 +36,7 @@ export class HeroesComponent implements OnInit {
3636
onSelect(hero: Hero) { this.selectedHero = hero; }
3737

3838
gotoDetail() {
39-
this.router.navigate(['HeroDetail', { id: this.selectedHero.id }]);
39+
this.router.navigate(['/detail', this.selectedHero.id]);
4040
}
4141
// #docregion heroes-component-renaming
4242
}

0 commit comments

Comments
 (0)