本周边写项目边进一步学习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);
总结
附上官网的关键特征图:
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。