模块(Modules)
Angular使用模块来组织代码。它们不应与Typescript/JavaScript模块混淆（请参见Typescript主题）。Angular模块收集组件、指令和管道。它还使用导入和导出元素来指定应该包括在此模块中的哪个模块，并向其他模块提供什么接口（导出）。
每个Angular应用程序至少有一个称为根模块的模块。它指定了在应用程序启动时应该使用bootstrap元素启动的组件。例如，以下是我们上面讨论的简单应用程序的根模块（在app.module.ts中找到）。
Angular中的Modules（模块）是一种组织和管理应用程序代码的机制。模块有助于将相关的功能和代码封装成一个可重用的单元，以便在应用的不同部分之间共享和使用。
Angular中的模块有两种类型：根模块（Root Module）和特性模块（Feature Module）。
1. 根模块（Root Module）：根模块是Angular应用程序的入口点。它通常是一个使用@NgModule装饰器装饰的类，该装饰器接受一个元数据对象，用于配置模块的属性和依赖项。根模块负责引导应用程序，声明应用程序需要的组件、指令、管道和服务。
2. 特性模块（Feature Module）：特性模块用于组织和管理应用程序的功能。一个特性模块通常包含一组相关的组件、指令、管道、服务和其他类，它们共同实现一项特定的功能。特性模块可以被其他模块引入，并通过导出它们的类来共享功能。
在模块中，可以使用@NgModule装饰器来定义模块的元数据。这个装饰器接受一个元数据对象，用于配置模块的属性和依赖项。模块的元数据对象可以包含以下属性：
- declarations：声明本模块中的组件、指令和管道。
- imports：导入其他模块的列表，以便在本模块中使用其提供的功能。
- exports：导出本模块中的组件、指令和管道，以便其他模块可以使用。
- providers：在本模块中注册的服务提供者。
- bootstrap：用于定义根模块的根组件。
除了以上这些属性，模块还可以包含其他的配置项，以定义模块的行为和特性。
通过使用模块，可以将应用程序代码分解为多个功能模块，提高了代码的可维护性和可重用性。每个模块可以独立开发、测试和维护，并可以在需要时方便地添加或删除。同时，模块还可以帮助开发团队进行合作开发，提高开发效率。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
关于这个声明有几点需要注意：
- Angular ng命令的最新版本会自动添加大多数系统导入，因此您的代码可能会有所不同。以下几点适用于上述基本代码。
- 有两种不同类型的导入。前三行指定了Typescript导入语句，以导入Typescript代码以允许声明模块。JavaScript对象中的imports元素是Angular模块导入。在这种情况下，它仅导入了使用上述Typescript导入导入的BrowserModule的代码。
- @NgModule装饰器用于为后面的AppModule类声明添加元数据。这些是Angular的"模块"。
- JavaScript对象的declarations元素指定在此模块中声明的组件。在Angular中，这些组件被称为视图，组件是视图的一种类型，我们将在后面看到其它类型，如管道和指令。在这种情况下，它是上面组件部分中描述的AppComponent组件。
- bootstrap元素指示AppComponent是在应用程序首次加载时应该初始化的组件。大多数应用程序只会有一个引导组件。
- 在此示例中，AppModule类为空，但在更复杂的情况下，它将包含变量。编码约定是将组件命名为xxxModule，并将其定义放在名为xxx.module.ts的文件中，其中xxx是模块的名称。
请注意上述解释。组件和模块不是同一概念。组件是Angular模块，负责管理屏幕上的一个区域。组件始终具有选择器和模板元素，正如我们在前面的部分中讨论的那样。这意味着组件是一种特殊类型的模块。我们将在以后遇到其他类型的模块。
JavaScript对象给予@NgModule装饰器的另外两个元素是可以插入的。我们可以指定exports和services。上面的示例中没有exports，因为应用程序没有其他需要导入此模块的模块。此应用程序中也没有服务。以后我们将看到这两个的示例。
在以前的活动中，我们故意没有实现标记，因为它需要导入Angular表单模块。下面的代码展示了如何在我们的app.module.ts文件中导入Angular表单模块，以允许我们在标记中使用Angular代码。其他的Angular模块也需要以完全相同的方式导入。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
请再次注意，我们必须在两个地方指定导入的模块。第一个是Typescript导入，然后是Angular导入，两者都以粗体字显示。
