深入浅析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中的依赖注入
本文地址: https://pptw.com/jishu/592219.html
