Angular框架是模块化的，模块称为NgModule，一个NgModule是一个容器，用于存放一些内聚的代码。每个Angular项目至少有一个NgModule块，称为根模块，习惯上命名为AppModule，它可以包含任意深度的层次化子模块。
@NgModule()
NgModule 是一个带有 @NgModule() 装饰器的类。@NgModule() 装饰器是一个函数，它接受一个元数据对象，该对象的属性用来描述这个模块。其中最重要的属性如下。
declarations（可声明对象表） —— 声明那些属于本 NgModule 的组件、指令、管道。
exports（导出表） —— 公开其中的部分组件、指令和管道，以便其它模块中的组件模板中可以使用它们。
imports（导入表） —— 导入其它带有组件、指令和管道的模块，这些模块中的元件都是本模块所需的。
providers —— 提供一些供应用中的其它组件使用的服务。 这些服务能被本应用中的任何部分使用。
bootstrap —— 应用的主视图，称为根组件。它是应用中所有其它视图的宿主。只有根模块才应该设置这个 bootstrap 属性。
app.module.ts 文件示例
上图中@NgModule并没有exports属性，因为根模块不需要导出任何东西，其他模块也不需要导入根模块。
declarations 数组
该模块的 declarations 数组告诉 Angular 哪些组件属于该模块。 当创建更多组件时，也要把它们添加到 declarations 中。
每个组件都应该（且只能）声明（declare）在一个 NgModule类中。 如果使用了未声明过的组件，Angular 就会报错。
declarations 数组只能接受可声明对象。可声明对象包括组件、指令和管道。 一个模块的所有可声明对象都必须放在 declarations 数组中。 可声明对象必须只能属于一个模块，如果同一个类被声明在了多个模块中，编译器就会报错。
使用 declarations 数组声明指令。在模块中使用指令、组件或管道的步骤如下：
1、从你编写它的文件中导出它。
2、把它导入到适当的模块中。
3、在 @NgModule的 declarations 数组中声明它。
imports 数组
模块的 imports 数组只会出现在 @NgModule 元数据对象中。 它告诉 Angular 该模块想要正常工作，还需要导入哪些模块。 列表中的模块导出了本模块中的各个组件模板中所引用的各个组件、指令或管道。组件的模板中可以引用在当前模块中声明的或从其它模块中导入的组件、指令、管道。
providers 数组
providers 数组中列出了该应用所需的服务。当直接把服务列在这里时，它们是全应用范围的。 当你使用特性模块和惰性加载时，它们是范围化的。
bootstrap 数组
应用是通过引导根模块 AppModule 来启动的，引导过程还会创建 bootstrap 数组中列出的组件，并把它们逐个插入到浏览器的 DOM 中。 每个被引导的组件都是它自己的组件树的根。 插入一个被引导的组件通常触发一系列组件的创建并形成组件树。 虽然也可以在宿主页面中放多个组件，但是大多数应用只有一个组件树，并且只从一个根组件开始引导。 这个根组件通常叫做 AppComponent，并且位于根模块的 bootstrap 数组中。
NgModule和组件
根模块总有一个根组件，并且在引导期间创建它。任何模块都能包含任意数量的其他功能组件，这些组件会同NgModule共享一个编译环境。
模块及组件
组件及模板共同定义视图，组件还可以包含视图层次结构，它能让你定义任意复杂的屏幕区域，可以将其作为一个整体进行创建、修改和销毁。 一个视图层次结构中可以混合使用由不同 NgModule 中的组件定义的视图。
Angular常用模块
1、模块名: BrowserModule 导入路径：@angular/platform-browser 使用说明：当想要在浏览器中运行应用时
2、模块名: CommonModule 导入路径：@angular/common 使用说明：当想要使用 NgIf 和 NgFor 时
3、模块名: FormsModule 导入路径：@angular/forms 使用说明：当要构建模板驱动表单时（它包含 NgModule）
4、模块名: ReactiveFormsModule 导入路径：@angular/forms 使用说明：当要构建响应式表单时
5、模块名: RouterModule 导入路径：@angular/router 使用说明：要使用路由功能，并且你要用到 RouterLink,.forRoot() 和 .forChild() 时
6、模块名: HttpClientModule 导入路径：@angular/common/http 使用说明：当需要和服务器对话时
网友评论