Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this "angular dependency injection case Analysis" article, so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "angular dependency injection case Analysis" article.

Dependency injection (DI) in angular

1. Overview

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.

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 runs using the MailService class, the EmailSender class depends on the MailService class, and the MailService class is a dependency of the EmailSender class.

The coupling of the above writing is too high, and the code is not robust. If the MailService class changes the way parameters are passed, the way it is written 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 an EmailSender class is instantiated, its dependencies are injected into the class in the form of constructor constructor parameters, which is called dependency injection.

Dependency injection reduces the coupling between the code and increases the maintainability of the code. Changes to the code in the MailService class no longer affect the EmailSender class.

2. DI framework

Angular has its own DI framework, which hides the process of implementing dependency injection, and developers can use complex dependency injection functionality with 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: gets the identity of the service instance object

Injector: an injector that is responsible for creating instance objects of maintenance service classes and injecting service instance objects into components (managing the creation and acquisition of service objects).

Provider: configure the injector's object, specify the service class that creates the service instance object, and get the identity of the instance object. (Provider: provider)

2.1 Injector Injectors

The injector is responsible for creating service class instance objects and injecting service class instance objects into the 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 caches 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 lookup of the service instance is similar to the function scope chain. If the current level can be found, the current level is used. 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) / / true2.2 provider Provider

Configure the object of the injector, specifying the service class that creates the instance object and the identity of the access service instance object.

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

The identity 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: "500400300"})]) const Config = injector.get ("Config")

The instance object is loosely coupled with the external reference, and the external gets the instance object through the identity. As long as the identity remains the same, the internal code will not affect the external.

The above is about the content of this article "angular dependency injection case Analysis". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow 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.