概念化 Angular 模块的用途

2020-08-11 08:00:00 · 飞浪

介绍从高层次来看，Angular应用由三种类型的工件组成：组件（包括指令和管道）、子模块和服务。Angular模块将这些工件封装为一个编译单元。在本指南中，您将了解Angular模块和

介绍

从高层次来看，Angular 应用由三种类型的工件组成：组件（包括指令和管道）、子模块和服务。Angular 模块将这些工件封装为一个编译单元。在本指南中，您将了解 Angular 模块和 Angular 模块层次结构的详细信息。

Angular 的模块化设计

模块是一种组织应用并使用外部库扩展其功能的方法。Angular 库也是使用 Angular 模块构建的。示例包括 FormsModule、HttpClientModule 和 RouterModule。许多外部库也可用作 Angular 模块，例如 Material Design、Ionic 和 AngularFire2。

Angular 组件、指令和管道专注于特定功能领域、业务领域、工作流或常用实用程序。Angular 服务可能是内部开发的，就像您自己开发的东西一样，也可以从外部来源导入，例如 Angular 路由器和 HTTP 客户端。

模块可以在应用程序启动时立即加载，或者由路由器异步延迟加载。

Angular 模块的元数据

Angular 模块的元数据使用@NgModule装饰器指定，它执行以下操作：

声明哪些组件、指令和管道属于该模块
将其中一些组件、指令和管道公开，以便其他模块的组件模板可以使用它们
使用当前模块中的组件所需的组件、指令和管道导入其他模块
提供其他应用组件可以使用的服务来源：https://angular.io/guide/ngmodules

每个 Angular 应用至少有一个模块，称为根模块或应用级模块。您可以引导此应用级模块或根模块来启动应用程序。

在小型应用中，根模块或应用级模块足以组织不同的组件、指令、管道和服务。但随着应用的增长，您应该将根模块重构为功能模块，这些模块代表相关功能。然后，如果您希望这些模块被即时加载，您可以在应用级模块中导入这些模块；如果您希望这些模块被延迟加载，您可以在路由模块中通过路由导入这些模块。

开箱即用的根模块

当您使用 Angular CLI 生成新应用程序时，将为根模块生成以下代码：

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

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

// @NgModule decorator with its metadata
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}
    

请注意，在NgModule指令中，您传递了一个具有以下四种数组类型属性的对象：

声明：在此数组中，指定哪些组件、指令和管道属于此模块。
imports：在此数组中，您导入急切加载的模块。
提供者：在此数组中，您可以指定可在任何组件，指令或管道中跨应用程序使用的所有服务。
bootstrap：在此数组中，您指定应在应用程序启动时加载的组件。

任何功能模块都会有前三个数组（声明、导入、提供程序），但没有第四个数组（引导程序）。

功能模块的类型

功能模块有五种类型：

领域功能模块
路由功能模块
路由模块
服务功能模块
小部件功能模块

领域功能模块

特定应用程序的用户体验（例如编辑事件或下订单）由域功能模块提供。

领域功能模块很少有提供程序。如果有提供程序，则所提供服务的生命周期应与模块的生命周期相同。领域功能模块由较大的功能模块导入一次。

它们可能会由缺少路由的小型应用程序的根AppModule导入。

路由功能模块

在路由功能模块中，顶级组件是路由器导航路由的目标。它们的组件永远不会出现在外部组件的模板中。路由功能模块很少有提供程序。如果有提供程序，则所提供服务的生命周期应与模块的生命周期相同。

路由模块

路由模块定义路由并提供路由配置。它将路由器配置添加到模块的导入中，并将路由问题与其配套模块分开。路由模块只能由其配套模块导入，并且它没有自己的声明。

服务功能模块

实用服务（例如消息传递和访问数据）由服务功能模块提供。这些模块仅由提供程序组成，没有声明。根AppModule是唯一应导入服务模块的模块。

小部件功能模块

使用小部件功能模块，组件、指令和管道可供外部模块使用。小部件功能模块完全由声明组成，很少有任何提供程序。

结论

恭喜！您已经了解了 Angular 的模块化设计和功能模块的类型。请参阅Angular 中的模块类型了解更多详细信息。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

概念化 Angular 模块的用途

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

// imports import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; // @NgModule decorator with its metadata @NgModule({ declarations: [AppComponent], imports: [BrowserModule], providers: [], bootstrap: [AppComponent] }) export class AppModule {}