乐趣区

破境Angular(三)Angular构件之模块

一、知识点
Angular 模块核心知识点如下:
1. 模块的作用。2. 模块各个元数据的含义和作用 3. 模块有哪些分类,分类原则 4. 模块的惰性加载机制 5. 开发时如何对模块进行规划
二、模块作用
首先,模块作为一个容器,有封装代码的作用,组件、指令、管道、服务的根宿主均是模块。其次,一个模块可以导入其他模块,并导出其他模块的组件、指令、管道和服务,这种导入、导出能力可以向后传递,使得后续模块不必重复导入相同的模块,例如:
1. 假设模块 A 已经导出本模块的指令和服务,使得其他模块可以使用 2. 模块 B 导入了模块 A,并导出模块 A 的指令和服务 3. 模块 C 导入模块 B 后则可以使用模块 A 的指令和服务而不需要再次导入 A 这种能力使得可以规划一个 share 模块来统一导出公共的通用构件,其他模块只需要导入 share 模块则可。
三、模块元数据
模块元数据如下:1.@NgModule 是一个装饰器,声明某个类是 Angular 模块,看起来很像 Java 的注解,但实际有很大不同,前者用于在编译期给编译器编译代码,后者用于在运行期控制代码逻辑。2.declarations: 声明属于该模块的组件、指令和管道 3.entryComponents:可以动态加载进视图的组件列表,一般是根组件 4.providers:需要提供依赖注入的服务列表 5.imports: 要导入的其他模块 6.exports: 导出的组件,指令,管道。只有先导出,其他模块再导入本模块后这些构件才能被其他模块使用。
四、模块分类
根据模块的作用不同进行模块分类有利于代码维护,Angular 模块分为以下几类:
1. 特性模块,完成特定的特性功能的模块,例如订单模块,排课模块 2. 路由特性模块,带路由的特性模块 3. 路由模块,专门实现路由功能的模块 4. 服务模块,提供公共服务的模块,如 HTTP 请求服务 5.UI 模块,用于封装公共的 UI 组件,例如表格组件,穿梭框组件。
五、惰性加载
在开发过程中经常可见惰性加载的例子,如在数据量大时,树的加载通常只加载一级节点数据,当有需要时才加载子节点数据。惰性加载的目的是缩短单次交互的时间,提升客户体验。为了避免将所有模块代码一次加载到客户端,Angular 支持模块惰性加载,只有带路由的特性模块才能惰性加载。特性加载的实现如下:
六、模块规划
在开始编写项目代码前和项目开发过程中,应先做模块规划再编写代码,而不是整个项目只有一个特性模块和一个路由模块来完成所有事情。模块规划主要参考模块分类以及单一职责原则:1. 先划分好特性,再按照特性划分特性模块 2. 每个特性的路由模块独立 3. 拆分单独的服务模块,并根据服务的作用维度不同,继续拆分和聚合 4. 拆分独立的 UI 组件模块 5. 划分需要惰性加载和急性加载的模块
.End
下期预告:【破境 Angular(四)Angular 构件之服务】
专题链接:破境 Angular(一)初识 Angular 破境 Angular(二)Angular 构件之模块

关注 Java 栈及其衍生技术,通过实战经验分享,传播 Java 栈技术和提高 Java 栈开发效率。

退出移动版