Angular 应用程序中的模块

什么是 Angular 模块？

模块是 Angular 中的一个容器。换句话说，模块是一种组织 pipes、directives、services 和其他组件的方式。因此，Angular 模块只不过是连接的组件、服务、管道和指令的集合。

为什么 Angular 中需要模块？

模块化开发是软件开发中最关键的元素之一。好的软件应该始终包含独立的模块。在 Angular 中，您希望构建独立的、物理上封闭的 TypeScript 或 JavaScript 文件，这些文件是自包含的代码。然后，只要您有某种引用机制，就可以从需要使用这些模块的位置引用它们。

我们可以通过使用“import”和“export”关键字来实现这一点。换句话说，需要公开的模块应使用“export”关键字定义，而希望导入已导出模块的模块应使用 import 关键字声明。

注意：本教程将介绍 Angular 框架在创建新应用程序时创建的默认模块，以及如何在 Angular 应用程序中开发和使用您自己的模块。首先，我们将讨论默认模块并尝试理解它。

理解 Angular 中的模块

正如您在下图中看到的，当我们在 Angular CLI 中使用命令构建一个新的 Angular 项目时，会在 src 文件夹下的 app 文件夹中自动创建一个名为 AppModule（位于 app.module.ts 文件中）的模块。

在 Angular 应用程序中，至少需要一个模块。我们 Angular 应用程序的根模块或默认模块称为 AppModule（app.module.ts 文件）。在我们查看如何创建和使用自己的模块之前，让我们花点时间来理解这个默认模块。打开 app.module.ts 文件后，您会发现以下代码。

让我们先理解上面的代码

模块名称是 AppModule，并使用 @NgModule 装饰器对其进行装饰。@NgModule 是使用 @angular/core Angular 核心库导入的。请查看下图以获得更好的理解。由于 NgModule 前面有 @ 符号，因此在此上下文中我们称之为装饰器。因此，Angular 中任何以 @ 符号开头的东西都应始终被视为装饰器。

上面的示例说明了 @NgModule 装饰器如何接收一个带有某些基于数组的属性的对象。它默认带有四个数组：declarations、imports、providers 和 bootstrap。让我们检查 @NgModule 装饰器的每个属性。

Declarations 数组 (declarations)

此数组包含 pipes、directives 和 components。每次添加新组件时，都必须先导入它，然后将其引用添加到 declarations 数组中。当您启动新的 Angular 项目时，AppComponent（app.component.ts 文件）会被自动创建。您可以在 src 文件夹下的 app 文件夹中找到此文件。打开 app.component.ts 文件时，会出现以下代码。

如上图所示，AppComponent 是组件名称。此外，该组件 (AppComponent) 首先被导入到根模块中，如下图所示，然后将其引用添加到 declarations 数组中。

Imports 数组 (imports)

其他模块（@NgModule 除外）必须包含在 imports 部分。它默认包含 BrowserModule 和 AppRoutingModule。与组件类似，您必须先导入模块，然后将对它们的引用包含在 imports 部分。

Services 数组 (providers)

服务必须添加到 providers 部分。每当您为应用程序构建服务时，都必须先在 providers 部分引用它。在此之后，您才能在应用程序中使用该服务。

Bootstrap 数组 (bootstrap)

此部分基本上决定了哪个组件将首先在您的 Angular 应用程序中运行或启动。目前，我们有一个组件 AppComponent，它将在我们的程序运行时使用。因此，此 AppComponent 是 bootstrap 数组的一部分。

如何创建 Angular 模块？

您必须使用下图所示的命令，以便使用 Angular CLI 在 Angular 中创建模块。在这种情况下，g 代表 generate，并且使用 g 或 generate 来构建模块。

什么时候需要创建多个模块？

假设您正在为一个拥有多个门户（包括 HR、Account、Employee 和 Customer）的业务创建一个 ERP 应用程序。随后，您必须为每个门户开发不同的模块，例如员工、账户、HR 等模块。AppModule（app.module.ts 文件）是您应用程序的根模块，因此，每当您创建新组件时，都必须在 @NgModule 装饰器的 declarations 数组中导入它并包含对其的引用。这就是创建单独模块的原因。

如果您要创建成百上千个组件，您将不得不将每个组件导入并包含在根模块 (AppModule) 中，这将变得越来越复杂且难以维护。

为了绕过这种复杂性，您需要为每个门户创建一个模块，并在该模块中包含相关的模块组件。最后，您必须将该模块的引用添加到您的 AppModule 根模块中。您现在可能需要澄清。

模块对于 Angular 应用程序的结构和组织至关重要。它们支持将各种应用程序组件集成到连贯的功能单元的过程。配备 @NgModule() 装饰器的 TypeScript 类被称为 Angular 模块。

Root Module (AppModule)

• Angular 应用程序的起点是根模块，也称为 AppModule。
• 通过定义根组件并配置整个应用程序使用的组件、指令、管道和服务，它会引导应用程序。
• 它通常导入其他模块，例如 FormsModule、HttpClientModule、RouterModule 等，这些模块对于应用程序的正常运行是必需的。
• 它在 app.module.ts 中声明。
• AppModule 是 Angular 应用程序的起点。
• 它通常通过指定根组件来引导应用程序，并在 app.module.ts 中定义。
• 为了定制应用程序，AppModule 导入各种模块，包括 BrowserModule、FormsModule、HttpClientModule 和 RouterModule。
• 此外，它声明了整个程序使用的管道、指令和全局组件。
• 通常，AppModule 的 providers 数组包含可供整个应用程序使用的服务的提供程序。

Feature Modules

• 功能模块用于组织应用程序中与特定功能或域相关的代码。
• 它们将相关的组件、指令、管道和服务分组。
• 功能模块可以被延迟加载，这意味着它们会根据需要异步加载，通过减小初始包大小来提高应用程序性能。
• 功能模块使用 @NgModule() 装饰器创建，与根模块类似。
• 功能模块通常在其自己的单独的 TypeScript 文件中声明。
• 功能模块有助于将应用程序功能分组到逻辑部分。
• 它们可以包含特定于应用程序功能或域的组件、指令、管道和服务。
• 更好的代码组织和关注点分离通过功能模块实现，这些模块提高了模块化和封装性。
• 通过仅在需要时异步加载功能模块，延迟加载功能模块可以大大提高应用程序性能。
• Angular CLI 命令 ng generate module 通常用于创建功能模块。

Shared Module

• 共享模块收集被几个功能模块使用的公共组件、指令、管道和提供程序。
• 它使得减少代码重复并在整个实用程序中保持一致性成为可能。
• 共享模块根据需要被其他功能模块导入。
• 在导入共享模块时，必须小心，以避免循环依赖。
• 由多个功能模块共享的通用组件、管道、指令和服务被收集到一个共享模块中。
• 它鼓励代码重用，并有助于在整个程序中保持一致性。
• 为了避免创建不必要的依赖关系和潜在的循环引用，在将共享模块导入到仅需要其部分导出的功能模块时，必须格外小心。

Core Module

• 身份验证和日志记录等在整个应用程序中使用的服务包含在核心模块中。
• 在应用程序的核心，它有助于组织和授予对必要服务的访问。
• 为了确保整个应用程序中的单例服务实例，核心模块通常只应由根模块 (AppModule) 导入，而不应由任何其他功能模块导入。
• 核心模块包含单例功能，如日志记录、身份验证和其他应用程序范围的服务。
• 在应用程序的核心，它有助于组织和授予对必要服务的访问。
• 通常，只有 AppModule 导入 Core Module，以确保其提供的服务在整个应用程序中作为单例进行实例化。

Routing Modules

• 路由模块定义了应用程序的导航和路由。
• 它们负责将 URL 映射到组件，并包含路由配置。
• 为了实现整个应用程序的路由，路由模块通常被导入到 AppModule 根模块中。路由模块定义了应用程序的路由和导航。
• 它们使得在应用程序的各个部分之间导航以及将 URL 映射到组件变得更加容易。
• 为了实现整个应用程序的路由，路由模块会被导入到 AppModule 中。
• 延迟加载的功能模块通常拥有独立的路由模块，这使得它们能够提供自定义的路由集。

当 Angular 应用程序的模块组织得当后，可以更轻松地进行测试、扩展和维护。它鼓励了模块化和可重用性，这是软件开发中的两个基本概念。

结论

总之，模块是组织和构建 Angular 应用程序代码的必不可少的构建块。通过使用将相似功能分组到连贯的程序集中的模块，开发人员可以构建可扩展、可维护且可重用的程序。根模块 (AppModule)、功能模块、共享模块、核心模块和路由模块是模块的重要类别。

开发人员通过熟练运用 Angular 的模块框架，可以创建可靠的应用程序，这些应用程序更容易理解、扩展和维护，最终有助于项目的成功。总而言之，模块对于 Angular 应用程序中的代码结构和组织至关重要，因为它们促进了代码的可重用性、可维护性和可扩展性。