原文链接&＃xff1a;https://angular-2-training-book.rangle.io/handout/modules/introduction.html

在Angular中&＃xff0c;模块是一种用于组合相关联组件&＃xff0c;指令&＃xff0c;管道和服务的机制&＃xff0c;可以与其他模块组合以创建应用程序。 一个Angular应用程序可以被认为是一个拼图&＃xff0c;每个部分&＃xff08;或每个模块&＃xff09;能够看到完整的图片。

为了理解&＃xff0c;我们可以将Angular模块比作是类。 在一个类中&＃xff0c;我们可以定义公共或私有方法。 公共方法是我们代码的其他部分可以使用它与之交互的API&＃xff0c;而私有方法是隐藏的实现细节。 同样&＃xff0c;模块可以导出或隐藏组件&＃xff0c;指令&＃xff0c;管道和服务。 导出的元素意图被其他模块使用&＃xff0c;而未导出&＃xff08;隐藏&＃xff09;的元素仅在模块本身内部使用&＃xff0c;不能被我们应用程序的其他模块直接访问。

模块的基本使用

为了能够定义模块&＃xff0c;我们必须使用装饰器 NgModule.

import { NgModule } from &＃39;&＃64;angular/core&＃39;;&＃64;NgModule({imports: [ ... ],declarations: [ ... ],bootstrap: [ ... ]
})
export class AppModule { }


在上面的例子中&＃xff0c;我们已经通过使用NgModule装饰器将AppModule 类转换为Angular模块。NgModule装饰器至少需要三个属性&＃xff1a;imports, declarations 和bootstrap.

属性imports需要一个模块数组。 这里我们定义了我们的拼图图片&＃xff08;我们的应用程序所需模块&＃xff09;。 属性declarations需要一个组件&＃xff0c;指令和管道数组作为模块的一部分。 bootstrap属性是我们定义模块的根组件的地方。 即使这个属性也是一个数组&＃xff0c;99&＃xff05;的时候我们只定义一个组件。

有些非常特殊的情况&＃xff0c;可能需要多个组件来引导模块&＃xff0c;但我们不会在这里讨论这些个别情况。

以下是仅由一个组件构成的基本模块&＃xff0c;如下所示&＃xff1a;

app/app.component.ts

import { Component } from &＃39;&＃64;angular/core&＃39;;&＃64;Component({selector: &＃39;app-root&＃39;,template: &＃39;

hello world

app/app.module.ts

import { NgModule } from &＃39;&＃64;angular/core&＃39;;
import { BrowserModule } from &＃39;&＃64;angular/platform-browser&＃39;;import { AppComponent } from &＃39;./app.component&＃39;;&＃64;NgModule({imports: [BrowserModule],declarations: [AppComponent],bootstrap: [AppComponent]
})
export class AppModule { }


文件app.component.ts只是一个“你好世界”的组件&＃xff0c;没有什么特别的。 另一方面&＃xff0c;文件app.module.ts遵循我们之前看过的用于定义模块的结构&＃xff0c;但在这种情况下&＃xff0c;我们正在定义要使用的模块和组件。

我们注意到的第一件事是我们的模块导入BrowserModule作为显式依赖。BrowserModule是一个内置的模块&＃xff0c;用于导出基本的指令&＃xff0c;管道和服务。 与以前的Angular版本不同&＃xff0c;我们必须明确导入这些依赖关系&＃xff0c;以便在我们的模板中使用*ngFor 或*ngIf 等指令。

鉴于我们模块的根&＃xff08;而且仅有的&＃xff09;组件是AppComponent &＃xff0c;我们必须在 bootstrap数组中列出它。 因为在declarations属性中&＃xff0c;我们应该定义构成应用程序的所有组件或管道&＃xff0c;我们必须再次定义AppComponent 。

在继续之前&＃xff0c;有一个重要的澄清要做。 存在两种类型的模块&＃xff0c;根模块和功能模块 。

以同样的方式&＃xff0c;在一个模块中&＃xff0c;我们有一个根组件和许多可能的辅助组件&＃xff0c; 在应用程序中&＃xff0c;我们只有一个根模块和零个或许多功能模块 。 为了能够引导我们的应用程序&＃xff0c;Angular需要知道哪个是根模块。 识别根模块的简单方法是查看其NgModule装饰器的 imports 属性。 如果模块导入BrowserModule那么它是一个根模块&＃xff0c;如果正在导入CommonModule那么它是一个功能模块。

作为开发人员&＃xff0c;我们需要注意在根模块中导入BrowserModule &＃xff0c;而是在为同一应用程序创建的任何其他模块中导入CommonModule 。 如果不这样做&＃xff0c;可能会导致在使用延迟加载的模块时遇到问题&＃xff0c;我们将在以下部分中看到。

根据惯例&＃xff0c;根模块应该始终被命名为AppModule 。

引导应用程序

为了引导我们基于模块的应用程序&＃xff0c;我们需要通知Angular哪个是我们的根模块来在浏览器中执行编译。 这个在浏览器中的编译也称为“即时”&＃xff08;JIT&＃xff09;编译。

main.ts

import { platformBrowserDynamic } from &＃39;&＃64;angular/platform-browser-dynamic&＃39;;
import { AppModule } from &＃39;./app/app.module&＃39;;platformBrowserDynamic().bootstrapModule(AppModule);


还可以执行编译作为我们工作流的构建步骤。 这种方法称为“Ahead of Time”&＃xff08;AOT&＃xff09;编译&＃xff0c;并且将需要稍微不同的引导过程&＃xff0c;我们将在另一部分中讨论。

查看示例

在下一节中&＃xff0c;我们将看到如何创建具有多个组件&＃xff0c;服务和管道的模块。