深入浅析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 InjectionToken('描述令牌的用途');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中的依赖注入的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2708171.html

(0)
上一篇 2025年3月7日 20:18:38
下一篇 2025年2月27日 06:29:22

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 聊聊Angular中常用的错误处理方式

    本篇文章带大家深入了解一下angular中常用的错误处理方式,希望对大家有所帮助! 错误处理是编写代码经常遇见的并且必须处理的需求,很多时候处理异常的逻辑是为了避免程序的崩溃,本文将简单介绍Angular处理异常的方式。【相关教程推荐:《a…

    2025年3月7日
    200
  • 带你了解Angular10中的双向绑定

    下面本篇文章带大家了解一下双向绑定,看看angular中两种类型的双向绑定,希望对大家有所帮助! 前面我们了解了属性绑定、事件绑定以及输入和输出的使用,是时候了解双向绑定了。本节,我们将利用@Input()和@Output()来了解下双向绑…

    2025年3月7日 编程技术
    200
  • 浅析Angular中什么是ngModule

    什么是ngmodule?本篇文章带给大家简单了解一下angular语法,介绍一下angular中的ngmodule,希望对大家有所帮助! 作为Angular10教程,在我的理解中,angular相较于VUE,它的模块化做得更好,这样使代码结…

    2025年3月7日
    200
  • 聊聊Angular+Service如何改进日志功能

    如何改善angular的日志使用方式?下面本篇文章给大家介绍一下使用angular中的service管理控制台输出,改进日志功能的方法,希望对大家有所帮助! 改善在Angular 应用中的日志使用方式 Angular是一个非常受欢迎的开发框…

    2025年3月7日 编程技术
    200
  • 深入浅析Angular中的指令、管道和服务

    angular中什么是指令、管道、服务?下面本篇文章带大家了解一下angular中的指令、管道和服务,希望对大家有所帮助! 1. 指令 Directive 指令是 Angular 提供的操作 DOM 的途径。指令分为属性指令和结构指令。【相…

    2025年3月7日
    200
  • 带你了解Angular中的组件通讯和依赖注入

    angular组件间怎么进行通讯?依赖注入是什么?下面本篇文章带大家简单了解一下组件通讯的方法,并介绍一下依赖注入,希望对大家有所帮助! 1.  组件通讯 1.1  向组件内部传递数据 登录后复制 // favorite.component…

    2025年3月7日
    200
  • 浅析Angular中两种类型的Form表单

    本篇文章带大家了解一下angular中两种form表单,简单介绍一下它们的用法,希望对大家有所帮助! 在 Angular 中,表单有两种类型,分别为模板驱动和模型驱动。【相关教程推荐:《angular教程》】 1.  模板驱动 1.1  概…

    2025年3月7日 编程技术
    200
  • 深入了解Angular中的路由,如何快速上手?

    本篇文章带大家深入了解一下angular中的路由,看看快速上手的方法,介绍一下匹配规则、路由传参、路由嵌套、路由守卫等,希望对大家有所帮助! 在 Angular 中,路由是以模块为单位的,每个模块都可以有自己的路由。【相关教程推荐:《ang…

    2025年3月7日
    200
  • 深入浅析Angular中怎么使用动画

    本篇文章带大家了解一下angular 动画,希望对大家有所帮助!! 1.  状态 1.1  什么是状态 状态表示的是要进行运动的元素在运动的不同时期所呈现的样式。【相关教程推荐:《angular教程》】 1.2  状态的种类 在 Angul…

    2025年3月7日 编程技术
    200
  • 浅析Angular中HttpClientModule模块有什么用?怎么用?

    本篇文章带大家了解一下angular中的httpclientmodule模块,介绍一下httpclientmodule模块的使用方法,希望对大家有所帮助! 该模块用于发送 Http 请求,用于发送请求的方法都返回 Observable 对象…

    2025年3月7日
    200

发表回复

登录后才能评论