Angular 是一个流行的前端框架，它提供了许多有用的功能，包括依赖注入。接下来将介绍什么是依赖注入，为什么要使用它，以及如何在Angular中实现依赖注入。
依赖注入是一种设计模式，用于将依赖的对象或服务注入到一个类中，而不是在类内部创建这些依赖。依赖注入有助于实现松耦合、易于测试和可维护的代码。在Angular中，依赖注入是一个核心概念，用于管理组件和服务之间的依赖关系。
在Angular中，我们有两种类型的依赖项：本地依赖项和注入依赖项。本地依赖项是依赖于另一个类的类，而注入依赖项是由Angular框架注入的服务、管道或其他类。使用依赖注入，我们可以更好地管理和重用这些依赖项。
使用依赖注入的好处是多方面的。首先，通过将依赖项注入到组件或服务中，我们可以实现代码的松耦合性。这意味着我们可以更容易地更改或替换依赖关系，而无需修改大量的代码。
其次，依赖注入使我们的代码更容易进行单元测试，因为我们可以轻松地将模拟的依赖项注入到被测试的组件或服务中。
最后，依赖注入提高了代码的可维护性，因为它使我们的代码更易于阅读和理解。
在Angular中，依赖注入是通过将依赖项添加到构造函数参数中来实现的。当组件或服务被创建时，Angular会自动解析这些参数，并为我们提供它们的实例。让我们来看一个简单的例子：
import { Component } from '@angular/core';
import { UserService } from './user.service';
@Component({
selector: 'app-user',
template: `{{userService.getUserName()}}`
})
export class UserComponent {
constructor(private userService: UserService) {}
}
在上面的代码中，我们创建了一个名为UserComponent的组件，并在构造函数参数中接收一个私有的userService依赖项。当我们在组件中使用userService时，Angular将会自动注入一个UserService的实例。
要使依赖注入正常工作，我们还需要在Angular应用程序的根模块中注册提供商。提供商告诉Angular如何创建和提供服务的实例。可以像下面这样在app.module.ts文件中注册提供商：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { UserService } from './user.service';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [UserService], // 注册UserService为提供商
bootstrap: [AppComponent]
})
export class AppModule {}
在上述示例中，我们将UserService作为提供商注册到根模块中。这样，Angular会在需要时创建UserService的实例，并将其注入到需要它的组件中。
除了在根模块中注册提供商之外，我们还可以在组件或服务级别上注册提供商。这意味着，我们可以仅为当前组件或服务提供一个特定的实例。
import { Component } from '@angular/core';
import { UserService } from './user.service';
@Component({
selector: 'app-user',
template: `{{userService.getUserName()}}`,
providers: [UserService] // 仅为当前组件提供UserService
})
export class UserComponent {
constructor(private userService: UserService) {}
}
在上面的代码中，我们将UserService作为当前组件的的提供商注册。这意味着UserService的实例仅在UserComponent组件中可用，而不是在整个应用程序中都可用。
此外，在注入依赖项时，我们还可以使用@Inject()注释指定要注入的特定依赖项。这是在需要为同一个Token提供多个不同实例时非常有用的。这里是一个示例：
import { Component, Inject } from '@angular/core';
import { APP_CONFIG, AppConfig } from './app-config';
@Component({
selector: 'app-root',
template: `{{appName}}`
})
export class AppComponent {
constructor(@Inject(APP_CONFIG) private config: AppConfig) {}
get appName() {
return this.config.appName;
}
}
在上述示例中，我们使用@Inject(APP_CONFIG)注释指定要注入的依赖项是APP_CONFIG，并使用提供商AppConfig来提供它。
在Angular中，有许多技巧可以帮助我们更好地使用依赖注入。以下是一些常见的技巧：
通过将代码分成几个不同的层，我们可以更好地表示它们之间的依赖关系。例如，我们可以将组件分为表示层和模型层，将服务分为业务逻辑层和数据访问层。
惰性注入是指在需要时才将依赖项提供给组件或服务。使用惰性注入可以提高性能和减少资源消耗，因为我们不会在不需要的时候加载依赖项。
装饰器是一种语法糖，用于修改类或其成员的行为。在Angular中，我们可以使用装饰器来指定注入依赖项所需的元数据，例如提供商和Token。
在Angular中，我们应该尽量避免硬编码依赖项，而应该使用依赖注入来提供它们。这样，我们可以更轻松地更改它们，并保持代码的易于维护性和可读性。
刚刚接触Angular，总结理论知识和简单例子，希望能帮助后来学习Angular的人。
诸位加油
大鹏一日同风起 扶摇直上九万里