iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

doc(Router): improve the example for routerOnActivate

This commit is contained in:
Victor Berchet 2016-03-24 17:39:31 -07:00 committed by Kara Erickson
parent 9bdd5951d9
commit a0387d2835
3 changed files with 22 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
modules/angular2/examples/router/ts/on_activate/index.html
View File

@ -1,24 +0,0 @@
<!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 = 'angular2/examples/router/ts/on_activate/on_activate_example';
System.import(filename).then(function(m) {
m.main();
}, console.error.bind(console));
</script>
</body>
</html>

34
modules/angular2/examples/router/ts/on_activate/on_activate_example.ts
View File

@ -8,14 +8,28 @@ import {
APP_BASE_HREF APP_BASE_HREF
} from 'angular2/router'; } from 'angular2/router';
// #docregion routerOnActivate // #docregion routerOnActivate
@Component({selector: 'my-cmp', template: `<div>routerOnActivate: {{log}}</div>`}) @Component({template: `Child`})
class MyCmp implements OnActivate { 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 = ''; log: string = '';
routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction) { routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction) {
this.log = `Finished navigating from "${prev ? prev.urlPath : 'null'}" to "${next.urlPath}"`; 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 // #enddocregion
@ -24,23 +38,19 @@ class MyCmp implements OnActivate {
@Component({ @Component({
selector: 'example-app', selector: 'example-app',
template: ` template: `
<h1>My App</h1> <h1>My app</h1>
<nav> <nav>
<a [routerLink]="['/HomeCmp']" id="home-link">Navigate Home</a> | <a [routerLink]="['Parent', 'Child']">Child</a>
<a [routerLink]="['/ParamCmp', {param: 1}]" id="param-link">Navigate with a Param</a>
</nav> </nav>
<router-outlet></router-outlet> <router-outlet></router-outlet>
`, `,
directives: [ROUTER_DIRECTIVES] directives: [ROUTER_DIRECTIVES]
}) })
@RouteConfig([ @RouteConfig([{path: '/parent/...', name: 'Parent', component: ParentCmp}])
{path: '/', component: MyCmp, name: 'HomeCmp'}, export class AppCmp {
{path: '/:param', component: MyCmp, name: 'ParamCmp'}
])
class AppCmp {
} }
export function main() { export function main() {
return bootstrap( return bootstrap(
AppCmp, [provide(APP_BASE_HREF, {useValue: '/angular2/examples/router/ts/on_activate'})]); AppCmp, [provide(APP_BASE_HREF, {useValue: '/angular2/examples/router/ts/on_activate'})]);

34
modules/angular2/examples/router/ts/on_activate/on_activate_spec.ts
View File

@ -1,34 +0,0 @@
import {verifyNoBrowserErrors, browser} from 'angular2/src/testing/e2e_util';
import {expect} from 'angular2/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 = 'angular2/examples/router/ts/on_activate/';
it('should update the text when navigating between routes', function() {
browser.get(URL);
waitForElement('my-cmp');
expect(element(by.css('my-cmp')).getText())
.toContain('routerOnActivate: Finished navigating from "null" to ""');
element(by.css('#param-link')).click();
waitForElement('my-cmp');
expect(element(by.css('my-cmp')).getText())
.toContain('routerOnActivate: Finished navigating from "" to "1"');
browser.navigate().back();
waitForElement('my-cmp');
expect(element(by.css('my-cmp')).getText())
.toContain('routerOnActivate: Finished navigating from "1" to ""');
});
});