132 lines
3.3 KiB
TypeScript
132 lines
3.3 KiB
TypeScript
import {Component} from 'angular2/core';
|
|
import {
|
|
AsyncRoute,
|
|
Route,
|
|
Redirect,
|
|
RouteConfig,
|
|
RouteParams,
|
|
RouteData,
|
|
ROUTER_DIRECTIVES
|
|
} from 'angular2/router';
|
|
import {PromiseWrapper} from 'angular2/src/facade/async';
|
|
|
|
@Component({selector: 'hello-cmp', template: `{{greeting}}`})
|
|
export class HelloCmp {
|
|
greeting: string;
|
|
constructor() { this.greeting = 'hello'; }
|
|
}
|
|
|
|
export function helloCmpLoader() {
|
|
return PromiseWrapper.resolve(HelloCmp);
|
|
}
|
|
|
|
|
|
@Component({selector: 'user-cmp', template: `hello {{user}}`})
|
|
export class UserCmp {
|
|
user: string;
|
|
constructor(params: RouteParams) { this.user = params.get('name'); }
|
|
}
|
|
|
|
export function userCmpLoader() {
|
|
return PromiseWrapper.resolve(UserCmp);
|
|
}
|
|
|
|
|
|
@Component({
|
|
selector: 'parent-cmp',
|
|
template: `inner { <router-outlet></router-outlet> }`,
|
|
directives: [ROUTER_DIRECTIVES],
|
|
})
|
|
@RouteConfig([new Route({path: '/b', component: HelloCmp, name: 'Child'})])
|
|
export class ParentCmp {
|
|
}
|
|
|
|
export function parentCmpLoader() {
|
|
return PromiseWrapper.resolve(ParentCmp);
|
|
}
|
|
|
|
|
|
@Component({
|
|
selector: 'parent-cmp',
|
|
template: `inner { <router-outlet></router-outlet> }`,
|
|
directives: [ROUTER_DIRECTIVES],
|
|
})
|
|
@RouteConfig([new AsyncRoute({path: '/b', loader: helloCmpLoader, name: 'Child'})])
|
|
export class AsyncParentCmp {
|
|
}
|
|
|
|
export function asyncParentCmpLoader() {
|
|
return PromiseWrapper.resolve(AsyncParentCmp);
|
|
}
|
|
|
|
@Component({
|
|
selector: 'parent-cmp',
|
|
template: `inner { <router-outlet></router-outlet> }`,
|
|
directives: [ROUTER_DIRECTIVES],
|
|
})
|
|
@RouteConfig(
|
|
[new AsyncRoute({path: '/b', loader: helloCmpLoader, name: 'Child', useAsDefault: true})])
|
|
export class AsyncDefaultParentCmp {
|
|
}
|
|
|
|
export function asyncDefaultParentCmpLoader() {
|
|
return PromiseWrapper.resolve(AsyncDefaultParentCmp);
|
|
}
|
|
|
|
|
|
@Component({
|
|
selector: 'parent-cmp',
|
|
template: `inner { <router-outlet></router-outlet> }`,
|
|
directives: [ROUTER_DIRECTIVES],
|
|
})
|
|
@RouteConfig([new Route({path: '/b', component: HelloCmp, name: 'Child', useAsDefault: true})])
|
|
export class ParentWithDefaultCmp {
|
|
}
|
|
|
|
export function parentWithDefaultCmpLoader() {
|
|
return PromiseWrapper.resolve(ParentWithDefaultCmp);
|
|
}
|
|
|
|
|
|
@Component({
|
|
selector: 'team-cmp',
|
|
template: `team {{id}} | user { <router-outlet></router-outlet> }`,
|
|
directives: [ROUTER_DIRECTIVES],
|
|
})
|
|
@RouteConfig([new Route({path: '/user/:name', component: UserCmp, name: 'User'})])
|
|
export class TeamCmp {
|
|
id: string;
|
|
constructor(params: RouteParams) { this.id = params.get('id'); }
|
|
}
|
|
|
|
@Component({
|
|
selector: 'team-cmp',
|
|
template: `team {{id}} | user { <router-outlet></router-outlet> }`,
|
|
directives: [ROUTER_DIRECTIVES],
|
|
})
|
|
@RouteConfig([new AsyncRoute({path: '/user/:name', loader: userCmpLoader, name: 'User'})])
|
|
export class AsyncTeamCmp {
|
|
id: string;
|
|
constructor(params: RouteParams) { this.id = params.get('id'); }
|
|
}
|
|
|
|
export function asyncTeamLoader() {
|
|
return PromiseWrapper.resolve(AsyncTeamCmp);
|
|
}
|
|
|
|
|
|
@Component({selector: 'data-cmp', template: `{{myData}}`})
|
|
export class RouteDataCmp {
|
|
myData: boolean;
|
|
constructor(data: RouteData) { this.myData = data.get('isAdmin'); }
|
|
}
|
|
|
|
export function asyncRouteDataCmp() {
|
|
return PromiseWrapper.resolve(RouteDataCmp);
|
|
}
|
|
|
|
@Component({selector: 'redirect-to-parent-cmp', template: 'redirect-to-parent'})
|
|
@RouteConfig([new Redirect({path: '/child-redirect', redirectTo: ['../HelloSib']})])
|
|
export class RedirectToParentCmp {
|
|
}
|