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

docs(router): Added additional router documentation including cheatsheet updates (#10802)

Browse Source
This commit is contained in:
Brandon
2016-08-19 17:48:09 -05:00
committed by Kara
parent 917d43e108
commit cc0e3d2296
5 changed files with 342 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
modules/@angular/router/src/config.ts
View File

@ -9,6 +9,7 @@
import {Type} from '@angular/core';
import {Observable} from 'rxjs/Observable';
/**
* `Routes` is an array of route configurations. Each one has the following properties:
*

293
modules/@angular/router/src/interfaces.ts
View File

@ -22,34 +22,48 @@ import {ActivatedRouteSnapshot, RouterStateSnapshot} from './router_state';
* class CanActivateTeam implements CanActivate {
* constructor(private permissions: Permissions, private currentUser: UserToken) {}
*
* canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):Observable<boolean> {
* return this.permissions.canActivate(this.currentUser, this.route.params.id);
* canActivate(
* route: ActivatedRouteSnapshot,
* state: RouterStateSnapshot
* ): Observable<boolean>|Promise<boolean>|boolean {
* return this.permissions.canActivate(this.currentUser, route.params.id);
* }
* }
*
* bootstrap(AppComponent, [
* CanActivateTeam,
*
* provideRouter([{
* path: 'team/:id',
* component: Team,
* canActivate: [CanActivateTeam]
* }])
* ]);
* @NgModule({
* imports: [
* RouterModule.forRoot([
* {
* path: 'team/:id',
* component: TeamCmp,
* canActivate: [CanActivateTeam]
* }
* ])
* ],
* providers: [CanActivateTeam]
* })
* ```
*
* You can also provide a function with the same signature instead of the class:
*
* ```
* bootstrap(AppComponent, [
* {provide: 'canActivateTeam', useValue: (route: ActivatedRouteSnapshot, state:
* RouterStateSnapshot) => true},
* provideRouter([{
* path: 'team/:id',
* component: Team,
* canActivate: ['canActivateTeam']
* }])
* ]);
* @NgModule({
* imports: [
* RouterModule.forRoot([
* {
* path: 'team/:id',
* component: TeamCmp,
* canActivate: ['canActivateTeam']
* }
* ])
* ],
* providers: [
* {
* provide: 'canActivateTeam',
* useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => true
* }
* ]
* })
* ```
*
* @stable
@ -69,47 +83,58 @@ export interface CanActivate {
* class CanActivateTeam implements CanActivate {
* constructor(private permissions: Permissions, private currentUser: UserToken) {}
*
* canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):Observable<boolean>
* {
* canActivateChild(
* route: ActivatedRouteSnapshot,
* state: RouterStateSnapshot
* ): Observable<boolean>|Promise<boolean>|boolean {
* return this.permissions.canActivate(this.currentUser, route.params.id);
* }
* }
*
* bootstrap(AppComponent, [
* CanActivateTeam,
*
* provideRouter([
* {
* path: 'root',
* canActivateChild: [CanActivateTeam],
* children: [
* {
* path: 'team/:id',
* component: Team
* }
* ]
* }
* ]);
* @NgModule({
* imports: [
* RouterModule.forRoot([
* {
* path: 'root',
* canActivateChild: [CanActivateTeam],
* children: [
* {
* path: 'team/:id',
* component: Team
* }
* ]
* }
* ])
* ],
* providers: [CanActivateTeam]
* })
* ```
*
* You can also provide a function with the same signature instead of the class:
*
* ```
* bootstrap(AppComponent, [
* {provide: 'canActivateTeam', useValue: (route: ActivatedRouteSnapshot, state:
* RouterStateSnapshot) => true},
* provideRouter([
* @NgModule({
* imports: [
* RouterModule.forRoot([
* {
* path: 'root',
* canActivateChild: ['canActivateTeam'],
* children: [
* {
* path: 'team/:id',
* component: Team
* }
* ]
* }
* ])
* ],
* providers: [
* {
* path: 'root',
* canActivateChild: ['canActivateTeam'],
* children: [
* {
* path: 'team/:id',
* component: Team
* }
* ]
* }
* ]);
* provide: 'canActivateTeam',
* useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => true
* }
* ]
* })
* ```
*
* @stable
@ -127,37 +152,52 @@ export interface CanActivateChild {
*
* ```
* @Injectable()
* class CanDeactivateTeam implements CanDeactivate {
* class CanDeactivateTeam implements CanDeactivate<TeamComponent> {
* constructor(private permissions: Permissions, private currentUser: UserToken) {}
*
* canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):Observable<boolean> {
* canDeactivate(
* component: TeamComponent,
* route: ActivatedRouteSnapshot,
* state: RouterStateSnapshot
* ): Observable<boolean>|Promise<boolean>|boolean {
* return this.permissions.canDeactivate(this.currentUser, route.params.id);
* }
* }
*
* bootstrap(AppComponent, [
* CanDeactivateTeam,
*
* provideRouter([{
* path: 'team/:id',
* component: Team,
* canDeactivate: [CanDeactivateTeam]
* }])
* ]);
* @NgModule({
* imports: [
* RouterModule.forRoot([
* {
* path: 'team/:id',
* component: TeamCmp,
* canDeactivate: [CanDeactivateTeam]
* }
* ])
* ],
* providers: [CanDeactivateTeam]
* })
* ```
*
* You can also provide a function with the same signature instead of the class:
*
* ```
* bootstrap(AppComponent, [
* {provide: 'canDeactivateTeam', useValue: (route: ActivatedRouteSnapshot, state:
* RouterStateSnapshot) => true},
* provideRouter([{
* path: 'team/:id',
* component: Team,
* canActivate: ['canDeactivateTeam']
* }])
* ]);
* @NgModule({
* imports: [
* RouterModule.forRoot([
* {
* path: 'team/:id',
* component: TeamCmp,
* canActivate: ['canDeactivateTeam']
* }
* ])
* ],
* providers: [
* {
* provide: 'canDeactivateTeam',
* useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => true
* }
* ]
* })
* ```
*
* @stable
@ -174,29 +214,56 @@ export interface CanDeactivate<T> {
*
* ```
* @Injectable()
* class TeamResolver implements Resolve {
* class TeamResolver implements Resolve<Team> {
* constructor(private backend: Backend) {}
*
* resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):Observable<any> {
* return this.backend.fetchTeam(this.route.params.id);
* resolve(
* route: ActivatedRouteSnapshot,
* state: RouterStateSnapshot
* ): Observable<any>|Promise<any>|any {
* return this.backend.fetchTeam(route.params.id);
* }
* }
*
* bootstrap(AppComponent, [
* TeamResolver,
*
* provideRouter([{
* path: 'team/:id',
* component: TeamCmp,
* resolve: {
* team: TeamResolver
* }
* }])
* ]);
* @NgModule({
* imports: [
* RouterModule.forRoot([
* {
* path: 'team/:id',
* component: TeamCmp,
* resolve: {
* team: TeamResolver
* }
* }
* ])
* ],
* providers: [TeamResolver]
* })
* ```
*
* You can also provide a function with the same signature instead of the class.
*
* ```
* @NgModule({
* imports: [
* RouterModule.forRoot([
* {
* path: 'team/:id',
* component: TeamCmp,
* resolve: {
* team: 'teamResolver'
* }
* }
* ])
* ],
* providers: [
* {
* provide: 'teamResolver',
* useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => 'team'
* }
* ]
* })
* ```
* @stable
*/
export interface Resolve<T> {
@ -215,37 +282,51 @@ export interface Resolve<T> {
* class CanLoadTeamSection implements CanLoad {
* constructor(private permissions: Permissions, private currentUser: UserToken) {}
*
* canLoad(route: Route):Observable<boolean> {
* canLoad(route: Route(
* route: Route
* ): Observable<boolean>|Promise<boolean>|boolean {
* return this.permissions.canLoadChildren(this.currentUser, route);
* }
* }
*
* bootstrap(AppComponent, [
* CanLoadTeamSection,
*
* provideRouter([{
* path: 'team/:id',
* component: Team,
* loadChildren: 'team.js',
* canLoad: [CanLoadTeamSection]
* }])
* ]);
* @NgModule({
* imports: [
* RouterModule.forRoot([
* {
* path: 'team/:id',
* component: TeamCmp,
* loadChildren: 'team.js',
* canLoad: [CanLoadTeamSection]
* }
* ])
* ],
* providers: [CanLoadTeamSection]
* })
* ```
*
* You can also provide a function with the same signature instead of the class:
*
* ```
* bootstrap(AppComponent, [
* {provide: 'canLoadTeamSection', useValue: (route: Route) => true},
* provideRouter([{
* path: 'team/:id',
* component: Team,
* loadChildren: 'team.js',
* canLoad: ['canLoadTeamSection']
* }])
* ]);
* @NgModule({
* imports: [
* RouterModule.forRoot([
* {
* path: 'team/:id',
* component: TeamCmp,
* loadChildren: 'team.js',
* canLoad: ['canLoadTeamSection']
* }
* ])
* ],
* providers: [
* {
* provide: 'canLoadTeamSection',
* useValue: (route: Route) => true
* }
* ]
* })
* ```
*
* @stable
*/
export interface CanLoad { canLoad(route: Route): Observable<boolean>|Promise<boolean>|boolean; }
export interface CanLoad { canLoad(route: Route): Observable<boolean>|Promise<boolean>|boolean; }

83
modules/@angular/router/src/router.ts
View File

@ -40,12 +40,95 @@ declare var Zone: any;
* @experimental
*/
export interface NavigationExtras {
/**
* Enables relative navigation from the current ActivatedRoute
*
* Configuration
*
* ```
* [{
* path: 'parent',
* component: ParentComponent,
* children: [
* {
* path: 'list',
* component: ListComponent
* },
* {
* path: 'child',
* component: ChildComponent
* }
* ]
* }]
* ```
*
* Navigate to list route from child route
*
* ```
* @Component({...})
* class ChildComponent {
* constructor(private router: Router, private route: ActivatedRoute) {}
*
* go() {
* this.router.navigate('../list', { relativeTo: this.route });
* }
* }
* ```
*/
relativeTo?: ActivatedRoute;
/**
* Sets query parameters to the URL
*
* ```
* // Navigate to /results?page=1
* this.router.navigate('/results', { queryParams: { page: 1 } });
* ```
*/
queryParams?: Params;
/**
* Sets the hash fragment for the URL
*
* ```
* // Navigate to /results#top
* this.router.navigate('/results', { fragment: 'top' });
* ```
*/
fragment?: string;
/**
* Preserves the query parameters for the next navigation
*
* ```
* // Preserve query params from /results?page=1 to /view?page=1
* this.router.navigate('/view', { preserveQueryParams: true });
* ```
*/
preserveQueryParams?: boolean;
/**
* Preserves the fragment for the next navigation
*
* ```
* // Preserve fragment from /results#top to /view#top
* this.router.navigate('/view', { preserveFragment: true });
* ```
*/
preserveFragment?: boolean;
/**
* Navigates without pushing a new state into history
*
* ```
* // Navigate silently to /view
* this.router.navigate('/view', { skipLocationChange: true });
* ```
*/
skipLocationChange?: boolean;
/**
* Navigates while replacing the current state in history
*
* ```
* // Navigate to /view
* this.router.navigate('/view', { replaceUrl: true });
* ```
*/
replaceUrl?: boolean;
}

4
modules/@angular/router/src/router_module.ts
View File

@ -66,7 +66,7 @@ export const ROUTER_PROVIDERS: any[] = [
* bootstrap(AppCmp, {imports: [RouterModule.forRoot(ROUTES)]});
* ```
*
* For lazy loaded modules it should be used as follows:
* For submodules and lazy loaded submodules it should be used as follows:
*
* ### Example
*
@ -167,4 +167,4 @@ export function provideRouterInitializer() {
useFactory: initialRouterNavigation,
deps: [Router]
};
}
}