创建自定义的 Angular 模块

在之前的一篇文章中，我们知道，从组件的角度看，一个 Angular 应用可以看作是按树形结构组织的组件集合。组件树的根结点，是主组件，作为全局组件的占位符，可以包含其他功能组件及其子组件。

在 Angular 应用中，一个组件会承担一个应用功能的一部分职责。换句话说，一个应用功能会分解为若干个组件共同去完成。基于组件去管理 Angular 应用，如果业务复杂，组件过多，粒度会显得过细，难于管理。

Angular 应用提供了一种组件管理机制，可以把实现同一个功能的多个组件，划分到一个组中，称为模块（module）。这使得应用的开发，测试，扩展，升级和部署更加容易。

一个 Angular 应用至少包含一个模块，也就是主模块，AppModule. 我们创建的其他模块称为特征模块 (feature module)，表示应用的主要功能特征。

下面我们就开始创建一个特征模块。

创建应用

为了更好地介绍 Angular 如何使用模块，我们新建一个书店管理应用。

ng new book-store

创建模块

创建完 Angular 应用，接下来就是定义应用的特征功能。

书店管理应用的一个重要特征是图书管理，而图书管理的主要功能如下所示：

• 展示图书列表
• 显示图书详情
• 模糊查询图书

在上述的需求中，图书管理可以作为 Angular 应用的一个特征模块，而展示图书列表、显示图书详情和模糊查询图书是该模块下的三个功能组件。

现在，我们创建一个图书管理模块。

打开命令行应用，导航到项目的根路径，运行下面的命令：

ng generate module books

命令输出：

CREATE src/app/books/books.module.ts (191 bytes)

命令成功执行后，Angular CLI 会在 app 文件夹下，创建一个 books 文件夹。在 books 文件夹下，会包含所有与图书管理相关的功能文件。

 

模块文件结构

在 books 文件夹下，Angular CLI 还创建了一个 books.module.ts 的 TypeScript 文件，包含了 BooksModule 模块的定义。

import { NgModule } from '@angular/core’;
import { CommonModule } from '@angular/common’;

@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ]
})
export class BooksModule { }

从模块的定义可以看出，Angular 的模块就是一个附加了 @NgModule 装饰器的普通 TypeScript 类。@NgModule 装饰器的主要属性：

• declarations: 包含需要在模块注册的组件，指令和管道。
• imports: 导入其他模块，使用其他包含的组件，指令和管道。等。在上面的代码中，自动导入了CommonModule 模块，它包含了所用内置的指令和管道。
• exports: 在 declarations 属性中定义的组件，指令和管道等，如果运行其他模块使用，则需要包含在 exports 属性中。
• providers: 包含注册的服务，允许模块中的组件访问。
• bootstrap: 定义应用启动时，需要展示的主组件。该属性仅出现在应用的主模块中。

注册组件

我们已经知道如何使用 Angular CLI 命令创建一个组件，但是如何把组件注册到模块呢？Angular 提供了两种方式。第一种是隐式注册，在模块所在的文件下创建组件；第二种是显示注册，在命令中指定模块和路径。

下面，我们就采用第二种方式，在 BooksModule 模块中，注册一个图书列表组件。运行下面的命令：

ng generate component books/bookList --module=books

--module 参数表示组件要注册的模块，创建指令和管道时，也可以使用该参数。当然我们也可以使用完整的路径指定模块，如 --module=books/books.module.ts.

命令输出：

CREATE src/app/books/book-list/book-list.component.css (0 bytes)
CREATE src/app/books/book-list/book-list.component.html (24 bytes)
CREATE src/app/books/book-list/book-list.component.spec.ts (641 bytes)
CREATE src/app/books/book-list/book-list.component.ts (286 bytes)
UPDATE src/app/books/books.module.ts (277 bytes)

从命令输出内容中，我们也可以看到，Angular CLI 命令创建了组件相关的文件，并修改了模块文件，完成了组件的注册：

import { NgModule } from '@angular/core’;
import { CommonModule } from '@angular/common’;
import { BookListComponent } from './book-list/book-list.component’;

@NgModule({
  declarations: [BookListComponent],
  imports: [
    CommonModule
  ]
})
export class BooksModule { }

导出功能

现在，我们希望在应用的首页上显示图书列表组件模板的内容。应用的首页默认显示主组件模板内容，那么，如何把图书列表组件模板添加到主组件模板上进行显示呢？

首先，我们需要导出图书列表组件，允许主组件使用。修改 BooksModule 模块的 @NgModule 装饰器，在 exports 属性中，添加 BookListComponent 组件：

@NgModule({
  declarations: [BookListComponent],
  imports: [
    CommonModule
  ],
  exports: [
    BookListComponent
  ]
})
export class BooksModule { }

然后，在 AppModule 模块中，导入 BooksModule 模块：

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BooksModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

最后，修改 AppComponent 组件的模板，把下列内容

<span>{{ title }} app is running!</span>

替换为

<app-book-list></app-book-list>

运行应用，打开浏览器，访问 http://localhost:4200/#/，图书列表模板的内容已经成功显示。