Angular9 以根模块启动应用

先决条件

对下列知识有基本的了解：

JavaScript 模块与 NgModules。

启动过程

NgModule 用于描述应用的各个部分如何组织在一起。每个应用有至少一个 Angular 模块，根模块就是你用来启动此应用的模块。按照惯例，它通常命名为 AppModule。

当你使用 Angular CLI 命令 ng new 生成一个应用时，其默认的 AppModule 是这样的：

/* JavaScript imports */
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';


import { AppComponent } from './app.component';


/* the AppModule class with the @NgModule decorator */
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在 import 语句之后，是一个带有 @NgModule 装饰器的类。

@NgModule 装饰器表明 AppModule 是一个 NgModule 类。 @NgModule 获取一个元数据对象，它会告诉 Angular 如何编译和启动本应用。

declarations —— 该应用所拥有的组件。

imports —— 导入 BrowserModule 以获取浏览器特有的服务，比如 DOM 渲染、无害化处理和位置（location）。

providers —— 各种服务提供者。

bootstrap —— 根组件，Angular 创建它并插入 index.html 宿主页面。

Angular CLI 创建的默认应用只有一个组件 AppComponent，所以它会同时出现在 declarations 和 bootstrap 数组中。

declarations 数组

该模块的 declarations 数组告诉 Angular 哪些组件属于该模块。当你创建更多组件时，也要把它们添加到 declarations 中。

每个组件都应该（且只能）声明（declare）在一个 NgModule 类中。如果你使用了未声明过的组件，Angular 就会报错。

declarations 数组只能接受可声明对象。可声明对象包括组件、指令和管道。一个模块的所有可声明对象都必须放在 declarations 数组中。可声明对象必须只能属于一个模块，如果同一个类被声明在了多个模块中，编译器就会报错。

这些可声明的类在当前模块中是可见的，但是对其它模块中的组件是不可见的 —— 除非把它们从当前模块导出，并让对方模块导入本模块。

下面是哪些类可以添加到 declarations 数组中的例子：

declarations: [
  YourComponent,
  YourPipe,
  YourDirective
],

每个可声明对象都只能属于一个模块，所以只能把它声明在一个 @NgModule 中。当你需要在其它模块中使用它时，就要在那里导入包含这个可声明对象的模块。

只有 @NgModule 可以出现在 imports 数组中。

通过 @NgModule 使用指令

使用 declarations 数组声明指令。在模块中使用指令、组件或管道的步骤如下：

从你编写它的文件中导出它。

把它导入到适当的模块中。

在 @NgModule 的 declarations 数组中声明它。

这三步的结果如下所示。在你创建指令的文件中导出它。下面的例子中，"item.directive.ts" 中的 ItemDirective 是 CLI 自动生成的默认指令结构。

Path："src/app/item.directive.ts" 。

import { Directive } from '@angular/core';


@Directive({
  selector: '[appItem]'
})
export class ItemDirective {
// code goes here
  constructor() { }


}

重点在于你要先在这里导出它才能在别处导入它。接下来，使用 JavaScript 的 import 语句把它导入到 NgModule 中（这里是 "app.module.ts"）。

Path："src/app/app.module.ts" 。

import { ItemDirective } from './item.directive';

同样在这个文件中，把它添加到 @NgModule 的 declarations 数组中：

Path："src/app/app.module.ts" 。

declarations: [
  AppComponent,
  ItemDirective
],

现在，你就可以在组件中使用 ItemDirective 了。这个例子中使用的是 AppModule，但是在特性模块中你也可以这么做。

注：

组件、指令和管道都只能属于一个模块。你在应用中也只需要声明它们一次，因为你还可以通过导入必要的模块来使用它们。这能节省你的时间，并且帮助你的应用保持精简。

imports 数组

模块的 imports 数组只会出现在 @NgModule 元数据对象中。它告诉 Angular 该模块想要正常工作，还需要哪些模块。

列表中的模块导出了本模块中的各个组件模板中所引用的各个组件、指令或管道。在这个例子中，当前组件是 AppComponent，它引用了导出自 BrowserModule、FormsModule 或 HttpClientModule 的组件、指令或管道。总之，组件的模板中可以引用在当前模块中声明的或从其它模块中导入的组件、指令、管道。

providers 数组

providers 数组中列出了该应用所需的服务。当直接把服务列在这里时，它们是全应用范围的。当你使用特性模块和惰性加载时，它们是范围化的。

bootstrap 数组

应用是通过引导根模块 AppModule 来启动的，根模块还引用了 entryComponent。此外，引导过程还会创建 bootstrap 数组中列出的组件，并把它们逐个插入到浏览器的 DOM 中。

每个被引导的组件都是它自己的组件树的根。插入一个被引导的组件通常触发一系列组件的创建并形成组件树。

虽然也可以在宿主页面中放多个组件，但是大多数应用只有一个组件树，并且只从一个根组件开始引导。

这个根组件通常叫做 AppComponent，并且位于根模块的 bootstrap 数组中。