Angular 模块漫谈

Photo by Vanessa Lang on Unsplash

模块是一个 Angular 应用组织的重要一环,通过模块之间的导入导出,我们可以把复杂的功能分解到各个模块中,增强了代码的复用性可维护性。但是这也引入了一定的学习复杂度。本教程从 Angular 模块入手,将 Angular 应用组织方式和模块中资源的可见性做了详细的解释。读完本文,相信会对 Angular 有更新的认识。

约定

模块自身定义的组件、管道、指令以及服务统称为模块本身的——资源。

应用的组成

模块是如何组织本模块与外部模块资源的?我们可以仔细观察下图。

可以清楚的看到,一个 Angular 应用由多个模块构成。通过 imports 关键字,每个模块可以复用其他模块导出的资源。imports 就像针线一般将各个模块串联起来,构成一个复杂的 Angular 应用。

declarations ——本模块的资源

declarations 声明的资源其作用域被限制在本模块中。资源的拥有者模块只有使用 exports 导出了这些资源,才能被其他模块所用。

providers——服务是特殊的资源

服务是一种非常特殊的资源,它们在模块中通过 providers 关键词指定。一旦模块中创建了服务,并且被其他模块导入到了应用中,那么在应用启动时,就会在全局生命周期内生成一个单一的服务实例。

模块使用手册

你可以记住这三条原则,来决定如何使用一个模块:

一、若模块不含服务,仅包含组件 ,那么你只要在其他模块中导入它即可!

二、若模块只包含服务。如 HttpClientModule ,只需要在 AppModule 中导入一次即可。

三、若模块既包含服务又包含其他资源,那么既要在 AppModule 中导入它,又要在特性模块中导入它。

一般来说,第三类模块会提供静态方法 forRoot 和 forChild 。在 AppModule 中我们使用 forRoot 注册全局的服务示例,在特性模块中,使用 forChild 导入的组件、管道等其他资源。

常见的例子——RouterModule

我们既要 RouterModule 提供的指令 <router-outlet> 来动态生成路由页面 ,又要使用服务 ActivatedRoute 来获取路由参数或者 Resovler 数据。那么我们可以在 AppModule 中使用 forRoot 方法来获取包含服务在内的所有资源。

而在其他模块中使用 forChild 导入组件等其他资源。

参考资料

Understanding Angular modules (NgModule) and their scopes

《Angular 模块漫谈》上有2条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注