cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: router move-only

Browse Source
This commit is contained in:
Miško Hevery
2016-05-02 17:11:21 +00:00
committed by Igor Minar
parent 072446aed3
commit d930ad1816
116 changed files with 1345 additions and 1374 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
modules/@angular/examples/router_deprecated/ts/.gitkeep Normal file
View File

52
modules/@angular/examples/router_deprecated/ts/can_activate/can_activate_example.ts Normal file
View File

@ -0,0 +1,52 @@
import {provide, Component, ComponentRef} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';
import {CanActivate, RouteConfig, ComponentInstruction, ROUTER_DIRECTIVES} from '@angular/router';
import {APP_BASE_HREF} from '@angular/common';
function checkIfWeHavePermission(instruction: ComponentInstruction) {
return instruction.params['id'] == '1';
}
// #docregion canActivate
@Component({selector: 'control-panel-cmp', template: `<div>Settings: ...</div>`})
@CanActivate(checkIfWeHavePermission)
class ControlPanelCmp {
}
// #enddocregion
@Component({
selector: 'home-cmp',
template: `
<h1>Welcome Home!</h1>
<div>
Edit <a [routerLink]="['/ControlPanelCmp', {id: 1}]" id="user-1-link">User 1</a> |
Edit <a [routerLink]="['/ControlPanelCmp', {id: 2}]" id="user-2-link">User 2</a>
</div>
`,
directives: [ROUTER_DIRECTIVES]
})
class HomeCmp {
}
@Component({
selector: 'example-app',
template: `
<h1>My App</h1>
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{path: '/user-settings/:id', component: ControlPanelCmp, name: 'ControlPanelCmp'},
{path: '/', component: HomeCmp, name: 'HomeCmp'}
])
export class AppCmp {
}
export function main(): Promise<ComponentRef<AppCmp>> {
return bootstrap(
AppCmp, [provide(APP_BASE_HREF, {useValue: '/@angular/examples/router/ts/can_activate'})]);
}

36
modules/@angular/examples/router_deprecated/ts/can_activate/can_activate_spec.ts Normal file
View File

@ -0,0 +1,36 @@
import {verifyNoBrowserErrors, browser} from '@angular/platform-browser/testing_e2e';
import {expect} from '@angular/core/testing';
function waitForElement(selector: string) {
var EC = (<any>protractor).ExpectedConditions;
// Waits for the element with id 'abc' to be present on the dom.
browser.wait(EC.presenceOf($(selector)), 20000);
}
describe('reuse example app', function() {
afterEach(verifyNoBrowserErrors);
var URL = '@angular/examples/router/ts/can_activate/';
it('should navigate to user 1', function() {
browser.get(URL);
waitForElement('home-cmp');
element(by.css('#user-1-link')).click();
waitForElement('control-panel-cmp');
expect(browser.getCurrentUrl()).toMatch(/\/user-settings\/1$/);
expect(element(by.css('control-panel-cmp')).getText()).toContain('Settings');
});
it('should not navigate to user 2', function() {
browser.get(URL);
waitForElement('home-cmp');
element(by.css('#user-2-link')).click();
waitForElement('home-cmp');
expect(element(by.css('home-cmp')).getText()).toContain('Welcome Home!');
});
});

23
modules/@angular/examples/router_deprecated/ts/can_activate/index.html Normal file
View File

@ -0,0 +1,23 @@
<!doctype html>
<html>
<head>
<title>Routing canActivate Lifecycle Example</title>
<base href="/">
<script src="http://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.js"></script>
<script>System.config({ baseURL: '/', defaultJSExtensions: true});</script>
<script src="/bundle/angular2.dev.js"></script>
<script src="/bundle/router.dev.js"></script>
</head>
<body>
<example-app>
Loading...
</example-app>
<script>
var filename = '@angular/examples/router/ts/can_activate/can_activate_example';
System.import(filename).then(function(m) {
m.main();
}, console.error.bind(console));
</script>
</body>
</html>

67
modules/@angular/examples/router_deprecated/ts/can_deactivate/can_deactivate_example.ts Normal file
View File

@ -0,0 +1,67 @@
import {provide, Component, ComponentRef} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';
import {
CanDeactivate,
RouteConfig,
RouteParams,
ComponentInstruction,
ROUTER_DIRECTIVES
} from '@angular/router';
import {APP_BASE_HREF} from '@angular/common';
// #docregion routerCanDeactivate
@Component({
selector: 'note-cmp',
template: `
<div>
<h2>id: {{id}}</h2>
<textarea cols="40" rows="10"></textarea>
</div>`
})
class NoteCmp implements CanDeactivate {
id: string;
constructor(params: RouteParams) { this.id = params.get('id'); }
routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
return confirm('Are you sure you want to leave?');
}
}
// #enddocregion
@Component({
selector: 'note-index-cmp',
template: `
<h1>Your Notes</h1>
<div>
Edit <a [routerLink]="['/NoteCmp', {id: 1}]" id="note-1-link">Note 1</a> |
Edit <a [routerLink]="['/NoteCmp', {id: 2}]" id="note-2-link">Note 2</a>
</div>
`,
directives: [ROUTER_DIRECTIVES]
})
class NoteIndexCmp {
}
@Component({
selector: 'example-app',
template: `
<h1>My App</h1>
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{path: '/note/:id', component: NoteCmp, name: 'NoteCmp'},
{path: '/', component: NoteIndexCmp, name: 'NoteIndexCmp'}
])
export class AppCmp {
}
export function main(): Promise<ComponentRef<AppCmp>> {
return bootstrap(
AppCmp, [provide(APP_BASE_HREF, {useValue: '/@angular/examples/router/ts/can_deactivate'})]);
}

52
modules/@angular/examples/router_deprecated/ts/can_deactivate/can_deactivate_spec.ts Normal file
View File

@ -0,0 +1,52 @@
import {verifyNoBrowserErrors, browser} from '@angular/platform-browser/testing_e2e';
import {expect} from '@angular/core/testing';
function waitForElement(selector: string) {
var EC = (<any>protractor).ExpectedConditions;
// Waits for the element with id 'abc' to be present on the dom.
browser.wait(EC.presenceOf($(selector)), 20000);
}
function waitForAlert() {
var EC = (<any>protractor).ExpectedConditions;
browser.wait(EC.alertIsPresent(), 1000);
}
describe('can deactivate example app', function() {
afterEach(verifyNoBrowserErrors);
var URL = '@angular/examples/router/ts/can_deactivate/';
it('should not navigate away when prompt is cancelled', function() {
browser.get(URL);
waitForElement('note-index-cmp');
element(by.css('#note-1-link')).click();
waitForElement('note-cmp');
browser.navigate().back();
waitForAlert();
browser.switchTo().alert().dismiss(); // Use to simulate cancel button
expect(element(by.css('note-cmp')).getText()).toContain('id: 1');
});
it('should navigate away when prompt is confirmed', function() {
browser.get(URL);
waitForElement('note-index-cmp');
element(by.css('#note-1-link')).click();
waitForElement('note-cmp');
browser.navigate().back();
waitForAlert();
browser.switchTo().alert().accept();
waitForElement('note-index-cmp');
expect(element(by.css('note-index-cmp')).getText()).toContain('Your Notes');
});
});

24
modules/@angular/examples/router_deprecated/ts/can_deactivate/index.html Normal file
View File

@ -0,0 +1,24 @@
<!doctype html>
<html>
<head>
<title>Routing routerCanDeactivate Lifecycle Example</title>
<base href="/">
<script src="http://cdn.rawgit.com/google/traceur-compiler/90da568c7aa8e53ea362db1fc211fbb4f65b5e94/bin/traceur-runtime.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.js"></script>
<script>System.config({ baseURL: '/', defaultJSExtensions: true});</script>
<script src="/bundle/angular2.dev.js"></script>
<script src="/bundle/router.dev.js"></script>
</head>
<body>
<example-app>
Loading...
</example-app>
<script>
var filename = '@angular/examples/router/ts/can_deactivate/can_deactivate_example';
System.import(filename).then(function(m) {
m.main();
}, console.error.bind(console));
</script>
</body>
</html>

52
modules/@angular/examples/router_deprecated/ts/on_activate/on_activate_example.ts Normal file
View File

@ -0,0 +1,52 @@
import {Component, provide, ComponentRef} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';
import {OnActivate, ComponentInstruction, RouteConfig, ROUTER_DIRECTIVES} from '@angular/router';
import {APP_BASE_HREF} from '@angular/common';
// #docregion routerOnActivate
@Component({template: `Child`})
class ChildCmp {
}
@Component({
template: `
<h2>Parent</h2> (<router-outlet></router-outlet>)
<p>{{log}}</p>`,
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([{path: '/child', name: 'Child', component: ChildCmp}])
class ParentCmp implements OnActivate {
log: string = '';
routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction) {
this.log = `Finished navigating from "${prev ? prev.urlPath : 'null'}" to "${next.urlPath}"`;
return new Promise(resolve => {
// The ChildCmp gets instantiated only when the Promise is resolved
setTimeout(() => resolve(null), 1000);
});
}
}
// #enddocregion
@Component({
selector: 'example-app',
template: `
<h1>My app</h1>
<nav>
<a [routerLink]="['Parent', 'Child']">Child</a>
</nav>
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([{path: '/parent/...', name: 'Parent', component: ParentCmp}])
export class AppCmp {
}
export function main(): Promise<ComponentRef<AppCmp>> {
return bootstrap(
AppCmp, [provide(APP_BASE_HREF, {useValue: '/@angular/examples/router/ts/on_activate'})]);
}

24
modules/@angular/examples/router_deprecated/ts/on_deactivate/index.html Normal file
View File

@ -0,0 +1,24 @@
<!doctype html>
<html>
<head>
<title>Routing Reuse Lifecycle Example</title>
<base href="/">
<script src="http://cdn.rawgit.com/google/traceur-compiler/90da568c7aa8e53ea362db1fc211fbb4f65b5e94/bin/traceur-runtime.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.js"></script>
<script>System.config({ baseURL: '/', defaultJSExtensions: true});</script>
<script src="/bundle/angular2.dev.js"></script>
<script src="/bundle/router.dev.js"></script>
</head>
<body>
<example-app>
Loading...
</example-app>
<script>
var filename = '@angular/examples/router/ts/on_deactivate/on_deactivate_example';
System.import(filename).then(function(m) {
m.main();
}, console.error.bind(console));
</script>
</body>
</html>

58
modules/@angular/examples/router_deprecated/ts/on_deactivate/on_deactivate_example.ts Normal file
View File

@ -0,0 +1,58 @@
import {Component, Injectable, provide, ComponentRef} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';
import {OnDeactivate, ComponentInstruction, RouteConfig, ROUTER_DIRECTIVES} from '@angular/router';
import {APP_BASE_HREF} from '@angular/common';
@Injectable()
export class LogService {
logs: string[] = [];
addLog(message: string): void { this.logs.push(message); }
}
// #docregion routerOnDeactivate
@Component({selector: 'my-cmp', template: `<div>hello</div>`})
class MyCmp implements OnDeactivate {
constructor(private logService: LogService) {}
routerOnDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
this.logService.addLog(
`Navigating from "${prev ? prev.urlPath : 'null'}" to "${next.urlPath}"`);
}
}
// #enddocregion
@Component({
selector: 'example-app',
template: `
<h1>My App</h1>
<nav>
<a [routerLink]="['/HomeCmp']" id="home-link">Navigate Home</a> |
<a [routerLink]="['/ParamCmp', {param: 1}]" id="param-link">Navigate with a Param</a>
</nav>
<router-outlet></router-outlet>
<div id="log">
<h2>Log:</h2>
<p *ngFor="let logItem of logService.logs">{{ logItem }}</p>
</div>
`,
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{path: '/', component: MyCmp, name: 'HomeCmp'},
{path: '/:param', component: MyCmp, name: 'ParamCmp'}
])
export class AppCmp {
constructor(public logService: LogService) {}
}
export function main(): Promise<ComponentRef<AppCmp>> {
return bootstrap(AppCmp, [
provide(APP_BASE_HREF, {useValue: '/@angular/examples/router/ts/on_deactivate'}),
LogService
]);
}

32
modules/@angular/examples/router_deprecated/ts/on_deactivate/on_deactivate_spec.ts Normal file
View File

@ -0,0 +1,32 @@
import {verifyNoBrowserErrors, browser} from '@angular/platform-browser/testing_e2e';
import {expect} from '@angular/core/testing';
function waitForElement(selector: string) {
var EC = (<any>protractor).ExpectedConditions;
// Waits for the element with id 'abc' to be present on the dom.
browser.wait(EC.presenceOf($(selector)), 20000);
}
describe('on activate example app', function() {
afterEach(verifyNoBrowserErrors);
var URL = '@angular/examples/router/ts/on_deactivate/';
it('should update the text when navigating between routes', function() {
browser.get(URL);
waitForElement('my-cmp');
expect(element(by.css('#log')).getText()).toEqual('Log:');
element(by.css('#param-link')).click();
waitForElement('my-cmp');
expect(element(by.css('#log')).getText()).toEqual('Log:\nNavigating from "" to "1"');
browser.navigate().back();
waitForElement('my-cmp');
expect(element(by.css('#log')).getText())
.toEqual('Log:\nNavigating from "" to "1"\nNavigating from "./1" to ""');
});
});

24
modules/@angular/examples/router_deprecated/ts/reuse/index.html Normal file
View File

@ -0,0 +1,24 @@
<!doctype html>
<html>
<head>
<title>Routing Reuse Lifecycle Example</title>
<base href="/">
<script src="http://cdn.rawgit.com/google/traceur-compiler/90da568c7aa8e53ea362db1fc211fbb4f65b5e94/bin/traceur-runtime.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.js"></script>
<script>System.config({ baseURL: '/', defaultJSExtensions: true});</script>
<script src="/bundle/angular2.dev.js"></script>
<script src="/bundle/router.dev.js"></script>
</head>
<body>
<example-app>
Loading...
</example-app>
<script>
var filename = '@angular/examples/router/ts/reuse/reuse_example';
System.import(filename).then(function(m) {
m.main();
}, console.error.bind(console));
</script>
</body>
</html>

57
modules/@angular/examples/router_deprecated/ts/reuse/reuse_example.ts Normal file
View File

@ -0,0 +1,57 @@
import {Component, provide, ComponentRef} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';
import {
RouteConfig,
ComponentInstruction,
ROUTER_DIRECTIVES,
CanReuse,
RouteParams,
OnReuse
} from '@angular/router';
import {APP_BASE_HREF} from '@angular/common';
// #docregion reuseCmp
@Component({
selector: 'my-cmp',
template: `
<div>hello {{name}}!</div>
<div>message: <input id="message"></div>
`
})
class MyCmp implements CanReuse,
OnReuse {
name: string;
constructor(params: RouteParams) { this.name = params.get('name') || 'NOBODY'; }
routerCanReuse(next: ComponentInstruction, prev: ComponentInstruction) { return true; }
routerOnReuse(next: ComponentInstruction, prev: ComponentInstruction) {
this.name = next.params['name'];
}
}
// #enddocregion
@Component({
selector: 'example-app',
template: `
<h1>Say hi to...</h1>
<a [routerLink]="['/HomeCmp', {name: 'naomi'}]" id="naomi-link">Naomi</a> |
<a [routerLink]="['/HomeCmp', {name: 'brad'}]" id="brad-link">Brad</a>
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{path: '/', component: MyCmp, name: 'HomeCmp'},
{path: '/:name', component: MyCmp, name: 'HomeCmp'}
])
export class AppCmp {
}
export function main(): Promise<ComponentRef<AppCmp>> {
return bootstrap(AppCmp,
[provide(APP_BASE_HREF, {useValue: '/@angular/examples/router/ts/reuse'})]);
}

36
modules/@angular/examples/router_deprecated/ts/reuse/reuse_spec.ts Normal file
View File

@ -0,0 +1,36 @@
import {verifyNoBrowserErrors, browser} from '@angular/platform-browser/testing_e2e';
import {expect} from '@angular/core/testing';
function waitForElement(selector: string) {
var EC = (<any>protractor).ExpectedConditions;
// Waits for the element with id 'abc' to be present on the dom.
browser.wait(EC.presenceOf($(selector)), 20000);
}
describe('reuse example app', function() {
afterEach(verifyNoBrowserErrors);
var URL = '@angular/examples/router/ts/reuse/';
it('should build a link which points to the detail page', function() {
browser.get(URL);
waitForElement('my-cmp');
element(by.css('#naomi-link')).click();
waitForElement('my-cmp');
expect(browser.getCurrentUrl()).toMatch(/\/naomi$/);
// type something into input
element(by.css('#message')).sendKeys('long time no see!');
// navigate to Brad
element(by.css('#brad-link')).click();
waitForElement('my-cmp');
expect(browser.getCurrentUrl()).toMatch(/\/brad$/);
// check that typed input is the same
expect(element(by.css('#message')).getAttribute('value')).toEqual('long time no see!');
});
});