模块的意义

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。

特性模块

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

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

end

ITPub博客

模块

模块的意义

模块的结构

模块的类型

最新文章