Angular learning talks about dependency injection

What is dependency injection? This article will take you to understand dependency injection (DI) in angular, and introduce in detail the two core concepts of the AngularDI framework: injectors and providers. I hope it will be helpful to everyone!

Dependency injection (DI) in angular

1. Overview

Dependency Injection (Dependency Injection), referred to as DI, is a design principle in object-orientedprogramming, used to reduce the number of gaps between codes The coupling degree. [Related tutorial recommendations: "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 needs to use 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, inject its dependencies into the class through the constructor constructor parameters. This method of writing is dependency injection.

Through dependency injection, the coupling between codes is reduced and the maintainability of the code is increased. Code changes in the MailService class no longer affect the EmailSender class.

2. DI framework

Angular has its own DI framework, which will implement the dependency injection processhidden, developers can use complex dependency injection functions by using very simple code.

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

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

• Token: Get the identification of the service instance object

• Injector: Injector, responsibleCreate and maintain instance objects of service classes and inject service instance objects into components (manage 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

The injector is responsible for creating service class instance objects and injecting service class instance objects into the required components.

• Create the injector

  import { ReflectiveInjector } from "@angular/core"
  // 服务类
  class MailService {}
  // 创建注入器并传入服务类
  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 will cache it after creating the service instance

  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) // false

• The search for service instances is similar to the functionScope chain. If the current level can be found, use the current level. If the current level cannot be found, go to the parent to find it

  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 Provider Provider

• Configure the object of the injector, specifying 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 of the access 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")

Establish 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 world.

For more programming related knowledge, please visit: Programming Video! !

The above is the detailed content of Angular learning talks about dependency injection. For more information, please follow other related articles on the PHP Chinese website!