Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about how to achieve Angular dependency injection. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

What is dependency injection?

Dependency injection, referred to as DI, is a design principle in object-oriented programming, which is used to reduce the coupling between code.

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 that has a method getScreenshot to get the screenshot. When instantiating the video class, you need to pass a parameter such as video url. Now there is a note class that needs to call the screenshot method under the video class, so 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 Video is changed, then you need to change the incoming video url in Note. This assumes that if more classes depend on video classes, then once changes are made, everything will have to change accordingly, which is very inconvenient.

Next, 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 de-instantiate the video class outside the class, and pass the instance to the note class by passing parameters. In this way, we can successfully solve the problem of high coupling. We call this way of passing instances through parameters: injection.

Advantages

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

DI Framework of Angular

In the process of the above implementation, there is still a place that is not particularly ideal, that is, we need to instantiate the video class outside the class. although there is only one place, we still hope that no matter how to change the interior of the video class, it won't affect the external code.

In the DI framework provided by Angular, we do not need to instantiate the video class, it hides the process of implementing dependency injection, for developers, only need to use very simple code to use complex dependency injection functions.

There are four core concepts in Angular's DI:

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

Token: get the identity of the service instance object. A lot of instance objects are maintained in Angular. When we need to obtain them, we need to obtain them through identity.

Injector: injector, which is responsible for creating instance objects of maintenance service classes, injecting service instance objects into components and passing them to each component in the form of parameters

Procider: object that configures the injector, specifies the service class that creates the service instance object, and gets the identity of the instance object

Injector injector

Let's first create an injector using the basic syntax provided by Angular

1. Create an injector

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

Introduce ReflectiveInjector where the resolveAndCreate method is used to create an injector, which receives an array of classes that need to create instance objects. This method returns an injector 2. Get the service class instance object in the injector

Const video = injector.get (Video)

Under injector, there is a get method that passes in the identity and gets the instance object. The default identity is the name of the service class, that 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 instantiate a class manually to get its instance object.

2. The instance object of the service is singleton mode, and the injector regrets caching it when 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 the same instance object.

3. However, we can create multiple injectors. Different injectors return different instantiated objects of the same service.

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: resolveAndCreateChild. This method creates a child injector. The relationship between the parent injector and the child injector is similar to the scope chain of js. If the current injector cannot be found, it will go to the parent injector, for example:

Const injector = ReflectiveInjector.resolveAndCreate ([Video]) const injectorChild = injector.resolveAndCreateChild ([]) const video1 = injector.get (Video) const video2 = injectorChild.get (Video) console.log (video1 = video1) / / true

Like the above code, when we create a child injector, we do not pass parameters, but when the child injector is instantiated, it will look up the parent because it does not have the Video service. Of course, it finds the parent Video service and instantiates it, so the next two instantiated objects are equal.

These are all the contents of the article "how to implement Angular dependency injection". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.