特性模塊

本週邊寫項目邊進一步學習angular，主要側重看了模塊這一部分，以前沒怎麼看懂，這裏寫下本身的學習理解。

特性模塊概念

特性模塊提供了聚焦於特定應用需求的一組功能，好比用戶工做流、路由或表單。 雖然你也能夠用根模塊作完全部事情，不過特性模塊能夠幫助你把應用劃分紅一些聚焦的功能區。特性模塊經過它提供的服務以及共享出的組件、指令和管道來與根模塊和其它模塊合做。

特性模塊其實就是把一個大的系統分紅一份份的模塊，分別專一與服務,路由，共享組件，還有特定的領域這些方面，把他們組合在一塊兒就足以構成一個功能完善的webapp，之因此把它劃分，是由於可以讓咱們專一與各個領域詳細開發，方便維護。

特性模塊的分類

特性模塊分爲五個部分:

• 領域特性模塊。
• 帶路由的特性模塊。
• 路由模塊。
• 服務特性模塊
• 可視部件特性模塊。

領域特性模塊

領域特性模塊就是用來提供應用程序中某個領域獨特的用戶體驗，就比如教師模塊專一與教師，學院模塊專一與管理學院.一般它們會有跟多declarations的組件,但應該只有一個頂級組件來充當根組件並把他導出，供外部使用。
好比我如今建立一個TeacherModule,聲明以下:

@NgModule({
  declarations: [TeacherListComponent, TeacherSearchComponent, TeacherIndexComponent],
  imports: [
    CommonModule
  ]
})
export class TeacherModule { }

這個模塊包含teacher列表組件用來展現教師數據,還有一個TeacherSearch組件來搜索教師,用index組件來作根組件,在teacherIndex組件中使用teacherList和teacherSearch組件:

<p>
  teacher-index works!
  <app-teacher-search></app-teacher-search>
  <app-teacher-list></app-teacher-list>
</p>

再將teacherIndex組件導出，做爲teacherModule的根組件:

@NgModule({
  declarations: [TeacherListComponent, TeacherSearchComponent, TeacherIndexComponent],
  imports: [
    CommonModule
  ],
  exports: [TeacherIndexComponent]
})
export class TeacherModule {
}

在AppModule導入咱們的領域模塊TeacherModule,並在AppComponent裏使用teacher-index組件:

@NgModule({
  declarations: [
    AppComponent,
    MainComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    TeacherModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

<app-teacher-index></app-teacher-index>

效果如圖:

咱們只暴露了一個teacherIndex組件給根模塊使用,關於教師的展現，搜索組件都是在咱們本身的teacherModule中定義的,也就是TeacherModule專一於Teacher領域，而根模塊並不須要知道怎麼實現的，這就把應用劃分爲了一個個的領域模塊了.
特性模塊不該該有本身的服務提供商，除非須要，服務提供商應該註冊在根模塊上.

帶路由的特性模塊

帶路由的特性模塊是一種特殊的領域特性模塊，但它的頂層組件會做爲路由導航時的目標組件。全部的惰性加載模塊都是帶路由的特性模塊.
在上面那個例子中，咱們的模塊直接導入了AppModule中，這個就是急性加載了，咱們能夠經過配置模塊的路由實現惰性加載。
咱們先配置AppRoutingModule的路由:

const routes: Routes = [
  {
    path: 'teacher',
    loadChildren: './teacher/teacher.module#TeacherModule'
  }
];

咱們配置這樣一條路由，當路由爲teacher路徑時，去加載./teacher/teacher.module文件的TeacherModule模塊,所以當路徑爲teacher時angular就會將咱們的TeacherModule加載進來了,爲此，咱們不須要導入TeacherModule,而且TeacherModue也不須要導出任何的根組件:

// AppModule中刪除導入的TeacherModule
@NgModule({
  declarations: [
    AppComponent,
    MainComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}
//TeacehrModule中取消導出index組件 惰性加載模塊並不須要導出組件
@NgModule({
  declarations: [TeacherListComponent, TeacherSearchComponent, TeacherIndexComponent],
  imports: [
    CommonModule
  ],
})
export class TeacherModule {
}
//AppComponent中將<app-teacher-index>改爲路由出口
<router-outlet></router-outlet>

以後咱們在配置TeacherModule的路由:

const routes: Routes = [
  {
    path: '',
    component: TeacherIndexComponent
  }
];


@NgModule({
  declarations: [],
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [RouterModule]
})
export class TeacherRoutingModule { }

注意，這裏使用RouterModule.forChild()，使TeacherModule不覆蓋根模塊的路由服務.
在TeacherModule中導入路由配置:

const routes: Routes = [
  {
    path: '',
    component: TeacherIndexComponent
  }
];


@NgModule({
  declarations: [],
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [RouterModule]
})
export class TeacherRoutingModule { }

這樣，當路由爲teacher的時候顯示的內容就和以前的同樣，區別在於咱們並無在根模塊中導入TeacherModule,教師模塊是在路由爲teacher時才被導入的AppModule當中，完成了惰性加載.

路由模塊

路由模塊爲其它模塊提供路由配置，而且把路由這個關注點從它的配套模塊中分離出來.如上已經展現，它包含的功能有:

• 定義路由
• 把路由配置添加到該模塊的 imports 中
• 把路由守衛和解析器的服務提供商添加到該模塊的 providers 中

服務模塊

服務模塊提供了一些工具服務，好比數據訪問和消息。理論上，它們應該是徹底由服務提供商組成的，不該該有可聲明對象,一般服務都應該註冊在根模塊，要是創建服務模塊的話，應該只由根模塊導入.

窗口部件模塊

窗口部件模塊通常提供共享的組件、指令和管道。不少第三方 UI 組件庫都是窗口部件模塊.咱們要想進行組件的共享，都應該能將它獨立出來放在窗口部件模塊，而不依賴與某個特性領域模塊。
窗口組件模塊不該該有服務提供商，而且都應導出大部分可聲明對象(declarations);

總結

附上官網的關鍵特徵圖:

官網地址