찾다
웹 프론트엔드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으로 문의하시기 바랍니다. 삭제
JavaScript가 C로 작성 되었습니까? 증거를 검토합니다JavaScript가 C로 작성 되었습니까? 증거를 검토합니다Apr 25, 2025 am 12:15 AM

예, JavaScript의 엔진 코어는 C로 작성되었습니다. 1) C 언어는 효율적인 성능과 기본 제어를 제공하며, 이는 JavaScript 엔진 개발에 적합합니다. 2) V8 엔진을 예를 들어, 핵심은 C로 작성되며 C의 효율성 및 객체 지향적 특성을 결합하여 C로 작성됩니다.

JavaScript의 역할 : 웹 대화식 및 역동적 인 웹JavaScript의 역할 : 웹 대화식 및 역동적 인 웹Apr 24, 2025 am 12:12 AM

JavaScript는 웹 페이지의 상호 작용과 역학을 향상시키기 때문에 현대 웹 사이트의 핵심입니다. 1) 페이지를 새로 고치지 않고 콘텐츠를 변경할 수 있습니다. 2) Domapi를 통해 웹 페이지 조작, 3) 애니메이션 및 드래그 앤 드롭과 같은 복잡한 대화식 효과를 지원합니다. 4) 성능 및 모범 사례를 최적화하여 사용자 경험을 향상시킵니다.

C 및 JavaScript : 연결이 설명되었습니다C 및 JavaScript : 연결이 설명되었습니다Apr 23, 2025 am 12:07 AM

C 및 JavaScript는 WebAssembly를 통한 상호 운용성을 달성합니다. 1) C 코드는 WebAssembly 모듈로 컴파일되어 컴퓨팅 전력을 향상시키기 위해 JavaScript 환경에 도입됩니다. 2) 게임 개발에서 C는 물리 엔진 및 그래픽 렌더링을 처리하며 JavaScript는 게임 로직 및 사용자 인터페이스를 담당합니다.

웹 사이트에서 앱으로 : 다양한 JavaScript 애플리케이션웹 사이트에서 앱으로 : 다양한 JavaScript 애플리케이션Apr 22, 2025 am 12:02 AM

JavaScript는 웹 사이트, 모바일 응용 프로그램, 데스크탑 응용 프로그램 및 서버 측 프로그래밍에서 널리 사용됩니다. 1) 웹 사이트 개발에서 JavaScript는 HTML 및 CSS와 함께 DOM을 운영하여 동적 효과를 달성하고 jQuery 및 React와 같은 프레임 워크를 지원합니다. 2) 반응 및 이온 성을 통해 JavaScript는 크로스 플랫폼 모바일 애플리케이션을 개발하는 데 사용됩니다. 3) 전자 프레임 워크를 사용하면 JavaScript가 데스크탑 애플리케이션을 구축 할 수 있습니다. 4) node.js는 JavaScript가 서버 측에서 실행되도록하고 동시 요청이 높은 높은 요청을 지원합니다.

Python vs. JavaScript : 사용 사례 및 응용 프로그램 비교Python vs. JavaScript : 사용 사례 및 응용 프로그램 비교Apr 21, 2025 am 12:01 AM

Python은 데이터 과학 및 자동화에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 데이터 처리 및 모델링을 위해 Numpy 및 Pandas와 같은 라이브러리를 사용하여 데이터 과학 및 기계 학습에서 잘 수행됩니다. 2. 파이썬은 간결하고 자동화 및 스크립팅이 효율적입니다. 3. JavaScript는 프론트 엔드 개발에 없어서는 안될 것이며 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축하는 데 사용됩니다. 4. JavaScript는 Node.js를 통해 백엔드 개발에 역할을하며 전체 스택 개발을 지원합니다.

JavaScript 통역사 및 컴파일러에서 C/C의 역할JavaScript 통역사 및 컴파일러에서 C/C의 역할Apr 20, 2025 am 12:01 AM

C와 C는 주로 통역사와 JIT 컴파일러를 구현하는 데 사용되는 JavaScript 엔진에서 중요한 역할을합니다. 1) C는 JavaScript 소스 코드를 구문 분석하고 추상 구문 트리를 생성하는 데 사용됩니다. 2) C는 바이트 코드 생성 및 실행을 담당합니다. 3) C는 JIT 컴파일러를 구현하고 런타임에 핫스팟 코드를 최적화하고 컴파일하며 JavaScript의 실행 효율을 크게 향상시킵니다.

자바 스크립트 행동 : 실제 예제 및 프로젝트자바 스크립트 행동 : 실제 예제 및 프로젝트Apr 19, 2025 am 12:13 AM

실제 세계에서 JavaScript의 응용 프로그램에는 프론트 엔드 및 백엔드 개발이 포함됩니다. 1) DOM 운영 및 이벤트 처리와 관련된 TODO 목록 응용 프로그램을 구축하여 프론트 엔드 애플리케이션을 표시합니다. 2) Node.js를 통해 RESTFULAPI를 구축하고 Express를 통해 백엔드 응용 프로그램을 시연하십시오.

JavaScript 및 웹 : 핵심 기능 및 사용 사례JavaScript 및 웹 : 핵심 기능 및 사용 사례Apr 18, 2025 am 12:19 AM

웹 개발에서 JavaScript의 주요 용도에는 클라이언트 상호 작용, 양식 검증 및 비동기 통신이 포함됩니다. 1) DOM 운영을 통한 동적 컨텐츠 업데이트 및 사용자 상호 작용; 2) 사용자가 사용자 경험을 향상시키기 위해 데이터를 제출하기 전에 클라이언트 확인이 수행됩니다. 3) 서버와의 진실한 통신은 Ajax 기술을 통해 달성됩니다.

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 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

VSCode Windows 64비트 다운로드

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기

SublimeText3 Mac 버전

SublimeText3 Mac 버전

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

안전한 시험 브라우저

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구