docs(router): improve documentation for router bindings
This commit is contained in:
parent
c01f327194
commit
8a2370750a
|
@ -31,33 +31,101 @@ import {Location} from './src/router/location';
|
||||||
import {bind, OpaqueToken, Binding} from './core';
|
import {bind, OpaqueToken, Binding} from './core';
|
||||||
import {CONST_EXPR, Type} from './src/core/facade/lang';
|
import {CONST_EXPR, Type} from './src/core/facade/lang';
|
||||||
|
|
||||||
export const ROUTER_PRIMARY_COMPONENT: OpaqueToken =
|
|
||||||
CONST_EXPR(new OpaqueToken('RouterPrimaryComponent'));
|
|
||||||
|
|
||||||
export const ROUTER_DIRECTIVES: any[] = CONST_EXPR([RouterOutlet, RouterLink]);
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* A list of {@link Binding}. To use the router, you must add this to your application.
|
* Token used to bind the component with the top-level {@link RouteConfig}s for the
|
||||||
|
* application.
|
||||||
*
|
*
|
||||||
* ## Example
|
* You can use the {@link routerBindings} function in your {@link bootstrap} bindings to
|
||||||
|
* simplify setting up these bindings.
|
||||||
|
*
|
||||||
|
* ## Example ([live demo](http://plnkr.co/edit/iRUP8B5OUbxCWQ3AcIDm))
|
||||||
|
*
|
||||||
|
* ```
|
||||||
|
* import {Component, View} from 'angular2/angular2';
|
||||||
|
* import {
|
||||||
|
* ROUTER_DIRECTIVES,
|
||||||
|
* ROUTER_BINDINGS,
|
||||||
|
* ROUTER_PRIMARY_COMPONENT,
|
||||||
|
* RouteConfig
|
||||||
|
* } from 'angular2/router';
|
||||||
*
|
*
|
||||||
* ```typescript
|
|
||||||
* @Component({...})
|
* @Component({...})
|
||||||
* @View({directives: [ROUTER_DIRECTIVES]})
|
* @View({directives: [ROUTER_DIRECTIVES]})
|
||||||
* @RouteConfig([
|
* @RouteConfig([
|
||||||
* new Route(...),
|
* {...},
|
||||||
* ])
|
* ])
|
||||||
* class AppCmp {
|
* class AppCmp {
|
||||||
* constructor(router: Router, location: Location) {
|
* // ...
|
||||||
* // ...
|
|
||||||
* }
|
|
||||||
*
|
|
||||||
* }
|
* }
|
||||||
*
|
*
|
||||||
|
* bootstrap(AppCmp, [
|
||||||
|
* ROUTER_BINDINGS,
|
||||||
|
* bind(ROUTER_PRIMARY_COMPONENT).toValue(AppCmp)
|
||||||
|
* ]);
|
||||||
|
* ```
|
||||||
|
*/
|
||||||
|
export const ROUTER_PRIMARY_COMPONENT: OpaqueToken =
|
||||||
|
CONST_EXPR(new OpaqueToken('RouterPrimaryComponent'));
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A list of directives. To use the router directives like {@link RouterOutlet} and
|
||||||
|
* {@link RouterLink}, add this to your `directives` array in the {@link View} decorator of your
|
||||||
|
* component.
|
||||||
|
*
|
||||||
|
* ## Example ([live demo](http://plnkr.co/edit/iRUP8B5OUbxCWQ3AcIDm))
|
||||||
|
*
|
||||||
|
* ```
|
||||||
|
* import {Component, View} from 'angular2/angular2';
|
||||||
|
* import {ROUTER_DIRECTIVES, routerBindings, RouteConfig} from 'angular2/router';
|
||||||
|
*
|
||||||
|
* @Component({...})
|
||||||
|
* @View({directives: [ROUTER_DIRECTIVES]})
|
||||||
|
* @RouteConfig([
|
||||||
|
* {...},
|
||||||
|
* ])
|
||||||
|
* class AppCmp {
|
||||||
|
* // ...
|
||||||
|
* }
|
||||||
*
|
*
|
||||||
* bootstrap(AppCmp, [routerBindings(AppCmp)]);
|
* bootstrap(AppCmp, [routerBindings(AppCmp)]);
|
||||||
* ```
|
* ```
|
||||||
*/
|
*/
|
||||||
|
export const ROUTER_DIRECTIVES: any[] = CONST_EXPR([RouterOutlet, RouterLink]);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A list of {@link Binding}s. To use the router, you must add this to your application.
|
||||||
|
*
|
||||||
|
* Note that you also need to bind to {@link ROUTER_PRIMARY_COMPONENT}.
|
||||||
|
*
|
||||||
|
* You can use the {@link routerBindings} function in your {@link bootstrap} bindings to
|
||||||
|
* simplify setting up these bindings.
|
||||||
|
*
|
||||||
|
* ## Example ([live demo](http://plnkr.co/edit/iRUP8B5OUbxCWQ3AcIDm))
|
||||||
|
*
|
||||||
|
* ```
|
||||||
|
* import {Component, View} from 'angular2/angular2';
|
||||||
|
* import {
|
||||||
|
* ROUTER_DIRECTIVES,
|
||||||
|
* ROUTER_BINDINGS,
|
||||||
|
* ROUTER_PRIMARY_COMPONENT,
|
||||||
|
* RouteConfig
|
||||||
|
* } from 'angular2/router';
|
||||||
|
*
|
||||||
|
* @Component({...})
|
||||||
|
* @View({directives: [ROUTER_DIRECTIVES]})
|
||||||
|
* @RouteConfig([
|
||||||
|
* {...},
|
||||||
|
* ])
|
||||||
|
* class AppCmp {
|
||||||
|
* // ...
|
||||||
|
* }
|
||||||
|
*
|
||||||
|
* bootstrap(AppCmp, [
|
||||||
|
* ROUTER_BINDINGS,
|
||||||
|
* bind(ROUTER_PRIMARY_COMPONENT).toValue(AppCmp)
|
||||||
|
* ]);
|
||||||
|
* ```
|
||||||
|
*/
|
||||||
export const ROUTER_BINDINGS: any[] = CONST_EXPR([
|
export const ROUTER_BINDINGS: any[] = CONST_EXPR([
|
||||||
RouteRegistry,
|
RouteRegistry,
|
||||||
CONST_EXPR(new Binding(LocationStrategy, {toClass: PathLocationStrategy})),
|
CONST_EXPR(new Binding(LocationStrategy, {toClass: PathLocationStrategy})),
|
||||||
|
@ -74,6 +142,28 @@ function routerFactory(registry, location, primaryComponent) {
|
||||||
return new RootRouter(registry, location, primaryComponent);
|
return new RootRouter(registry, location, primaryComponent);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A list of {@link Binding}s. To use the router, you must add these bindings to
|
||||||
|
* your application.
|
||||||
|
*
|
||||||
|
* ## Example ([live demo](http://plnkr.co/edit/iRUP8B5OUbxCWQ3AcIDm))
|
||||||
|
*
|
||||||
|
* ```
|
||||||
|
* import {Component, View} from 'angular2/angular2';
|
||||||
|
* import {ROUTER_DIRECTIVES, routerBindings, RouteConfig} from 'angular2/router';
|
||||||
|
*
|
||||||
|
* @Component({...})
|
||||||
|
* @View({directives: [ROUTER_DIRECTIVES]})
|
||||||
|
* @RouteConfig([
|
||||||
|
* {...},
|
||||||
|
* ])
|
||||||
|
* class AppCmp {
|
||||||
|
* // ...
|
||||||
|
* }
|
||||||
|
*
|
||||||
|
* bootstrap(AppCmp, [routerBindings(AppCmp)]);
|
||||||
|
* ```
|
||||||
|
*/
|
||||||
export function routerBindings(primaryComponent: Type): Array<any> {
|
export function routerBindings(primaryComponent: Type): Array<any> {
|
||||||
return [ROUTER_BINDINGS, bind(ROUTER_PRIMARY_COMPONENT).toValue(primaryComponent)];
|
return [ROUTER_BINDINGS, bind(ROUTER_PRIMARY_COMPONENT).toValue(primaryComponent)];
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue