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

Commit 6efdbed

Browse files
brandonrobertsbrandonroberts
committed
docs(cookbook): Added router cookbook
1 parent c9d4050 commit 6efdbed

20 files changed

+522
-0
lines changed

‎public/docs/_examples/cb-router/e2e-spec.js

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
describe('Router Cookbook Tests', function () {
2+
3+
4+
beforeAll(function () {
5+
browser.get('');
6+
});
7+
8+
describe('Subscribing to the router', function() {
9+
// #docregion router-subscription
10+
// ...
11+
12+
it('should listen for URL updates', function () {
13+
var headers = element.all(by.className('header'));
14+
15+
expect(headers.first().getText()).toContain('/home');
16+
});
17+
// ...
18+
// #enddocregion router-subscription
19+
});
20+
21+
describe('Navigating without updating the URL', function() {
22+
// #docregion silent-navigation
23+
// ...
24+
25+
it('should update the view without updating the URL', function () {
26+
var links = element.all(by.tagName('a'));
27+
links.last().click();
28+
29+
var headers = element.all(by.className('header'));
30+
expect(headers.first().getText()).toContain('/restricted');
31+
expect(headers.last().getText()).toContain('/unauthorized');
32+
});
33+
// ...
34+
// #enddocregion silent-navigation
35+
});
36+
37+
describe('After navigation', function() {
38+
// #docregion page-title
39+
// ...
40+
41+
it('should update the browser page title', function () {
42+
var pageTitle = browser.getTitle().then(function(title) {
43+
expect(title).toBe('Home');
44+
});
45+
});
46+
// ...
47+
// #enddocregion page-title
48+
});
49+
});

‎public/docs/_examples/cb-router/ts/.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
**/*.js

‎public/docs/_examples/cb-router/ts/app/app.component.1.ts

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// #docregion
2+
import {Component} from 'angular2/core';
3+
import {Router, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
4+
import {HomeComponent} from './home.component';
5+
6+
@Component({
7+
selector: 'my-app',
8+
directives: [ROUTER_DIRECTIVES],
9+
template: `
10+
<h3 class="header">Current URL: {{ url }}</h3>
11+
<nav>
12+
<a [routerLink]="['Home']">Home</a>
13+
</nav>
14+
<router-outlet></router-outlet>
15+
`
16+
})
17+
@RouteConfig([
18+
{ path: '/home', component: HomeComponent, name: 'Home', useAsDefault: true }
19+
])
20+
export class AppComponent {
21+
url: string;
22+
constructor(router: Router) {
23+
router.subscribe((url: string) => {
24+
this.url = `/${url}`;
25+
});
26+
}
27+
}

‎public/docs/_examples/cb-router/ts/app/app.component.2.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// #docregion
2+
import {Component} from 'angular2/core';
3+
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
4+
import {HomeComponent} from './home.component';
5+
import {NavigatingComponent} from './navigating.component';
6+
7+
@Component({
8+
selector: 'my-app',
9+
directives: [ROUTER_DIRECTIVES, NavigatingComponent],
10+
template: `
11+
<navigating></navigating>
12+
<nav>
13+
<a [routerLink]="['Home']">Home</a>
14+
</nav>
15+
<router-outlet></router-outlet>
16+
`
17+
})
18+
@RouteConfig([
19+
{ path: '/home', component: HomeComponent, name: 'Home', useAsDefault: true }
20+
])
21+
export class AppComponent {}

‎public/docs/_examples/cb-router/ts/app/app.component.3.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// #docregion
2+
import {Component} from 'angular2/core';
3+
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
4+
import {HomeComponent} from './home.component';
5+
6+
@Component({
7+
selector: 'my-app',
8+
directives: [ROUTER_DIRECTIVES],
9+
template: `
10+
<router-outlet></router-outlet>
11+
`
12+
})
13+
@RouteConfig([
14+
{ path: '/home', component: HomeComponent, name: 'Home', useAsDefault: true }
15+
])
16+
export class AppComponent {}

‎public/docs/_examples/cb-router/ts/app/app.component.4.ts

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// #docregion silent-navigation
2+
import {Component} from 'angular2/core';
3+
import {Router, RouteConfig, ROUTER_DIRECTIVES, Location} from 'angular2/router';
4+
import {RestrictedComponent} from './restricted.component';
5+
import {UnauthorizedComponent} from './unauthorized.component';
6+
7+
@Component({
8+
selector: 'my-app',
9+
directives: [ROUTER_DIRECTIVES],
10+
template: `
11+
<h3 class="header">Current Path: {{ path }}</h3>
12+
<h3 class="header">Current URL: {{ url }}</h3>
13+
<nav>
14+
<a [routerLink]="['/Restricted']">Restricted</a>
15+
</nav>
16+
<router-outlet></router-outlet>
17+
`
18+
})
19+
@RouteConfig([
20+
{ path: '/restricted', component: RestrictedComponent, name: 'Restricted' },
21+
{ path: '/unauthorized', component: UnauthorizedComponent, name: 'Unauthorized' }
22+
])
23+
export class AppComponent {
24+
url: string;
25+
path: string;
26+
constructor(router: Router, location: Location) {
27+
router.subscribe((url: string) => {
28+
this.url = `${url}`;
29+
this.path = location.path();
30+
});
31+
}
32+
}

‎public/docs/_examples/cb-router/ts/app/app.component.ts

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
// #docregion
2+
import {Component} from 'angular2/core';
3+
import {Router, RouteConfig, ROUTER_DIRECTIVES, Location} from 'angular2/router';
4+
import {RestrictedComponent} from './restricted.component';
5+
import {UnauthorizedComponent} from './unauthorized.component';
6+
import {HomeComponent} from './home.component';
7+
import {NavigatingComponent} from './navigating.component';
8+
9+
@Component({
10+
selector: 'my-app',
11+
directives: [ROUTER_DIRECTIVES, NavigatingComponent],
12+
template: `
13+
<h1>Router Cookbook</h1>
14+
<navigating></navigating>
15+
<h3 class="header">Current Path: {{ path }}</h3>
16+
<h3 class="header">Current URL: {{ url }}</h3>
17+
<nav>
18+
<a [routerLink]="['Home']">Home</a>
19+
<a [routerLink]="['Restricted']">Restricted</a>
20+
</nav>
21+
<router-outlet></router-outlet>
22+
`
23+
})
24+
@RouteConfig([
25+
{ path: '/home', component: HomeComponent, name: 'Home', useAsDefault: true },
26+
{ path: '/restricted', component: RestrictedComponent, name: 'Restricted' },
27+
{ path: '/unauthorized', component: UnauthorizedComponent, name: 'Unauthorized' }
28+
])
29+
export class AppComponent {
30+
url: string;
31+
path: string;
32+
constructor(router: Router, location: Location) {
33+
router.subscribe((url: string) => {
34+
this.url = `/${url}`;
35+
this.path = location.path();
36+
});
37+
}
38+
}

‎public/docs/_examples/cb-router/ts/app/home.component.1.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// #docregion
2+
import {Component} from 'angular2/core';
3+
4+
@Component({
5+
selector: 'home',
6+
template: `
7+
<h2>Welcome Home</h2>
8+
`
9+
})
10+
export class HomeComponent {}

‎public/docs/_examples/cb-router/ts/app/home.component.2.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// #docregion
2+
import {Component} from 'angular2/core';
3+
import {OnActivate, ComponentInstruction} from 'angular2/router';
4+
5+
@Component({
6+
selector: 'home',
7+
template: `
8+
<h2>Welcome Home</h2>
9+
`
10+
})
11+
export class HomeComponent implements OnActivate {
12+
13+
routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction) {
14+
return new Promise((resolve) => {
15+
// wait 3 seconds to simulate page load
16+
setTimeout(() => {
17+
resolve();
18+
}, 3000);
19+
});
20+
}
21+
}

‎public/docs/_examples/cb-router/ts/app/home.component.ts

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
// #docplaster
2+
// #docregion
3+
// #docregion page-title
4+
import {Component} from 'angular2/core';
5+
import {OnActivate, ComponentInstruction} from 'angular2/router';
6+
// #docregion page-title
7+
import {Title} from 'angular2/platform/browser';
8+
9+
@Component({
10+
selector: 'home',
11+
template: `
12+
<h2>Welcome Home</h2>
13+
`
14+
})
15+
export class HomeComponent implements OnActivate {
16+
// #docregion page-title
17+
pageTitle: string = 'Home';
18+
19+
constructor(private _title: Title) {}
20+
21+
routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction) {
22+
// #docregion page-title
23+
this._title.setTitle(this.pageTitle);
24+
// #enddocregion page-title
25+
26+
return new Promise((resolve) => {
27+
// wait 3 seconds to simulate page load
28+
setTimeout(() => {
29+
resolve();
30+
}, 3000);
31+
});
32+
// #docregion page-title
33+
}
34+
}

0 commit comments

Comments
 (0)