Angular

Angular 章节详解：模块化应用构建的基石

1. 什么是 Angular 模块？

在 Angular 应用中，模块可以被视为一个容器，它封装了一组紧密相关的应用部分，例如组件、指令、管道和服务。NgModule 定义了应用的部件是如何组合在一起的，并定义了模块之间的依赖关系。每个 Angular 应用都至少有一个根模块，通常命名为 AppModule。

NgModule 的关键特性：

• 组织性: 将应用分解为功能独立的模块，提高代码的组织性和可维护性。

• 封装性: 模块内部的代码和资源可以被封装起来，避免命名冲突和意外的外部访问。

• 可复用性: 模块可以在不同的应用或应用的不同部分之间复用，减少代码冗余。

• 延迟加载: 模块可以被延迟加载，只在需要时才加载，提高应用的初始加载速度。

• 依赖注入: 模块定义了依赖注入的上下文，控制服务的提供范围。

@NgModule 装饰器

Angular 模块通过 @NgModule 装饰器进行定义。这个装饰器接受一个元数据对象，用于描述模块的各种属性，例如：

• declarations: 声明属于该模块的组件、指令和管道。

• imports: 导入其他模块，使当前模块可以使用其他模块导出的组件、指令、管道和服务。

• exports: 导出当前模块声明的组件、指令和管道，使其可以被其他模块使用。

• providers: 配置模块级别的服务提供商，这些服务在该模块及其子模块中可见。

• bootstrap: 指定根模块的启动组件，通常只在根模块中使用。

基本模块结构示例：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MyComponent } from './my.component';
import { MyDirective } from './my.directive';
import { MyPipe } from './my.pipe';
import { MyService } from './my.service';
@NgModule({
  declarations: [
    AppComponent,
    MyComponent,
    MyDirective,
    MyPipe
  ],
  imports: [
    BrowserModule // 导入 BrowserModule 模块，提供浏览器平台所需的服务
  ],
  providers: [
    MyService // 在模块级别提供 MyService
  ],
  bootstrap: [AppComponent] // 启动组件为 AppComponent
})
export class AppModule { }
​

Graph TD 图示：模块的基本构成

2. Angular 模块的类型

Angular 应用通常会包含多种类型的模块，根据其功能和作用，可以大致分为以下几种：

• 根模块 (Root Module)： 每个 Angular 应用都只有一个根模块，通常命名为 AppModule。它是应用的入口点，负责启动应用并加载其他模块。根模块通常导入 BrowserModule 或 ServerModule，分别用于浏览器平台和服务端渲染。

• 特性模块 (Feature Module)： 特性模块专注于应用的特定功能或业务领域，例如用户管理模块、订单模块、产品模块等。特性模块可以将应用分解为更小的、可管理的单元，并实现代码的逻辑隔离。

• 共享模块 (Shared Module)： 共享模块包含在多个特性模块中都需要使用的组件、指令、管道和服务。例如，通用的 UI 组件、表单验证工具、日期格式化管道等。共享模块避免了代码重复，提高了代码的复用性。

• 核心模块 (Core Module)： 核心模块通常包含应用级的单例服务、全局配置、以及只在应用启动时加载一次的功能。核心模块不应该被延迟加载，并且应该只被根模块导入一次。

模块类型关系 Graph TD 图示：

3. 模块组织和最佳实践

合理的模块组织是构建可维护、可扩展 Angular 应用的关键。以下是一些模块组织和最佳实践建议：

• 按特性组织模块： 将应用按照业务功能或特性划分为独立的模块。例如，用户管理模块、产品目录模块、订单管理模块等。每个特性模块应该专注于一个特定的业务领域，包含该领域相关的组件、服务和路由。

• 创建共享模块： 将多个模块都需要使用的通用组件、指令、管道和服务提取到共享模块中。共享模块可以被多个特性模块导入，避免代码重复。

• 创建核心模块： 将应用级的单例服务、全局配置和只加载一次的功能放入核心模块。核心模块应该只被根模块导入一次，并且不应该被延迟加载。

• 延迟加载特性模块： 对于大型应用，可以将特性模块配置为延迟加载。延迟加载模块只在需要时才加载，可以显著提高应用的初始加载速度。使用 Angular 的路由配置来实现模块的延迟加载。

• 避免循环依赖： 模块之间应该避免循环依赖。循环依赖会导致模块之间的耦合度过高，降低代码的可维护性。可以使用工具来检测和避免循环依赖。

• 保持模块的内聚性： 每个模块应该专注于一个特定的功能或业务领域，模块内部的代码应该高度相关。保持模块的内聚性可以提高代码的可读性和可维护性。

• 模块命名规范： 使用清晰、一致的命名规范来命名模块。通常可以使用特性名称作为模块名称，例如 UserModule、ProductModule、OrderModule 等。

代码示例：特性模块和共享模块

假设我们正在开发一个电商应用，可以创建以下模块：

product.module.ts (产品特性模块)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';
import { ProductRoutingModule } from './product-routing.module';
import { SharedModule } from '../shared/shared.module'; // 导入共享模块
@NgModule({
  declarations: [
    ProductListComponent,
    ProductDetailComponent
  ],
  imports: [
    CommonModule,
    ProductRoutingModule,
    SharedModule // 使用共享模块中的组件和管道
  ]
})
export class ProductModule { }
​

shared.module.ts (共享模块)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms'; // 导入 FormsModule
import { RouterModule } from '@angular/router'; // 导入 RouterModule
import { ButtonComponent } from './components/button/button.component';
import { TruncatePipe } from './pipes/truncate.pipe';
@NgModule({
  declarations: [
    ButtonComponent,
    TruncatePipe
  ],
  imports: [
    CommonModule,
    FormsModule,
    RouterModule
  ],
  exports: [ // 导出共享组件和管道，供其他模块使用
    CommonModule, // 导出 CommonModule，方便在特性模块中使用 *ngIf, *ngFor 等指令
    FormsModule,
    RouterModule,
    ButtonComponent,
    TruncatePipe
  ]
})
export class SharedModule { }
​

app-routing.module.ts (根路由配置，延迟加载特性模块)

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
  {
    path: 'products',
    loadChildren: () => import('./product/product.module').then(m => m.ProductModule) // 延迟加载 ProductModule
  },
  // ... 其他路由配置
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
​

Graph TD 图示：模块组织结构

4. @NgModule 属性详解

深入理解 @NgModule 装饰器的各个属性对于有效地使用 Angular 模块至关重要。

• declarations:

  • 类型: Array<Type<any>>

  • 作用: 声明属于当前模块的组件、指令和管道。

  • 注意事项:

    • 声明过的组件、指令和管道只能在一个模块中声明。

    • 声明的组件、指令和管道只能在当前模块的模板中使用，除非被导出。

    • 模块中声明的组件、指令和管道默认是私有的，只能在当前模块内部使用。

• imports:

  • 类型: Array<Type<any>>

  • 作用: 导入其他模块，使当前模块可以使用其他模块导出的组件、指令、管道和服务。

  • 注意事项:

    • 导入模块会使其导出的组件、指令、管道在当前模块的模板中可用。

    • 导入模块也会使其导出的服务在当前模块及其子模块中可用 (如果服务是可注入的)。

    • 避免循环导入，会导致循环依赖。

• exports:

  • 类型: Array<Type<any>>

  • 作用: 导出当前模块声明的组件、指令和管道，使其可以被其他模块使用。

  • 注意事项:

    • 只有在 declarations 中声明过的组件、指令和管道才能被导出。

    • 导出组件、指令和管道后，其他模块导入当前模块后就可以在模板中使用这些导出的声明。

    • 导出模块本身也是一种常见的做法，例如导出 SharedModule，以便其他模块可以方便地导入共享模块的所有导出项。

• providers:

  • 类型: Array<Provider>

  • 作用: 配置模块级别的服务提供商。

  • 注意事项:

    • 在模块的 providers 中提供的服务，其作用域是模块级别的。这意味着该模块及其子模块中的组件可以注入这些服务。

    • 如果在根模块的 providers 中提供服务，则该服务是应用级别的单例服务，在整个应用中只有一个实例。

    • 可以使用简写语法或完整的提供商配置对象来配置服务提供商。

    • 使用 providedIn: 'root' 在 @Injectable 装饰器中声明服务，也可以实现应用级别的单例服务，这是推荐的做法。

    • 模块级别的服务提供商通常用于提供模块内部使用的服务，或者覆盖应用级别的服务。

• bootstrap:

  • 类型: Array<Type<any>>

  • 作用: 指定根模块的启动组件。

  • 注意事项:

    • bootstrap 属性通常只在根模块 (AppModule) 中使用。

    • 启动组件是应用启动时 Angular 加载的第一个组件，通常是应用的根组件 (AppComponent)。

    • 启动组件会被添加到 DOM 中，并作为应用的入口点。

代码示例：@NgModule 属性的使用

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyComponent } from './my.component';
import { MyDirective } from './my.directive';
import { MyPipe } from './my.pipe';
import { MyService } from './my.service';
import { OtherModule } from '../other/other.module'; // 假设 OtherModule 导出了 OtherComponent
@NgModule({
  declarations: [
    MyComponent,
    MyDirective,
    MyPipe
  ],
  imports: [
    CommonModule,
    OtherModule // 导入 OtherModule，可以使用 OtherComponent
  ],
  exports: [
    MyComponent, // 导出 MyComponent，使其可以在其他模块中使用
    MyPipe // 导出 MyPipe
  ],
  providers: [
    MyService // 在模块级别提供 MyService
  ]
  // bootstrap: [MyComponent] // 根模块才需要 bootstrap
})
export class MyModule { }
​

Graph TD 图示：@NgModule 属性关系

5. 模块作用域和依赖注入

Angular 模块不仅是代码的组织单元，也定义了作用域和依赖注入的上下文。

• 模块作用域：

  • declarations 中声明的组件、指令和管道的作用域是模块级别的。它们只能在声明它们的模块的模板中使用，除非被导出。

  • 模块导出的组件、指令和管道，其作用域扩展到导入该模块的其他模块。

  • 模块级别的服务 (在 providers 中提供的服务) 的作用域是模块及其子模块。

• 依赖注入：

  • Angular 的依赖注入系统是模块化的。服务可以在不同的模块级别提供，从而控制服务的可见性和生命周期。

  • 在模块的 providers 中提供的服务，其作用域是模块级别的。这意味着该模块及其子模块中的组件可以注入这些服务。

  • 如果在根模块的 providers 中提供服务，则该服务是应用级别的单例服务，在整个应用中只有一个实例。

  • 当一个组件请求一个服务时，Angular 的依赖注入系统会首先在当前组件的注入器中查找，如果没有找到，则向上级模块的注入器中查找，直到找到服务提供商或者到达根注入器。

代码示例：模块作用域和服务提供商

feature.module.ts (特性模块)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FeatureComponent } from './feature.component';
import { FeatureService } from './feature.service';
@NgModule({
  declarations: [
    FeatureComponent
  ],
  imports: [
    CommonModule
  ],
  providers: [
    FeatureService // 在 FeatureModule 级别提供 FeatureService
  ],
  exports: [
    FeatureComponent
  ]
})
export class FeatureModule { }
​

feature.component.ts (特性模块中的组件)

import { Component, OnInit } from '@angular/core';
import { FeatureService } from './feature.service';
@Component({
  selector: 'app-feature',
  template: `<p>Feature Component: {{message}}</p>`,
  styleUrls: ['./feature.component.css']
})
export class FeatureComponent implements OnInit {
  message: string;
  constructor(private featureService: FeatureService) { } // 注入 FeatureService
  ngOnInit(): void {
    this.message = this.featureService.getMessage();
  }
}
​

feature.service.ts (特性模块的服务)

import { Injectable } from '@angular/core';
@Injectable() // 使用 @Injectable() 装饰器
export class FeatureService {
  getMessage(): string {
    return 'Message from Feature Service';
  }
}
​

在这个例子中，FeatureService 在 FeatureModule 的 providers 中提供，因此 FeatureService 的作用域是 FeatureModule 及其子模块。FeatureComponent 可以注入并使用 FeatureService 的实例。如果其他模块导入了 FeatureModule 并尝试注入 FeatureService，它们将获得 FeatureModule 提供的 FeatureService 实例。

Graph TD 图示：模块作用域和依赖注入

6. 高级模块概念 (可选)

除了基础概念，Angular 模块还有一些高级特性，例如：

• Module Federation (模块联邦): Module Federation 是一种 Webpack 5 的特性，允许将多个独立的 Angular 应用（或模块）构建和部署，然后在运行时动态地组合成一个更大的应用。这对于微前端架构非常有用。

• Dynamic Module Loading (动态模块加载): Angular 允许在运行时动态加载模块。这可以用于按需加载功能模块，或者根据用户权限动态加载不同的模块。NgModuleFactoryLoader 和 SystemJsNgModuleLoader 等 API 可以用于实现动态模块加载。

• ForRoot() 和 ForChild() 模式: 在设计可复用的模块时，forRoot() 和 forChild() 模式是一种常见的最佳实践。forRoot() 用于在根模块中配置模块，通常用于提供应用级别的单例服务。forChild() 用于在特性模块中导入模块，通常用于配置路由等模块级别的功能。

7. 代码实践和示例演示

为了更好地理解 Angular 模块，我们可以创建一个简单的 Angular 应用，演示模块的使用。

示例应用结构:

my-angular-app/
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   │   ├── app.module.ts (根模块)
│   │   ├── app-routing.module.ts (根路由)
│   │   ├── core/
│   │   │   ├── core.module.ts (核心模块)
│   │   │   └── logger.service.ts (应用级服务)
│   │   ├── shared/
│   │   │   ├── shared.module.ts (共享模块)
│   │   │   ├── button/button.component.ts (共享组件)
│   │   ├── feature1/
│   │   │   ├── feature1.module.ts (特性模块 1)
│   │   │   ├── feature1.component.ts
│   │   │   ├── feature1-routing.module.ts
│   │   ├── feature2/
│   │   │   ├── feature2.module.ts (特性模块 2)
│   │   │   ├── feature2.component.ts
│   │   │   ├── feature2-routing.module.ts
│   │   └── ...
│   ├── ...
├── angular.json
├── package.json
├── ...
​

关键代码片段:

• core.module.ts (核心模块)

import { NgModule, Optional, SkipSelf } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoggerService } from './logger.service';
@NgModule({
  imports: [
    CommonModule
  ],
  providers: [
    LoggerService // 应用级单例服务
  ]
})
export class CoreModule {
  constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
    if (parentModule) {
      throw new Error(
        'CoreModule is already loaded. Import it in the AppModule only');
    }
  }
}
​

• shared.module.ts (共享模块)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ButtonComponent } from './button/button.component';
@NgModule({
  declarations: [
    ButtonComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    CommonModule,
    ButtonComponent
  ]
})
export class SharedModule { }
​

• feature1.module.ts (特性模块 1)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Feature1Component } from './feature1.component';
import { Feature1RoutingModule } from './feature1-routing.module';
import { SharedModule } from '../shared/shared.module';
@NgModule({
  declarations: [
    Feature1Component
  ],
  imports: [
    CommonModule,
    Feature1RoutingModule,
    SharedModule // 使用共享模块
  ]
})
export class Feature1Module { }
​

• app.module.ts (根模块)

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
import { Feature1Module } from './feature1/feature1.module';
import { Feature2Module } from './feature2/feature2.module';
import { SharedModule } from './shared/shared.module';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CoreModule, // 导入核心模块
    Feature1Module,
    Feature2Module,
    SharedModule // 导入共享模块
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
​

• app-routing.module.ts (根路由配置，延迟加载特性模块)

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
  {
    path: 'feature1',
    loadChildren: () => import('./feature1/feature1.module').then(m => m.Feature1Module) // 延迟加载 Feature1Module
  },
  {
    path: 'feature2',
    loadChildren: () => import('./feature2/feature2.module').then(m => m.Feature2Module) // 延迟加载 Feature2Module
  },
  { path: '', redirectTo: '/feature1', pathMatch: 'full' } // 默认路由
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
​

通过这个示例，你可以看到如何组织一个多模块的 Angular 应用，包括根模块、特性模块、共享模块和核心模块。同时，也演示了延迟加载模块和模块之间的依赖关系。

8. 总结

Angular 模块是构建可维护、可扩展 Angular 应用的基石。通过合理地使用模块，我们可以将应用分解为更小的、可管理的单元，提高代码的组织性、可复用性和可维护性。理解不同类型的模块、@NgModule 装饰器的属性、模块的作用域和依赖注入机制，对于开发高质量的 Angular 应用至关重要。 掌握模块化开发方法，将使你能够更高效地构建和维护复杂的 Angular 应用。