首页前端开发JavaScript深入浅析Angular中的依赖注入

深入浅析Angular中的依赖注入

时间2024-01-30 07:27:02发布访客分类JavaScript浏览131
导读:收集整理的这篇文章主要介绍了深入浅析Angular中的依赖注入,觉得挺不错的,现在分享给大家,也给大家做个参考。什么是依赖注入?本篇文章带大家了解一下Angular中的依赖注入,希望对大家有所帮助!依赖注入概念:维基百科对依赖注入的解释:在...
收集整理的这篇文章主要介绍了深入浅析Angular中的依赖注入,觉得挺不错的,现在分享给大家,也给大家做个参考。什么是依赖注入?本篇文章带大家了解一下Angular中的依赖注入,希望对大家有所帮助!

依赖注入概念:

维基百科对依赖注入的解释:在软件工程中,依赖注入是实现控制反转的一种软件设计模式,一个依赖是一个被其他对象(client)调用的对象(服务),注入则是将被依赖的对象(service)实例传递给依赖对象(client)的行为。

将 被依赖的对象传给依赖者,而不需要依赖者自己去创建或查找所需对象是DI的基本原则。

依赖注入允许程序设计遵从依赖倒置原则(简单的说就是要求对抽象进行编程,不要对实现进行编程,这样就降低了客户与实现模块间的耦合) 调用者(client)只需知道服务的接口,具体服务的查找和创建由注入者(injector)负责处理并提供给client,这样就分离了服务和调用者的依赖,符合低耦合的程序设计原则。也是依赖注入的主要目的。【相关教程推荐:《angular教程》】

控制反转

控制反转和依赖注入是相辅相成的。例子:classA依赖classB但是classA不主动创建classB的实例,通过参数的形式传递进来。

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

Angular依赖注入是实例化组件的时候,将服务的实例传递进来,形成了控制反转。

依赖注入

Angular依赖注入使用的都是一个实例,也是Angular通过服务通信的一种方式。如果不适用依赖注入,多个实例,组件间通信也就无法使用服务了。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 InjectionTokenAppConfig>
    ('描述令牌的用途');
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() {
 }
}
    

更多编程相关知识,请访问:编程视频!!

以上就是深入浅析Angular中的依赖注入的详细内容,更多请关注其它相关文章!

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!

Angular

若转载请注明出处: 深入浅析Angular中的依赖注入
本文地址: https://pptw.com/jishu/592219.html
C# 利用委托进行异步处理实例代码 JavaScript能做什么的

游客 回复需填写必要信息