Angular learning talks about dependency injection

Dependency Injection (DI) in Angular

1. Overview

Dependency Injection (DI), referred to as DI , is a设计原则in面向对象programming that is used to reduce the coupling between codes. [Related tutorial recommendation: "angular tutorial"]

class MailService {
  constructor(APIKEY) {}
}

class EmailSender {
  mailService: MailService
  constructor() {
    this.mailService = new MailService("APIKEY1234567890")
  }

  sendMail(mail) {
    this.mailService.sendMail(mail)
  }
}

const emailSender = new EmailSender()
emailSender.sendMail(mail)

The EmailSender class uses the MailService class when running. The EmailSender class depends on the MailService class, and the MailService class is a dependency of the EmailSender class.

The coupling degree of the above writing method is too high, and the code is not robust. If the MailService class changes the way parameters are passed, the writing method in the EmailSender class will also change.

class EmailSender {
  mailService: MailService
  constructor(mailService: MailService) {
    this.mailService = mailService;
  }
}
const mailService = new MailService("APIKEY1234567890")
const emailSender = new EmailSender(mailService)

When instantiating the EmailSender class, it injects its dependencies into the class through the constructor constructor parameters. This way of writing is dependency injection.

Dependency injection reduces the coupling between codes and increases the maintainability of the code. Code changes in the MailService class no longer affect the EmailSender class.

2. DI framework

Angular has its own DI 框架, which隐藏the process of implementing dependency injection. Developers only need to use very simple code to use complex dependency injection functions.

There are four core concepts in Angular's DI framework:

• Dependency : the instance object on which the component depends, service instance object

• Token : obtains the identity of the service instance object

• Injector : the injector, responsible for创建维护the instance object of the service class and注入into the component Service instance object (manages the creation and acquisition of service objects).

• Provider : Configure the object of the injector, specify the service class to create the service instance object and obtain the identifier of the instance object. (Provider: Provider)

2.1 Injectors

Injectors are responsible for creating service class instance objects and injecting service class instance objects into required components.

• Create an injector

  import { ReflectiveInjector } from "@angular/core"
  //Service class class MailService {}
  //Create the injector and pass in the service class const injector = ReflectiveInjector.resolveAndCreate([MailService])

• Get the service class instance object in the injector

  const mailService = injector.get(MailService)

• The service instance object is in singleton mode, and the injector is in After the service instance is created, it will be cached

  const mailService1 = injector.get(MailService)
  const mailService2 = injector.get(MailService)
  
  console.log(mailService1 === mailService2) // true

• different injectors return different service instance objects

  const injector = ReflectiveInjector.resolveAndCreate([MailService])
  const childInjector = injector.resolveAndCreateChild([MailService])
  
  const mailService1 = injector.get(MailService)
  const mailService2 = childInjector.get(MailService)
  
  console.log(mailService1 === mailService2) // The search for false

• service instances is similar to the function作用域链. If the current level can be found, use the current level. If the current level cannot be found, go to the parent to search

  const injector = ReflectiveInjector.resolveAndCreate([ MailService])
  const childInjector = injector.resolveAndCreateChild([])
  
  const mailService1 = injector.get(MailService)
  const mailService2 = childInjector.get(MailService)
  
  console.log(mailService1 === mailService2) // true

2.2 The Provider

• configuration injector object specifies the service class to create the instance object and the identifier to access the service instance object.

  const injector = ReflectiveInjector.resolveAndCreate([
    { provide: MailService, useClass: MailService }
  ])

• The identifier for accessing the dependent object can also be a string type

  const injector = ReflectiveInjector.resolveAndCreate([
    { provide: "mail", useClass: MailService }
  ])
  const mailService = injector.get("mail")

• useValue

  const injector = ReflectiveInjector.resolveAndCreate([
    {
      provide: "Config",
      useValue: Object.freeze({
        APIKEY: "API1234567890",
        APISCRET: "500-400-300"
      })
    }
  ])
  const Config = injector.get("Config")

establishes a loose coupling relationship between the instance object and the external reference. The external object obtains the instance object through the identifier. As long as the identifier remains unchanged, no matter how the internal code changes, it will not affect the outside.