特性模块

本周边写项目边进一步学习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);

总结

附上官网的关键特征图:

官网地址