Angular8 实战（十九）模块的概念

本章学习Angular中的模块

Angular官网解释翻译

Angular 应用是模块化的，它拥有自己的模块化系统，称作 NgModule。 一个 NgModule 就是一个容器，用于存放一些内聚的代码块，这些代码块专注于某个应用领域、某个工作流或一组紧密相关的功能。 它可以包含一些组件、服务提供者或其它代码文件，其作用域由包含它们的 NgModule 定义。 它还可以导入一些由其它模块中导出的功能，并导出一些指定的功能供其它 NgModule 使用

模块的组成部分：组件、服务、指令、管道等。从某种角度说，它像一个小型的应用。
它的作用是让我们的程序更有序，功能放在相应的模块中，更容易维护，协作也更方便。

以我们的示例为例，就可以简单的以底部的菜单栏来划分模块。当然也可以以其它维度来划分或者再细分模块。

19-1.png

为什么要用NgModule？
当我们编写C#任何类时，我们使用命名空间对它们进行分组；那么，在Angular中，这里的NgModule被用于相同的目的——对所属的组件、服务等进行分组。

如何使用NgModule？
目前，我们示例代码中只创建了一个模块：根模块。

@NgModule({
  declarations: [
    AppComponent,
    ScrollableTabComponent,
    ImageSliderComponent,
    HorizontalGridComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

1. declarations（可声明对象表）——声明那些属于本NgModule的组件、指令、管道。简单来说就是自己创建的组件、指令、管道等，需要在本模块的ngModule中声明一下才能使用。
2. imports（导入表）——导入外部和内部创建的模块。外部模块的一些例子包括CommonModule (*ngFor , *ngIf, ngClass 指令)HttpClientModule，BrowserModule和NgBootstrap模块。
   内部模块可能是AppRoutingModule等
3. exports（导出表）——公开其中一些组件、指令和管道，以便其他模块的组件模板可以使用它们。
4. providers（提供者）——将所有内部和外部服务都放在这里，提供者是获取/处理数据的服务或类。提供者的作用域是全局的，因此不需要导出它们。提供服务的模块只需要在应用程序中导入一次在根模块中。
5. bootstrap——应用的主视图，称为根组件。它是应用中所有其他视图的宿主。只有根模块才应该设置这个bootstrap属性。