模块-原创手记-慕课网

模块的意义

Angular 中的模块称作 NgModule。
一个模块可以看作是一个容器，用于把某一部分的特性代码组织起来，比如组件，服务，指令等，形成一个大的应用单元。
除此之外，模块还可以导入一些由其它模块中导出的功能，同时自身也可以导出一些指定的功能供其它模块使用。
本质上，模块是一个带有 @NgModule 装饰器的类。

模块的结构

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { APIService } from 'src/app/common/service/api.service';
import { AppComponent } from './app.component';

@NgModule({
  // 用于导入本模块中的组件所需的其它模块
  imports: [ BrowserModule ],

  // 用于向本模块提供服务，这些服务可以在本模块中的任何地方使用
  providers: [ APIService ],

  // 用于声明本模块下的组件、指令、管道
  // 每个组件都必须且只能声明在一个模块中，才可以正常使用
  declarations: [ AppComponent ],

  // 用于导出一些指定的组件、指令、管道，以供其它模块使用
  exports: [ AppComponent ],

  // 只有根模块才可以设置 bootstrap 属性
  // 用于将根组件（入口组件）加载到 index.html 主视图页面中
  bootstrap?: [ AppComponent ]
})

export class AppModule { }

模块的类型

在 Angular 中，根据功能的不同，将模块分为根模块和特性模块。

根模块

根模块是整个 Angular 应用的基础和核心，用于将所有特性模块组织起来，并接收一些全局的配置项。
根模块在结构上比其他特性模块多了一个 bootstrap 属性，用于声明应用的入口组件。
新建的 Angular 应用，都会存在一个根模块，默认名是 AppModule。

特性模块

根据功能的不同，开发者自行创建的模块统称为特性模块。

截图是为登录功能单独创建的特性模块：

图片描述

共享模块

在模块的定义中提到了，我们也可以导出一些指定的功能（模块、组件、指令、管道），任何导入该模块的其他模块，就都可以访问到这些功能。

项目截图：

图片描述

例子：

welcome.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { WelcomeComponent } from './welcome.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [WelcomeComponent],

  // 在 WelcomeModule 模块中导出 WelcomeComponent 组件
  exports: [WelcomeComponent]
})
export class WelcomeModule { }

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

// 在 AppModule 模块中导出 WelcomeModule 模块
// 如此，AppModule 模块下的组件就可以直接使用 WelcomeModule 模块中导出的功能了
import { WelcomeModule } from './common/welcome/welcome.module';

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

app.component.html

<!-- 使用 WelcomeModule 模块中导出的组件 -->
<app-welcome></app-welcome>

在实际开发中，我们通常会将公用的指令、管道和组件（不包括服务）放到一个模块中，然后其他模块只需要导入这个模块就可以使用这些功能，这类模块被称为共享模块，共享模块是特性模块的一个类型。

end