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

This article mainly shows you the "conceptual analysis of dependency injection in Angular", which is easy to understand and clear. I hope it can help you solve your doubts. Let the editor lead you to study and study the conceptual analysis of dependency injection in Angular.

Dependency injection concept:

Wikipedia's explanation of dependency injection: in software engineering, dependency injection is a software design pattern that implements control inversion, a dependency is an object (service) called by other objects (client), and injection is the act of passing dependent object (service) instances to dependent objects (client).

It is the basic principle of DI to pass the dependent object to the dependent without requiring the dependent to create or find the desired object.

Dependency injection allows programming to follow the principle of dependency inversion (to put it simply, it requires programming the abstraction and not the implementation, thus reducing the coupling between the customer and the implementation module) the caller (client) only needs to know the interface of the service, and the injector is responsible for finding and creating the specific service and providing it to the client, thus separating the dependency of the service and the caller It conforms to the programming principle of low coupling. It is also the main purpose of dependency injection. [recommended for related tutorials: "angular tutorial"]

Control reversal

Control inversion and dependency injection complement each other. Example: classA relies on classB, but classA does not actively create an instance of classB, which is passed in as parameters.

Class A {construct (private b: B) {}} class B {} const a: a = new A (new B ())

Angular dependency injection is when a component is instantiated, passing an instance of the service in, resulting in a control inversion.

Dependency injection

Angular dependency injection uses an instance, which is also a way for Angular to communicate through services. If dependency injection is not applied, services cannot be used for communication between multiple instances and components. App.module.ts:

Import {BrowserModule} from'@ angular/platform-browser';import {NgModule, InjectionToken} from'@ angular/core';import {AppComponent} from'. / components/app/app.component';import {SingleServiceService} from'. / service/single-service.service';import {MyServiceService} from'. / service/my-service.service';import {UseServiceService} from'. / service/use-service.service';import {ValueServiceService} from'. / service/value-service.service';import {ReactiveFormsModule, FormsModule} from'@ angular/forms' Import {HttpClientModule} from'@ angular/common/http';export interface AppConfig {title: string} export const CONFIG = new InjectionToken ('describe the purpose of the token') Const USE_Config = {title: "nonclassed token"} @ NgModule ({declarations: [AppComponent], imports: [BrowserModule, HttpClientModule, FormsModule, ReactiveFormsModule], providers: [SingleServiceService, / / full form / / {provide: SingleServiceService, useClass: SingleServiceService} / / provide attribute contains token As a key, it is used when locating dependent values and configuring injectors. / / attribute 2 tells how to create dependencies. The actual dependency values can be useClass, useExisting, useValue or useFactory / / useExisting aliases, dependency injection can also inject components {provide: MyServiceService, useClass: UseServiceService}, / / useValue can be a string Object, etc. {provide: ValueServiceService, useValue: "dependency injection character"}, / / use the InjectionToken object to select a provider token {provide: CONFIG, useValue: USE_Config}], bootstrap: [AppComponent], entryComponents: []}) export class AppModule {}

SingleServiceService:

Import {Injectable} from'@ angular/core';@Injectable () export class SingleServiceService {constructor () {}}

MyServiceService:

Import {Injectable} from'@ angular/core';@Injectable () export class MyServiceService {constructor () {} getName (): string {return "my-service";}}

UseServiceService:

Import {Injectable} from'@ angular/core';@Injectable () export class UseServiceService {constructor () {} getName (): string {return "use-service";}}

ValueServiceService:

Import {Injectable} from'@ angular/core';@Injectable () export class ValueServiceService {constructor () {}} is all the content of this article entitled "Conceptual Analysis of dependency injection in Angular". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to 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.