依赖注入原理

概述

依赖注入（Dependency Injection，简称 DI）是一种设计模式，用于实现控制反转（Inversion of Control，简称 IoC）。在 Angular 中，依赖注入是一个核心概念，它允许我们以一种松耦合的方式管理组件和服务之间的依赖关系。通过依赖注入，我们可以更容易地测试和维护代码，同时提高代码的可重用性。

理论解释

什么是依赖注入？

依赖注入是一种编程技术，其中一个对象（或函数）的依赖关系由外部实体（通常是容器）提供，而不是由对象自己创建或查找。这种技术有助于减少代码的耦合度，使得代码更易于测试和维护。

Angular 中的依赖注入

在 Angular 中，依赖注入是通过 @Injectable 装饰器和 @NgModule 中的 providers 配置来实现的。Angular 提供了一个依赖注入容器，它负责创建和管理服务的实例，并将这些实例注入到需要它们的组件或其他服务中。

代码示例

创建一个服务

首先，我们创建一个简单的服务，该服务将提供一些数据。

// data.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  getData(): string {
    return 'Hello, Dependency Injection!';
  }
}

在这个例子中，我们使用 @Injectable 装饰器将 DataService 标记为一个可注入的服务，并通过 providedIn: 'root' 将其注册为根注入器的服务。

在组件中使用服务

接下来，我们在一个组件中使用这个服务。

// app.component.ts
import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  template: `<h1>{{ message }}</h1>`
})
export class AppComponent {
  message: string;

  constructor(private dataService: DataService) {
    this.message = this.dataService.getData();
  }
}

在这个组件中，我们通过构造函数注入 DataService，并在组件的 message 属性中使用服务提供的数据。

提供者配置

在某些情况下，我们可能需要在模块级别配置服务提供者。例如，如果我们希望在特定的模块中提供一个服务的不同实现，我们可以这样做：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { DataService } from './data.service';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [DataService], // 在这里配置提供者
  bootstrap: [AppComponent]
})
export class AppModule {}

在这个例子中，我们在 AppModule 的 providers 数组中配置了 DataService，这意味着 DataService 的实例将由模块的注入器提供。

实践练习

练习 1：创建和使用服务

1. 创建一个新的 Angular 项目。
2. 创建一个名为 UserService 的服务，该服务提供一个方法 getUsers()，返回一个用户列表。
3. 在 AppComponent 中注入 UserService，并使用它来显示用户列表。

练习 2：配置提供者

1. 创建一个新的服务 MockUserService，该服务返回一个固定的用户列表。
2. 在 AppModule 中配置 MockUserService 作为 UserService 的提供者。
3. 验证 AppComponent 是否使用了 MockUserService 提供的用户列表。

总结

依赖注入是 Angular 中一个强大的工具，它帮助我们管理组件和服务之间的依赖关系，使代码更加模块化和可测试。通过理解依赖注入的原理和实践，我们可以更好地利用 Angular 的强大功能来构建复杂的应用程序。

在接下来的课程中，我们将深入探讨 Angular 的其他高级主题，如路由配置、表单处理、HTTP 通信等。