This article will take you to understand dependency injection, introduce the problems solved by dependency injection and its native writing method, and talk about the dependency injection framework of Angular. I hope it will be helpful to everyone!

Recently, I often come across the keyword dependency injection in Angular projects, but I still don’t understand how it is implemented. On Angular’s ??official website, there is only Regarding its use, the detailed principles are not explained, so let's explain it from the native writing method, what problems dependency injection is used to solve, and how it should be expressed using js. [Related tutorial recommendations: "angular tutorial"]

What is Dependency Injection

Dependency injection, referred to as DI, is a design principle in object-oriented programming. Reduce coupling between codes.

Let’s look at a piece of code first

class Video{
    constructor(url){}
}

class Note{
    video: Video
    constructor(){
        this.video = new Video("https://aaaaa.mp4")
    }
    
    getScreenshot(){
        this.video.getScreenshot()
    }
}

const note = new Note()
note.getScreenshot()

Suppose we use a video class, which has a method getScreenshot to obtain screenshots. When instantiating the video class, a video url needs to be passed in like this parameters. Now there is a note class, which needs to call the screenshot method under the video class. Then we can say that the note class depends on the video class. So inside the note class, we need to instantiate the video class, so that we can get the instance object of the video class in the note class and call the screenshot method in it.

The coupling of the above code is too high and is not recommended. For example, if the video address of the Video is changed, then the incoming video URL needs to be changed in Note. This assumes that if there are more The class depends on the video class, so once a change is made, everything must be changed accordingly, which is very inconvenient.

Next, we use dependency injection to solve the above problem:

class Note{
    video: Video
    constructor(video: Video){
        this.video = Video;
    }
}

const video = new Video("https://aaaaa.mp4")
const note = new Note(video)

We instantiate the video class outside the class, and pass the instance to the note class through parameter passing. Through this This method can successfully solve the problem of excessive coupling. We call this method of passing instances through parameters: injection.

Advantages

Dependency injection reduces the coupling between codes and increases the maintainability of the code. Code changes in the video class will not affect the note class.

Angular's DI framework

In the above implementation process, there is still one thing that is not particularly ideal, that is, we need to instantiate the video class outside the class, although this is the only one , but we still hope that no matter how the internal changes of the video class are changed, the external code will not be affected.

In the DI framework provided by Angular, we do not need to instantiate the video class ourselves. It hides the process of implementing dependency injection. For developers, they only need to use a very simple The code can then use sophisticated dependency injection functionality.

There are four core concepts in Angular's DI:

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

• Token: Get the identifier of the service instance object. Angular will maintain many instance objects. When we need to obtain it, we need to obtain it through the identifier.

• Injector: Injector , responsible for creating and maintaining instance objects of service classes, injecting service instance objects into components, and passing them to each component through parameters

• Procider: object, used to configure the injector, specify Create the service class of the service instance object and obtain the identifier of the instance object

Injector injector

We first create an injector through the basic syntax provided by Angular

1. Create an injector

import { ReflectiveInjector } from "@angular/core"
//服務(wù)類
class Video{}
//創(chuàng)建注入器并傳入服務(wù)類
const injector = ReflectiveInjector.resolveAndCreate([ Video ])

Introduce ReflectiveInjector and the resolveAndCreate method is used to create an injector. It receives an array. In the array is the class that needs to create an instance object. This method will return an injector. 2. Get the service class instance object in the injector

const video = injector.get(Video)

There is a get method under the injector, which is used to pass in the identifier and get the instance object. The default identifier is the name of the service class, which is Video

In this way, we can get the instance object of Video. The DI framework provided by Angular makes it unnecessary for us to manually instantiate a class to obtain its instance object. It will do it for us.

2. The instance object of the service is in singleton mode. The injector regrets caching it after creating the service instance.

const video1 = injector.get(Video)
const video2 = injector.get(Video)

console.log(video1 === video1)//true

In other words, no matter how many times the instance object is obtained through the framework, it returns are all the same instance object

3. However, we can create multiple injectors. The objects instantiated by the same service returned by different injectors are not the same

const injector1 = ReflectiveInjector.resolveAndCreate([ Video ])
const injector2 = ReflectiveInjector.resolveAndCreate([ Video ])

const video1 = injector1.get(Video)
const video2 = injector2.get(Video)

console.log(video1 === video1)//false

4. There is a method to create a child injector on the injector called resolveAndCreateChild. This method will create a child injector. The relationship between the parent injector and the child injector is similar to the scope chain of js. The current injector cannot find it. When it arrives, it will search for the parent injector, such as:

const injector = ReflectiveInjector.resolveAndCreate([ Video ])
const injectorChild = injector.resolveAndCreateChild([])

const video1 = injector.get(Video)
const video2 = injectorChild.get(Video)

console.log(video1 === video1)//true

像上面這段代碼，我們在創(chuàng)建子級注入器的時候，不傳遞參數(shù)，但是在子級注入器實(shí)例化的時候，由于自身不存在 Video 這個服務(wù)，它就會去父級查找，當(dāng)然，就找到了父級的 Video 這個服務(wù)并且實(shí)例化，所以后面的兩個實(shí)例化對象相等

總結(jié)

本文介紹了依賴注入解決的問題和它原生的寫法是什么用的，并且介紹了Angular提供給我們的DI框架，用它提供給我們的簡單api實(shí)現(xiàn)了實(shí)例化的過程，并且講解了注入器，也是會分層級的，能提供給我們更好地一個項(xiàng)目設(shè)計(jì)方式。之后有機(jī)會再來講解一下provider以及更多的擴(kuò)展。

更多編程相關(guān)知識，請?jiān)L問：編程視頻?。?/p>

The above is the detailed content of A step-by-step guide to understanding dependency injection in Angular. For more information, please follow other related articles on the PHP Chinese website!