angular学习之依赖注入-猿码集

1. 什么是依赖注入

依赖注入（Dependency Injection）是一种设计模式，是面向对象编程中的一种技术，其目的是为了实现对象之间的解耦。依赖注入可以把一个组件所依赖的其他组件的实例化及其依赖关系的维护，从这个组件代码中分离出来，减少依赖关系，降低耦合性。

这个模式主要是通过外部注入方式来给类、对象、组件所需的依赖项、属性或者方法，而不是在类、对象或者组件中硬编码。

2. 为什么要使用依赖注入

在没有使用依赖注入的情况下，组件之间直接产生依赖关系，这样就会产生很多问题，如：

2.1 耦合性高

在没有使用依赖注入的情况下，组件之间会产生互相依赖的情况，这样会导致多个组件之间耦合性非常紧密。在实际开发中，当我们需要修改一个组件时，就必须要同时修改其他与该组件相关的组件，这样会导致代码维护成本和修改成本非常高。

2.2 可测试性差

在没有使用依赖注入的情况下，组件之间的依赖关系会使得代码变得难以测试，因为需要测试某个组件时，同时需要实例化所有依赖该组件的组件，需要测试的数量会非常庞大。

2.3 代码复用性差

在没有使用依赖注入的情况下，为了保证组件之间的耦合性，我们需要在不同的组件中硬编码这些组件的依赖关系，这样会导致代码复用性非常差。

使用依赖注入可以解决以上问题，提高代码的可维护性、可测试性、可复用性等，也是现在前端开发中不可或缺的一个重要技术。

3. Angular中的依赖注入

Angular是一个基于依赖注入的框架，在Angular中，依赖注入主要体现在组件的构造函数中。

在组件的构造函数中，我们需要声明需要用到的服务或依赖项，并且这些服务或依赖项会被自动注入到组件中，这样我们就可以直接在组件中使用这些服务或依赖项，而不必自己去实例化它们或者在组件中硬编码。

接下来我们通过一个例子来理解在Angular中如何使用依赖注入。

4. Angular中依赖注入的使用

4.1 手动创建服务

首先我们需要创建一个服务，我们可以使用Angular的CLI快速创建一个服务：

ng generate service service-name

命令执行成功后，会在app目录下自动生成一个service-name.service.ts文件。

下面我们来看一下这个服务的代码：

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class ServiceNameService {
  constructor() { }
  getData() {
    return "Hello, Angular";
  }
}

在上面的代码中，我们使用Angular的@Injectable()注解，表示这是一个可注入的服务。在@Injectable()注解中，我们可以传递一个参数，指定这个服务应该被注入的模块。

接下来我们需要在一个组件中使用这个服务，下面是这个组件的代码：

import { Component, OnInit } from '@angular/core';
import { ServiceNameService } from '../service-name.service';
@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
  constructor(private serviceName: ServiceNameService) { }
    ngOnInit() {
      let data = this.serviceName.getData();
      console.log(data);
    }
}

在上面的代码中，我们通过构造函数注入了ServiceNameService，并在ngOnInit()方法中调用该服务的getData()方法来获取数据。

需要注意的是，在构造函数中声明时需要在参数前面加上private或public等修饰符，私有化以后在组件中就不能通过this.serviceName进行访问，只能通过构造函数来获取服务。

完成上述操作后，我们就可以打开控制台查看输出的数据，即可看到从服务中获取的数据。

4.2 使用HttpClient服务获取远程数据

在实际开发中，很多时候我们需要从远程服务器获取数据，此时我们可以使用Angular HttpClient服务，在获取数据时，我们同样需要在组件的构造函数中注入HttpClient服务，在ngOnInit()方法中使用HttpClient服务的get()方法来获取远程数据。

下面是一个简单的例子，通过HttpClient服务从远程服务器获取数据：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
  constructor(private http: HttpClient) { }
  ngOnInit() {
      this.http.get('https://jsonplaceholder.typicode.com/users').subscribe(data => {
      console.log(data);
    });
  }
}

在上面的代码中，我们通过HttpClient对象的get()方法来获取远程服务器的数据，并将获取到的数据输出至控制台。

需要注意的是，在使用HttpClient服务时，我们需要引入HttpClient模块，在构造函数中声明HttpClient对象，并在ngOnInit()方法中使用HttpClient对象的get()方法来获取数据。

5. 总结

依赖注入是一种非常重要、实用的设计模式，它可以把对象之间的依赖关系从组件代码中分离出来，降低耦合性，提高代码的可维护性、可测试性、可复用性等。在Angular中，依赖注入是非常重要的一个功能，它可以让我们更加方便、快捷、高效地开发应用程序。

在实际开发中，我们应该尽可能地使用依赖注入，对于必须自己实例化的对象，我们应该将其创建成服务，在组件中注入使用。

angular学习之依赖注入