찾다
웹 프론트엔드JS 튜토리얼의존성 주입이란 무엇입니까? Angular에서 어떻게 구현하나요?

이 기사에서는 종속성 주입을 이해하고, 종속성 주입으로 해결되는 문제와 기본 작성 방법을 소개하고, Angular의 종속성 주입 프레임워크에 대해 이야기합니다. 모두에게 도움이 되기를 바랍니다.

의존성 주입이란 무엇입니까? Angular에서 어떻게 구현하나요?

최근 Angular 프로젝트에서 키워드 의존성 주입을 자주 접하는데, Angular 공식 홈페이지에서는 사용법만 이야기하고 자세한 원리는 설명하지 않습니다. 그러면 의존성 주입을 사용하여 해결하는 문제가 무엇인지, js를 사용하여 어떻게 표현해야 하는지 네이티브 작성 방법부터 설명하겠습니다. [관련 튜토리얼 추천: "angular tutorial"]

종속성 주입이란 무엇인가요? DI라고도 하는 종속성 주입은 코드 간의 결합을 줄이는 데 사용되는 객체 지향 프로그래밍의 설계 원칙입니다.

먼저 코드를 살펴보겠습니다

class Video{
    constructor(url){}
}

class Note{
    video: Video
    constructor(){
        this.video = new Video("https://aaaaa.mp4")
    }
    
    getScreenshot(){
        this.video.getScreenshot()
    }
}

const note = new Note()
note.getScreenshot()

스크린샷을 얻기 위해 getScreenshot 메소드가 있는 비디오 클래스를 사용한다고 가정해 보겠습니다. 비디오 클래스를 인스턴스화할 때 비디오 URL과 같은 매개변수를 전달해야 합니다. 이제 비디오 클래스 아래에 스크린샷 메소드를 호출해야 하는 노트 클래스가 있습니다. 그러면 노트 클래스가 비디오 클래스에 따라 달라진다고 말할 수 있습니다. 따라서 노트 클래스 내에서 비디오 클래스를 인스턴스화해야 노트 클래스에 있는 비디오 클래스의 인스턴스 개체를 가져오고 스크린샷 메서드를 호출할 수 있습니다.

위 코드의 결합도가 너무 높아 권장되지 않습니다. 예를 들어 Video의 비디오 주소가 변경되면 Note에서 들어오는 비디오 URL을 변경해야 합니다. on 동영상의 경우 한번 변경하면 그에 맞춰 모든 것을 변경해야 하는데, 이는 매우 불편합니다.

다음으로 위의 문제를 해결하기 위해 종속성 주입을 사용합니다.

class Note{
    video: Video
    constructor(video: Video){
        this.video = Video;
    }
}

const video = new Video("https://aaaaa.mp4")
const note = new Note(video)

클래스 외부에서 비디오 클래스를 인스턴스화하고 매개변수 전달을 통해 인스턴스를 노트 클래스에 전달합니다. 이렇게 하면 결합도도 성공적으로 해결할 수 있습니다. 문제가 발생하면 매개변수를 통해 인스턴스를 전달하는 방식을 주입이라고 부릅니다.

장점종속성 주입을 통해 코드 간의 결합이 줄어들고 코드의 유지 관리성이 높아집니다. 비디오 클래스의 코드 변경은 노트 클래스에 영향을 미치지 않습니다.

Angular의 DI 프레임워크

위 구현 과정에서 아직 특별히 이상적이지 않은 것이 하나 있습니다. 즉, 클래스 외부에서 비디오 클래스를 인스턴스화해야 한다는 것입니다. video class 내부적으로 어떻게 변경하더라도 외부 코드에는 영향을 미치지 않습니다.

Angular에서 제공하는 DI 프레임워크에서는 비디오 클래스를 직접 인스턴스화할 필요가 없으며 개발자에게는 매우 간단한 코드만 사용하면 됩니다.

Angular의 DI에는 네 가지 핵심 개념이 있습니다.

    Dependency: 구성 요소가 의존하는 인스턴스 개체, 서비스 인스턴스 개체
  • Token: 서비스 인스턴스 개체의 ID를 가져오고 Angular는 많은 인스턴스를 유지 관리합니다. 객체를 얻으려면 식별을 통해 이를 획득해야 합니다.
  • 인젝터: 서비스 클래스의 인스턴스 객체를 생성 및 유지 관리하는 인젝터, 서비스 인스턴스 객체를 구성 요소에 주입하고 이를 통해 각 구성 요소에 전달합니다. 매개변수
  • Procider: 인젝터를 구성하는 데 사용되는 개체, 서비스 인스턴스 개체를 생성하기 위한 서비스 클래스를 지정하고 인스턴스 개체의 식별자를 가져옵니다
  • Injector injector

먼저 기본 구문을 통해 인젝터를 생성합니다. Angular에서 제공

1. ReflectiveInjector를 소개합니다. ResolveAndCreate 메소드는 인젝터를 생성하는 데 사용됩니다. 배열에는 인스턴스 객체를 생성하는 데 필요한 클래스가 있습니다. 주사기. 2. 인젝터에서 서비스 클래스 인스턴스 개체 가져오기

import { ReflectiveInjector } from "@angular/core"
//服务类
class Video{}
//创建注入器并传入服务类
const injector = ReflectiveInjector.resolveAndCreate([ Video ])

인젝터 아래에는 식별자를 전달하고 인스턴스 개체를 가져오는 데 사용되는 get 메서드가 있습니다. 기본 식별자는 서비스 클래스의 이름입니다. Video

Video의 인스턴스 객체 Angular에서 제공하는 DI 프레임워크를 사용하면 인스턴스 객체를 얻기 위해 클래스를 수동으로 인스턴스화할 필요가 없습니다.

2. 서비스의 인스턴스 객체가 싱글톤 모드입니다. 인젝터가 서비스 인스턴스를 생성하면 캐싱을 후회합니다

const video = injector.get(Video)

즉, 프레임워크를 통해 인스턴스 객체를 몇 번 얻어도 마찬가지입니다. 동일한 인스턴스 객체를 반환합니다

3. 그러나 여러 인젝터가 반환한 동일한 서비스에 의해 인스턴스화된 객체는 동일하지 않습니다

const video1 = injector.get(Video)
const video2 = injector.get(Video)

console.log(video1 === video1)//true

4. 이 메서드는 자식 인젝터를 생성합니다. 부모 인젝터와 자식 인젝터 사이의 관계는 js의 범위 체인과 유사합니다. 현재 인젝터를 찾을 수 없으면 부모 인젝터로 이동하여 찾습니다. 예:

const injector = ReflectiveInjector.resolveAndCreate([ Video ])
const injectorChild = injector.resolveAndCreateChild([])

const video1 = injector.get(Video)
const video2 = injectorChild.get(Video)

console.log(video1 === video1)//true

像上面这段代码,我们在创建子级注入器的时候,不传递参数,但是在子级注入器实例化的时候,由于自身不存在 Video 这个服务,它就会去父级查找,当然,就找到了父级的 Video 这个服务并且实例化,所以后面的两个实例化对象相等

总结

本文介绍了依赖注入解决的问题和它原生的写法是什么用的,并且介绍了Angular提供给我们的DI框架,用它提供给我们的简单api实现了实例化的过程,并且讲解了注入器,也是会分层级的,能提供给我们更好地一个项目设计方式。之后有机会再来讲解一下provider以及更多的扩展。

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

위 내용은 의존성 주입이란 무엇입니까? Angular에서 어떻게 구현하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
이 기사는 掘金社区에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
聊聊Angular中的元数据(Metadata)和装饰器(Decorator)聊聊Angular中的元数据(Metadata)和装饰器(Decorator)Feb 28, 2022 am 11:10 AM

本篇文章继续Angular的学习,带大家了解一下Angular中的元数据和装饰器,简单了解一下他们的用法,希望对大家有所帮助!

angular学习之详解状态管理器NgRxangular学习之详解状态管理器NgRxMay 25, 2022 am 11:01 AM

本篇文章带大家深入了解一下angular的状态管理器NgRx,介绍一下NgRx的使用方法,希望对大家有所帮助!

浅析angular中怎么使用monaco-editor浅析angular中怎么使用monaco-editorOct 17, 2022 pm 08:04 PM

angular中怎么使用monaco-editor?下面本篇文章记录下最近的一次业务中用到的 monaco-editor 在 angular 中的使用,希望对大家有所帮助!

项目过大怎么办?如何合理拆分Angular项目?项目过大怎么办?如何合理拆分Angular项目?Jul 26, 2022 pm 07:18 PM

Angular项目过大,怎么合理拆分它?下面本篇文章给大家介绍一下合理拆分Angular项目的方法,希望对大家有所帮助!

聊聊自定义angular-datetime-picker格式的方法聊聊自定义angular-datetime-picker格式的方法Sep 08, 2022 pm 08:29 PM

怎么自定义angular-datetime-picker格式?下面本篇文章聊聊自定义格式的方法,希望对大家有所帮助!

Angular + NG-ZORRO快速开发一个后台系统Angular + NG-ZORRO快速开发一个后台系统Apr 21, 2022 am 10:45 AM

本篇文章给大家分享一个Angular实战,了解一下angualr 结合 ng-zorro 如何快速开发一个后台系统,希望对大家有所帮助!

聊聊Angular Route中怎么提前获取数据聊聊Angular Route中怎么提前获取数据Jul 13, 2022 pm 08:00 PM

Angular Route中怎么提前获取数据?下面本篇文章给大家介绍一下从 Angular Route 中提前获取数据的方法,希望对大家有所帮助!

浅析Angular中的独立组件,看看怎么使用浅析Angular中的独立组件,看看怎么使用Jun 23, 2022 pm 03:49 PM

本篇文章带大家了解一下Angular中的独立组件,看看怎么在Angular中创建一个独立组件,怎么在独立组件中导入已有的模块,希望对大家有所帮助!

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

PhpStorm 맥 버전

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

MinGW - Windows용 미니멀리스트 GNU

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경