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

refactor(router): take advantage of the new way of configuring modules

This commit is contained in:
vsavkin 2016-07-27 09:54:19 -07:00
parent ba88db5141
commit 9d9e9c6ff1
11 changed files with 83 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
modules/@angular/router/index.ts
View File

@ -14,7 +14,7 @@ export {RouterLinkActive} from './src/directives/router_link_active';
export {RouterOutlet} from './src/directives/router_outlet';
export {CanActivate, CanActivateChild, CanDeactivate, CanLoad, Resolve} from './src/interfaces';
export {Event, NavigationCancel, NavigationEnd, NavigationError, NavigationExtras, NavigationStart, Router, RoutesRecognized} from './src/router';
export {ROUTER_DIRECTIVES, RouterModule, RouterModuleWithoutProviders} from './src/router_module';
export {ROUTER_DIRECTIVES, RouterModule} from './src/router_module';
export {RouterOutletMap} from './src/router_outlet_map';
export {provideRouter} from './src/router_providers';
export {ActivatedRoute, ActivatedRouteSnapshot, RouterState, RouterStateSnapshot} from './src/router_state';

9
modules/@angular/router/src/common_router_providers.ts
View File

@ -21,7 +21,10 @@ export const ROUTER_CONFIGURATION = new OpaqueToken('ROUTER_CONFIGURATION');
/**
* @experimental
*/
export interface ExtraOptions { enableTracing?: boolean; }
export interface ExtraOptions {
enableTracing?: boolean;
useHash?: boolean;
}
export function setupRouter(
ref: ApplicationRef, resolver: ComponentResolver, urlSerializer: UrlSerializer,
@ -126,7 +129,7 @@ export function provideRouter(routes: Routes, config: ExtraOptions): any[] {
* }
* ```
*
* @experimental
* @deprecated
*/
export function provideRoutes(routes: Routes): any {
return [
@ -149,7 +152,7 @@ export function provideRoutes(routes: Routes): any {
* }
* ```
*
* @experimental
* @deprecated
*/
export function provideRouterConfig(config: ExtraOptions): any {
return {provide: ROUTER_CONFIGURATION, useValue: config};

3
modules/@angular/router/src/directives/router_link.ts
View File

@ -130,9 +130,6 @@ export class RouterLinkWithHref implements OnChanges, OnDestroy {
urlTree: UrlTree;
/**
* @internal
*/
constructor(
private router: Router, private route: ActivatedRoute,
private locationStrategy: LocationStrategy) {

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

@ -6,10 +6,11 @@
* found in the LICENSE file at https://angular.io/license
*/
import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
import {ApplicationRef, ComponentResolver, Injector, NgModule, NgModuleFactoryLoader, OpaqueToken, SystemJsNgModuleLoader} from '@angular/core';
import {HashLocationStrategy, Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
import {ApplicationRef, ComponentResolver, Injector, ModuleWithProviders, NgModule, NgModuleFactoryLoader, OpaqueToken, SystemJsNgModuleLoader} from '@angular/core';
import {ROUTER_CONFIGURATION, rootRoute, setupRouter} from './common_router_providers';
import {ExtraOptions, ROUTER_CONFIGURATION, provideRouterConfig, provideRoutes, rootRoute, setupRouter} from './common_router_providers';
import {Routes} from './config';
import {RouterLink, RouterLinkWithHref} from './directives/router_link';
import {RouterLinkActive} from './directives/router_link_active';
import {RouterOutlet} from './directives/router_outlet';
@ -26,9 +27,17 @@ import {DefaultUrlSerializer, UrlSerializer} from './url_tree';
*/
export const ROUTER_DIRECTIVES = [RouterOutlet, RouterLink, RouterLinkWithHref, RouterLinkActive];
const pathLocationStrategy = {
provide: LocationStrategy,
useClass: PathLocationStrategy
};
const hashLocationStrategy = {
provide: LocationStrategy,
useClass: HashLocationStrategy
};
export const ROUTER_PROVIDERS: any[] = [
Location, {provide: LocationStrategy, useClass: PathLocationStrategy},
{provide: UrlSerializer, useClass: DefaultUrlSerializer}, {
Location, {provide: UrlSerializer, useClass: DefaultUrlSerializer}, {
provide: Router,
useFactory: setupRouter,
deps: [
@ -41,41 +50,36 @@ export const ROUTER_PROVIDERS: any[] = [
{provide: ROUTER_CONFIGURATION, useValue: {enableTracing: false}}
];
/**
* Router module to be used for lazy loaded parts.
* Router module.
*
* When registered at the root, it should be used as follows:
*
* ### Example
*
* ```
* bootstrap(AppCmp, {imports: [RouterModule.forRoot(ROUTES)]});
* ```
*
* For lazy loaded modules it should be used as follows:
*
* ### Example
*
* ```
* @NgModule({
* imports: [RouterModuleWithoutProviders]
* imports: [RouterModule.forChild(CHILD_ROUTES)]
* })
* class TeamsModule {}
* ```
*
* @experimental We will soon have a way for the `RouterModule` to be imported with and without a
* provider,
* and then this module will be removed.
*/
@NgModule({declarations: ROUTER_DIRECTIVES, exports: ROUTER_DIRECTIVES})
export class RouterModuleWithoutProviders {
}
/**
* Router module.
*
* ### Example
*
* ```
* bootstrap(AppCmp, {modules: [RouterModule]});
* class Lazy {}
* ```
*
* @experimental
*/
@NgModule({exports: [RouterModuleWithoutProviders], providers: ROUTER_PROVIDERS})
@NgModule({declarations: ROUTER_DIRECTIVES, exports: ROUTER_DIRECTIVES})
export class RouterModule {
constructor(private injector: Injector) {
// do the initialization only once
if ((<any>injector).parent.get(RouterModule, null)) return;
setTimeout(() => {
const appRef = injector.get(ApplicationRef);
if (appRef.componentTypes.length == 0) {
@ -85,4 +89,18 @@ export class RouterModule {
}
}, 0);
}
static forRoot(routes: Routes, config?: ExtraOptions): ModuleWithProviders {
return {
ngModule: RouterModule,
providers: [
ROUTER_PROVIDERS, provideRoutes(routes), config ? provideRouterConfig(config) : [],
config.useHash ? hashLocationStrategy : pathLocationStrategy
]
};
}
static forChild(routes: Routes): ModuleWithProviders {
return {ngModule: RouterModule, providers: [provideRoutes(routes)]};
}
}

24
modules/@angular/router/test/router.spec.ts
View File

@ -15,7 +15,7 @@ import {expect} from '@angular/platform-browser/testing/matchers';
import {Observable} from 'rxjs/Observable';
import {of } from 'rxjs/observable/of';
import {ActivatedRoute, ActivatedRouteSnapshot, CanActivate, CanDeactivate, Event, NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Params, ROUTER_DIRECTIVES, Resolve, Router, RouterModuleWithoutProviders, RouterStateSnapshot, RoutesRecognized, provideRoutes} from '../index';
import {ActivatedRoute, ActivatedRouteSnapshot, CanActivate, CanDeactivate, Event, NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Params, ROUTER_DIRECTIVES, Resolve, Router, RouterModule, RouterStateSnapshot, RoutesRecognized, provideRoutes} from '../index';
import {RouterTestingModule, SpyNgModuleFactoryLoader} from '../testing';
describe('Integration', () => {
@ -1202,8 +1202,8 @@ describe('Integration', () => {
@NgModule({
declarations: [LazyLoadedComponent],
providers: [provideRoutes([{path: 'loaded', component: LazyLoadedComponent}])],
imports: [RouterModuleWithoutProviders],
imports:
[RouterModule.forChild([{path: 'loaded', component: LazyLoadedComponent}])],
entryComponents: [LazyLoadedComponent]
})
class LoadedModule {
@ -1388,12 +1388,11 @@ describe('Integration', () => {
@NgModule({
declarations: [ParentLazyLoadedComponent, ChildLazyLoadedComponent],
providers: [provideRoutes([{
imports: [RouterModule.forChild([{
path: 'loaded',
component: ParentLazyLoadedComponent,
children: [{path: 'child', component: ChildLazyLoadedComponent}]
}])],
imports: [RouterModuleWithoutProviders],
entryComponents: [ParentLazyLoadedComponent, ChildLazyLoadedComponent]
})
class LoadedModule {
@ -1429,15 +1428,12 @@ describe('Integration', () => {
@NgModule({
entryComponents: [LazyLoadedComponent],
declarations: [LazyLoadedComponent],
imports: [RouterModuleWithoutProviders],
providers: [
LazyLoadedService, provideRoutes([{
path: '',
canActivate: ['alwaysTrue'],
children: [{path: 'loaded', component: LazyLoadedComponent}]
}]),
{provide: 'alwaysTrue', useValue: () => true}
]
imports: [RouterModule.forChild([{
path: '',
canActivate: ['alwaysTrue'],
children: [{path: 'loaded', component: LazyLoadedComponent}]
}])],
providers: [LazyLoadedService, {provide: 'alwaysTrue', useValue: () => true}]
})
class LoadedModule {
}

3
modules/@angular/router/testing/router_testing_module.ts
View File

@ -12,7 +12,7 @@ import {Compiler, ComponentResolver, Injectable, Injector, NgModule, NgModuleFac
import {Router, RouterOutletMap, Routes, UrlSerializer} from '../index';
import {ROUTES} from '../src/router_config_loader';
import {RouterModule} from '../src/router_module';
import {ROUTER_PROVIDERS, RouterModule} from '../src/router_module';
@ -64,6 +64,7 @@ function setupTestingRouter(
@NgModule({
exports: [RouterModule],
providers: [
ROUTER_PROVIDERS,
{provide: Location, useClass: SpyLocation},
{provide: LocationStrategy, useClass: MockLocationStrategy},
{provide: NgModuleFactoryLoader, useClass: SpyNgModuleFactoryLoader},

10
modules/playground/src/routing/app/inbox-app.ts
View File

@ -7,7 +7,7 @@
*/
import {Component, Injectable} from '@angular/core';
import {ROUTER_DIRECTIVES, ActivatedRoute, Router} from '@angular/router';
import {ActivatedRoute, Router} from '@angular/router';
import * as db from './data';
import {Location} from '@angular/common';
import {PromiseWrapper, PromiseCompleter} from '@angular/core/src/facade/async';
@ -89,7 +89,7 @@ export class DbService {
}
}
@Component({selector: 'inbox', templateUrl: 'app/inbox.html', directives: ROUTER_DIRECTIVES})
@Component({selector: 'inbox', templateUrl: 'app/inbox.html'})
export class InboxCmp {
private items: InboxRecord[] = [];
private ready: boolean = false;
@ -116,7 +116,7 @@ export class InboxCmp {
}
@Component({selector: 'drafts', templateUrl: 'app/drafts.html', directives: ROUTER_DIRECTIVES})
@Component({selector: 'drafts', templateUrl: 'app/drafts.html'})
export class DraftsCmp {
private items: InboxRecord[] = [];
private ready: boolean = false;
@ -138,8 +138,6 @@ export const ROUTER_CONFIG = [
@Component({
selector: 'inbox-app',
viewProviders: [DbService],
templateUrl: 'app/inbox-app.html',
directives: ROUTER_DIRECTIVES
templateUrl: 'app/inbox-app.html'
})
export class InboxApp {}

6
modules/playground/src/routing/app/inbox-detail.ts
View File

@ -7,12 +7,12 @@
*/
import {Component, NgModule} from '@angular/core';
import {ROUTER_DIRECTIVES, ActivatedRoute, provideRoutes} from '@angular/router';
import {ActivatedRoute, RouterModule} from '@angular/router';
import {PromiseWrapper} from '@angular/core/src/facade/async';
import {InboxRecord, DbService} from './inbox-app';
@Component(
{selector: 'inbox-detail', directives: ROUTER_DIRECTIVES, templateUrl: 'app/inbox-detail.html'})
{selector: 'inbox-detail', templateUrl: 'app/inbox-detail.html'})
export class InboxDetailCmp {
private record: InboxRecord = new InboxRecord();
private ready: boolean = false;
@ -26,6 +26,6 @@ export class InboxDetailCmp {
@NgModule({
declarations: [InboxDetailCmp],
providers: [provideRoutes([{path: ':id', component: InboxDetailCmp}])]
imports: [RouterModule.forChild([{path: ':id', component: InboxDetailCmp}])]
})
export default class InboxDetailModule {}

9
modules/playground/src/routing/index.ts
View File

@ -6,18 +6,17 @@
* found in the LICENSE file at https://angular.io/license
*/
import {InboxApp, InboxCmp, DraftsCmp, ROUTER_CONFIG} from './app/inbox-app';
import {InboxApp, InboxCmp, DraftsCmp, DbService, ROUTER_CONFIG} from './app/inbox-app';
import {bootstrap} from '@angular/platform-browser-dynamic';
import {HashLocationStrategy, LocationStrategy} from '@angular/common';
import {provideRoutes, RouterModule} from '@angular/router';
import {RouterModule} from '@angular/router';
export function main() {
bootstrap(InboxApp, {
providers: [
provideRoutes(ROUTER_CONFIG),
{provide: LocationStrategy, useClass: HashLocationStrategy}
DbService
],
declarations: [InboxCmp, DraftsCmp],
imports: [RouterModule]
imports: [RouterModule.forRoot(ROUTER_CONFIG, {useHash: true})]
});
}

4
modules/playground/src/web_workers/router/index_common.ts
View File

@ -29,8 +29,8 @@ export const ROUTES = [
];
@NgModule({
imports: [WorkerAppModule, RouterModule],
providers: [provideRoutes(ROUTES), WORKER_APP_LOCATION_PROVIDERS, {provide: LocationStrategy, useClass: HashLocationStrategy}],
imports: [WorkerAppModule, RouterModule.forRoot(ROUTES, {useHash: true})],
providers: [WORKER_APP_LOCATION_PROVIDERS],
entryComponents: [App],
declarations: [App, Start, Contact, About]
})

12
tools/public_api_guard/router/index.d.ts vendored
View File

@ -56,6 +56,7 @@ export declare type Event = NavigationStart | NavigationEnd | NavigationCancel |
/** @experimental */
export interface ExtraOptions {
enableTracing?: boolean;
useHash?: boolean;
}
/** @stable */
@ -112,10 +113,10 @@ export declare const PRIMARY_OUTLET: string;
/** @experimental */
export declare function provideRouter(config: Routes, opts?: ExtraOptions): any[];
/** @experimental */
/** @deprecated */
export declare function provideRouterConfig(config: ExtraOptions): any;
/** @experimental */
/** @deprecated */
export declare function provideRoutes(routes: Routes): any;
/** @experimental */
@ -198,6 +199,7 @@ export declare class RouterLinkWithHref implements OnChanges, OnDestroy {
};
target: string;
urlTree: UrlTree;
constructor(router: Router, route: ActivatedRoute, locationStrategy: LocationStrategy);
ngOnChanges(changes: {}): any;
ngOnDestroy(): any;
onClick(button: number, ctrlKey: boolean, metaKey: boolean): boolean;
@ -206,10 +208,8 @@ export declare class RouterLinkWithHref implements OnChanges, OnDestroy {
/** @experimental */
export declare class RouterModule {
constructor(injector: Injector);
}
/** @experimental */
export declare class RouterModuleWithoutProviders {
static forChild(routes: Routes): ModuleWithProviders;
static forRoot(routes: Routes, config?: ExtraOptions): ModuleWithProviders;
}
/** @stable */