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+
}

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// #docregion
2+
import {Title, bootstrap} from 'angular2/platform/browser';
3+
import {ROUTER_PROVIDERS} from 'angular2/router';
4+
import {AppComponent} from './app.component';
5+
6+
bootstrap(AppComponent, [
7+
Title,
8+
ROUTER_PROVIDERS
9+
]);

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// #docregion
2+
import {Component} from 'angular2/core';
3+
import {Router} from 'angular2/router';
4+
5+
@Component({
6+
selector: 'navigating',
7+
template: `
8+
<h3 *ngIf="router.navigating">LOADING</h3>
9+
`
10+
})
11+
export class NavigatingComponent {
12+
constructor(public router: Router) {}
13+
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
// #docregion silent-url
2+
this._router.navigateByUrl('/unauthorized', true);
3+
// #enddocregion silent-url

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
// #docregion
2+
// #docregion silent-navigation
3+
import {Component, OnInit} from 'angular2/core';
4+
import {Router} from 'angular2/router';
5+
6+
@Component({
7+
selector: 'restricted',
8+
template: `
9+
<h3>Restricted Content</h3>
10+
11+
<div *ngIf="authorized">Here is some protected content</div>
12+
`
13+
})
14+
export class RestrictedComponent implements OnInit {
15+
authorized: boolean = false;
16+
constructor(private _router: Router) {}
17+
18+
ngOnInit() {
19+
if (!this.authorized) {
20+
// #docregion silent-navigation
21+
let unauthorizedInstruction = this._router.generate(['/Unauthorized']);
22+
23+
this._router.navigateByInstruction(unauthorizedInstruction, true);
24+
// #enddocregion silent-navigation
25+
}
26+
}
27+
}
28+
// #enddocregion silent-navigation

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// #docregion silent-navigation
2+
import {Component} from 'angular2/core';
3+
4+
@Component({
5+
selector: 'unauthorized',
6+
template: `
7+
<h2>You don't have sufficient access to this page.</h2>
8+
`
9+
})
10+
export class UnauthorizedComponent {}

‎public/docs/_examples/cb-router/ts/example-config.json

Whitespace-only changes.

‎public/docs/_examples/cb-router/ts/index.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<base href="/">
5+
<title>Routing</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<!-- #docregion style -->
8+
<link rel="stylesheet" href="styles.css">
9+
10+
<!-- #enddocregion style -->
11+
12+
<!-- IE required polyfills, in this exact order -->
13+
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
14+
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
15+
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
16+
17+
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
18+
<script src="node_modules/systemjs/dist/system.src.js"></script>
19+
<script src="node_modules/rxjs/bundles/Rx.js"></script>
20+
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
21+
<script src="node_modules/angular2/bundles/router.dev.js"></script>
22+
<script>
23+
System.config({
24+
packages: {
25+
app: {
26+
format: 'register',
27+
defaultExtension: 'js'
28+
}
29+
}
30+
});
31+
System.import('app/main')
32+
.then(null, console.error.bind(console));
33+
</script>
34+
</head>
35+
36+
<body>
37+
<my-app>Loading app...</my-app>
38+
</body>
39+
40+
</html>

‎public/docs/_examples/cb-router/ts/plnkr.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"description": "Routing Cookbook",
3+
"files":[
4+
"!**/*.d.ts",
5+
"!**/*.js",
6+
"!app/*.[1,2,3,4].*"
7+
],
8+
"tags":["cookbook", "router"]
9+
}

‎public/docs/ts/latest/cookbook/_data.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,11 @@
2626
"intro": "Render dynamic forms with NgFormModel"
2727
},
2828

29+
"router": {
30+
"title": "Routing",
31+
"intro": "Using the router navigation cycle"
32+
},
33+
2934
"set-document-title": {
3035
"title": "Set the Document Title",
3136
"intro": "Setting the document or window title using the Title service."

0 commit comments

Comments
 (0)