Angular6学习笔记15：核心知识-模块（NgModule）

短命女 2022-05-08 07:42 174阅读 0赞

# 模块（NgModule） #

继学习笔记14，可以大概的知道Angular的大概架构，现在在一一深入了解。

Angular的应用，会将整个应用进行模块化处理，即：将一个应用分成几个模块，一个应用，至少有一个模块（AppModule-根模块），简答的讲，一个模块，就是一个容器，存放一些内聚的代码块，这些代码块专注于某个应用领域、某个工作流或一组紧密相关的功能。 它可以包含一些组件、服务提供商或其它代码文件，其作用域由包含它们的 NgModule 定义。 它还可以导入一些由其它模块中导出的功能，并导出一些指定的功能供其它 NgModule 使用。

每个 Angular 应用都至少有一个 NgModule 类，也就是[根模块][Link 1]，它习惯上命名为 `AppModule`，并位于一个名叫 `app.module.ts` 的文件中。*引导*这个根模块就可以启动你的应用。在一般一个小应用中，可能只包含一个模块，但是通常情况下，一个应用可能会有很多特性模块，应用的*根模块*之所以叫根模块，是因为它可以包含任意深度的层次化子模块。

每个 Angular 应用都至少有一个 NgModule 类，也就是[根模块][Link 1]，它习惯上命名为 `AppModule`，并位于一个名叫 `app.module.ts` 的文件中。*引导*这个根模块就可以启动你的应用。

虽然小型的应用可能只有一个 NgModule，不过大多数应用都会有很多*特性模块*。应用的*根模块*之所以叫根模块，是因为它可以包含任意深度的层次化子模块。

## `@NgModule` 元数据 ##

NgModule 是一个带有 `@NgModule` 装饰器的类。`@NgModule` 装饰器是一个函数，它接受一个元数据对象，该对象的属性用来描述这个模块。其中最重要的属性如下。

*  `declarations`（可声明对象表） —— 那些属于本 NgModule 的[组件][Link 2]、*指令*、*管道*。
 *  `exports`（导出表） —— 那些能在其它模块的*组件模板*中使用的可声明对象的子集。
 *  `imports`（导入表） —— 那些导出了*本*模块中的组件模板所需的类的其它模块。
 *  `providers` —— 本模块向全局服务中贡献的那些[服务][Link 3]的创建器。 这些服务能被本应用中的任何部分使用。（你也可以在组件级别指定服务提供商，这通常是首选方式。）
 *  `bootstrap` —— 应用的主视图，称为*根组件*。它是应用中所有其它视图的宿主。只有*根模块*才应该设置这个 `bootstrap` 属性。

## NgModule 和组件 ##

NgModule 为其中的组件提供了一个*编译上下文环境*。根模块总会有一个根组件，并在引导期间创建它。 但是，任何模块都能包含任意数量的其它组件，这些组件可以通过路由器加载，也可以通过模板创建。那些属于这个 NgModule 的组件会共享同一个编译上下文环境。组件及其模板共同定义*视图*。组件还可以包含*视图层次结构*，它能让你定义任意复杂的屏幕区域，可以将其作为一个整体进行创建、修改和销毁。 一个视图层次结构中可以混合使用由不同 NgModule 中的组件定义的视图。 这种情况很常见，特别是对一些 UI 库来说。

当你创建一个组件时，它直接与一个叫做*宿主视图*的视图关联起来。 宿主视图可以是视图层次结构的根，该视图层次结构可以包含一些*内嵌视图*，这些内嵌视图又是其它组件的宿主视图。 这些组件可以位于相同的 NgModule 中，也可以从其它 NgModule 中导入。 树中的视图可以嵌套到任意深度。

![View hierarchy][]

## NgModule 和 JavaScript 的模块 ##

NgModule 系统与 JavaScript（ES2015）用来管理 JavaScript 对象的模块系统不同，而且也没有直接关联。 这两种模块系统不同但*互补*。你可以使用它们来共同编写你的应用。

JavaScript 中，每个*文件*是一个模块，文件中定义的所有对象都从属于那个模块。 通过 `export` 关键字，模块可以把它的某些对象声明为公共的。 其它 JavaScript 模块可以使用*import 语句*来访问这些公共对象。

[Link 1]: https://www.angular.cn/guide/bootstrapping
[Link 2]: https://www.angular.cn/guide/architecture-components
[Link 3]: https://www.angular.cn/guide/architecture-services
[View hierarchy]: https://www.angular.cn/generated/images/guide/architecture/view-hierarchy.png