11. 架构---1. Module

1. Angular 是一个用html 和typescript 构建客户端应用的平台与框架。
   它将核心功能和可选功能作为一组TypeScript 库进行实现，你可以把它们导入到你的应用中。

1. 模块Module

1. Angular 应用的基本构造块是NgModule, 它为组件提供了编译的上下文环境。
2. Angular 应用就是由一组NgModule定义的。 NgModule 可以将其组件和一组相关代码（如服务）关联起来，形成功能单元。
3. 一个Angular应用至少有一个用于启动的根模块（root module）, 根模块通常命名为AppModule，并位于一个名叫 app.module.ts 的文件中。还会有很多特性模块（feature module）

1. NgModule 是由@NgModule() 装饰器定义的类。
2. NgModules 用于配置注入器和编译器(the injector and the compiler)，并帮你把那些相关的东西组织在一起。
3. @NgModule() 装饰器是一个函数，参数是一个元数据对象，元数据对象的属性用于描述这个模块。其中最重要的属性如下：

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

4. @NgModule 的参数是一个元数据对象，用于描述如何编译组件的模板，以及如何在运行时创建注入器。 它会标出该模块自己的组件、指令和管道(declarations)，通过 exports 属性公开其中的一部分，以便外部组件使用它们。NgModule 还能把一些服务提供商添加到应用的依赖注入器中(provider)。

• 根NgModule 定义

// src/app/app.module.ts
import {NgModule} from '@angular/core';
import { BrowserModule} from '@angular/platform-browser';
import  {  FormsModule  }  from  '@angular/forms';  import  {  HttpClientModule  }  from '@angular/common/http';  
import  {  AppComponent  }  from  './app.component';  import  {  ItemDirective  }  from  './item.directive';

@NgModule ({
declarations: [
AppComponent,
ItemDirective
],
imports: [
BrowserModule,
FormsModule,  HttpClientModule
],
providers: [Logger],
exports: [AppComponent];
bootstrap: [AppComponent]
})
export class AppModule {}

1.1 常用模块（NgModules）

https://angular.io/guide/frequent-ngmodules（English Version）

NgModule	Import it from	Why you use it
BrowserModule	@angular/platform-browser	当你想要在浏览器中运行app 时
CommonModule	@angular/common	当你想要使用NgIf 和NgFor时
FormsModule	@angular/forms	当要构建模板驱动表单时
ReactiveFormsModule	@angular/forms	当要构建响应式表单时
RouterModule	@angular/router	当要使用路由功能，并且你要用到RouterLink, forRoot() 和.forChild()时
HttpClientModule	@angular/common/http	当要和服务器对话时

BrowserModule 导入了 CommonModule，它贡献了很多通用的指令，比如 ngIf 和 ngFor。 另外，BrowserModule 重新导出了 CommonModule，以便它所有的指令在任何导入了 BrowserModule 的模块中都可以使用。
对于运行在浏览器中的应用来说，都必须在根模块 AppModule 中导入 BrowserModule ，因为它提供了启动和运行浏览器应用时某些必须的服务。BrowserModule 的提供商是面向整个应用的，所以它只能在根模块中使用，而不是特性模块。 特性模块只需要 CommonModule 中的常用指令，它们不需要重新安装所有全应用级的服务。

1.2 入口组件（Entry Componet）

两种组件类型

1. 被包含在模板里，是声明式加载的
2. 命令式加载的入口组件

入口组件是你没有在模板中应用过的，命令式加载（必须加载）的任意组件。你可以在NgModule 通过bootstrap指定它，或者把它包含在路由定义中。

入口组件有两种主要的类型：

1. 引导用的根组件。
2. 在路由定义中指定的组件

入口组件的加载

1. 引导入口组件是在Angular 引导过程中把它加载到DOM 中的。
2. 其他入口组件是通过其他方式动态加载的，比如路由器

• 引导用的入口组件
  app.module.ts

• 路由定义的入口组件

const routes: Routes = [
{  path: ' ',  component: CustomerListComponent },
{path: '/order',  component: OrderComponent }
]

1.3 特性模块

特性模块 提供了聚焦于特定应用需求的一组功能，比如用户工作流、路由或表单*。
特性模块通过它提供的服务以及共享出的组件、指令和管道来与根模块和其它模块合作。

---

1. 如何制作特性模块
ng generate module CustomerDashboard
以上命令会让 CLI 创建一个名叫 customer-dashboard 的文件夹，其中有一个名叫 customer-dashboard.module.ts

import { NgModule } from '@angular/core';
import {CommonModule} from '@angular/common';
@NgModule ({
imports: [CommonModule],
declarations: []
})
export class CustomerDashboardModule {}

/*
第一个导入了 NgModule，它像根模块中一样让你能使用 @NgModule 装饰器；第二个导入了 CommonModule，它提供了很多像 ngIf 和 ngFor 这样的常用指令。 特性模块导入 CommonModule]，而不是 BrowserModule，后者只应该在根模块中导入一次。 CommonModule只包含常用指令的信息，比如 ngIf 和 ngFor，它们在大多数模板中都要用到，而 BrowserModule 为浏览器所做的应用配置只会使用一次。
declarations 数组让你能添加专属于这个模块的可声明对象（组件、指令和管道）。 要添加组件，就在命令行中输入如下命令，这里的 customer-dashboard 是一个目录，CLI 会把特性模块生成在这里，而 CustomerDashboard 就是该组件的名字：
ng generate component customer-dashboard/CustomerDashboard
*/

2. 导入特性模块
把feature module 加入到 app.module.ts 的导入表中
要想把这个特性模块包含进应用中，你还得让根模块 app.module.ts 知道它。注意，在 customer-dashboard.module.ts 文件底部 CustomerDashboardModule 的导出部分。这样就把它暴露出来，以便其它模块可以拿到它。要想把它导入到 AppModule 中，就把它加入 app.module.ts 的导入表中，并将其加入 imports 数组：
》 src/app/app.module.ts

import {NgModule} from '@angular/core';
import { BrowserModule} from '@angular/platform-browser';
import  {  FormsModule  }  from  '@angular/forms';  import  {  HttpClientModule  }  from '@angular/common/http';  
import  {  AppComponent  }  from  './app.component';  import  {  ItemDirective  }  from  './item.directive';
// import the feature module here so you can add it to the imports array below
import {CustomerDashboardModule} from './customer-dashboard/customer-dashboard.module';
@NgModule ({
declarations: [
AppComponent,
ItemDirective
],
imports: [
BrowserModule,
FormsModule, 
HttpClientModule,
// add the feature module below 
CustomerDashboardModule 
],
providers: [Logger],
exports: [AppComponent];
bootstrap: [AppComponent]
})
export class AppModule {}

3. 渲染特性模块的组件模板

1. 在特性模块 feature.module.ts中export 导出组件
2. 然后，在 AppComponent 的 app.component.html 中，加入标签 <app-customer-dashboard>

要想在 AppComponent 中查看这些 HTML，你首先要在 CustomerDashboardModule 中导出 CustomerDashboardComponent。 在 customer-dashboard.module.ts 中，declarations 数组的紧下方，加入一个包含 CustomerDashboardModule 的 exports 数组：

---

》 src/app/customer-dashboard/customer-dashboard.module.ts

exports: [
  CustomerDashboardComponent
]

》 src/app/app.component.html

<h1>
  {{title}}
</h1>
<!-- add the selector from the CustomerDashboardComponent -->
<app-customer-dashboard></app-customer-dashboard>