angular2.0定义单独的路由模块

在/app目录新建一个文件，名叫app-routing.module.ts。路由模块将导入RouterModule令牌，并配置路由。 我们遵循文件名约定，并命名Angular模块为AppRoutingModule。

和app.module.ts中一样，导入CrisisListComponent和HeroListComponent组件。 然后在路由模块中导入Router和路由配置（RouterModule.forRoot）。

同时导出AppRoutingModule，这样我们可以将它添加到AppModule的imports中。

最后，重新导出RouterModule，这样，特征模块在使用路由模块时，将获得路由指令。

下面是首个路由模块：

app/app-routing.module.ts (excerpt)

COPY CODE

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { CrisisListComponent }  from './crisis-list.component';
import { HeroListComponent }    from './hero-list.component';

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'heroes', component: HeroListComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {}

接下来，我们将更新app.module.ts文件，从app-routing.module.ts中导入AppRoutingModule令牌， 并用它替换RouterModule.forRoot。

app/app.module.ts (excerpt)

COPY CODE

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';

import { AppComponent }     from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { CrisisListComponent }  from './crisis-list.component';
import { HeroListComponent }    from './hero-list.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule
  ],
  declarations: [
    AppComponent,
    HeroListComponent,
    CrisisListComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

应用继续正常运行，我们可以把路由模块作为为每个特征模块维护路由配置的中心地方