An in-depth analysis of dependency injection in Angular

What is dependency injection? This article will take you through dependency injection in Angular, I hope it will be helpful to you!

Dependency injection concept:

Wikipedia’s explanation of dependency injection: In software engineering, Dependency injection is a software design pattern that implements inversion of control. A dependency is an object (service) called by another object (client). Injection is to pass the dependent object (service) instance to the dependent object (client). the behavior of.

It is the basic principle of DI to pass the dependent objects to the dependents without requiring the dependents to create or find the required objects themselves.

Dependency injection allows programming to follow the principle of dependency inversion (simply put, it requires programming the abstraction, not the implementation, thus reducing the coupling between the client and the implementation module). The caller (client) only It is necessary to know the interface of the service. The search and creation of specific services are handled by the injector and provided to the client. This separates the dependence of the service and the caller and complies with the low-coupling programming principle. It is also the main purpose of dependency injection. [Related tutorial recommendations: "angular tutorial"]

Inversion of control

Inversion of control and dependency injection are complementary to each other. Example: classA depends on classB but classA does not actively create an instance of classB and passes it in as a parameter.

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

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

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, multiple instances and inter-component communication will not be able to use services. 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<AppConfig>(&#39;描述令牌的用途&#39;);

const USE_Config = {
    title: "非类的注入令牌"
}

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        FormsModule,
        ReactiveFormsModule
    ],
    providers: [
        SingleServiceService,
        // 完整形式
        // {provide: SingleServiceService, useClass: SingleServiceService}
        // provide 属性存有令牌，它作为一个 key，在定位依赖值和配置注入器时使用。
        // 属性二通知如何创建依赖，实际依赖的值可以是useClass、 useExisting、useValue 或 useFactory
        // useExisting起别名,依赖注入也可以注入组件
        {provide: MyServiceService, useClass: UseServiceService},
        // useValue可以是字符串，对象等
        {provide: ValueServiceService, useValue: "依赖注入字符"},
        // 使用 InjectionToken 对象来为非类的依赖选择一个提供者令牌
        { 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() { }

}

More For more programming related knowledge, please visit: programming video! !

The above is the detailed content of An in-depth analysis of dependency injection in Angular. For more information, please follow other related articles on the PHP Chinese website!