의존성 주입에 대한 각도 학습 이야기
의존성 주입이란 무엇인가요? 이 글은 angular의 종속성 주입(DI)을 안내하고 AngularDI 프레임워크의 두 가지 핵심 개념인 인젝터와 제공자를 자세히 소개합니다.
Angular
1. 개요
종속성 주입(종속성 주입)은 DI
라고 합니다. 지향 code>프로그래밍의 설계 원칙
으로, 코드 간의 DI
,是面向对象
编程中的一种设计原则
,用来减少代码之间的耦合度。【相关教程推荐:《angular教程》】
class MailService { constructor(APIKEY) {} } class EmailSender { mailService: MailService constructor() { this.mailService = new MailService("APIKEY1234567890") } sendMail(mail) { this.mailService.sendMail(mail) } } const emailSender = new EmailSender() emailSender.sendMail(mail)
EmailSender 类运行时要使用 MailService 类,EmailSender 类依赖 MailService 类,MailService 类是 EmailSender 类的依赖项。
以上写法的耦合度太高,代码并不健壮。如果 MailService 类改变了参数的传递方式,在 EmailSender 类中的写法也要跟着改变。
class EmailSender { mailService: MailService constructor(mailService: MailService) { this.mailService = mailService; } } const mailService = new MailService("APIKEY1234567890") const emailSender = new EmailSender(mailService)
在实例化 EmailSender 类时将它的依赖项通过 constructor 构造函数参数的形式注入到类的内部,这种写法就是依赖注入。
通过依赖注入降了代码之间的耦合度,增加了代码的可维护性。MailService 类中代码的更改再也不会影响 EmailSender 类。
2、DI 框架
Angular 有自己的 DI 框架
,它将实现依赖注入的过程隐藏
了,对于开发者来说只需使用很简单的代码就可以使用复杂的依赖注入功能。
在 Angular 的 DI 框架中有四个核心概念:
Dependency
:组件要依赖的实例对象,服务实例对象Token
:获取服务实例对象的标识Injector
:注入器,负责创建维护
服务类的实例对象并向组件中注入
服务实例对象(管理服务对象的创建和获取)。Provider
:配置注入器的对象,指定创建服务实例对象的服务类和获取实例对象的标识。(Provider:提供程序)
2.1 注入器 Injectors
注入器负责创建服务类实例对象,并将服务类实例对象注入到需要的组件中。
创建注入器
import { ReflectiveInjector } from "@angular/core" // 服务类 class MailService {} // 创建注入器并传入服务类 const injector = ReflectiveInjector.resolveAndCreate([MailService])
로그인 후 복사获取注入器中的服务类实例对象
const mailService = injector.get(MailService)
로그인 후 복사服务实例对象为单例模式,注入器在创建服务实例后会对其进行缓存
const mailService1 = injector.get(MailService) const mailService2 = injector.get(MailService) console.log(mailService1 === mailService2) // true
로그인 후 복사不同的注入器返回不同的服务实例对象
const injector = ReflectiveInjector.resolveAndCreate([MailService]) const childInjector = injector.resolveAndCreateChild([MailService]) const mailService1 = injector.get(MailService) const mailService2 = childInjector.get(MailService) console.log(mailService1 === mailService2) // false
로그인 후 복사服务实例的查找类似函数
을 줄이는 데 사용됩니다. [관련 튜토리얼 추천: "作用域链
커플링 angular tutorial
const injector = ReflectiveInjector.resolveAndCreate([MailService])
const childInjector = injector.resolveAndCreateChild([])
const mailService1 = injector.get(MailService)
const mailService2 = childInjector.get(MailService)
console.log(mailService1 === mailService2) // true
로그인 후 복사EmailSender 클래스는 실행 시 MailService 클래스를 사용해야 합니다. EmailSender 클래스는 MailService 클래스에 종속되고 MailService 클래스는 EmailSender 클래스에 종속됩니다.
위 작성 방법의 결합도가 너무 높아서 코드가 견고하지 않습니다. MailService 클래스가 매개변수 전달 방식을 변경하면 EmailSender 클래스의 쓰기 방법도 변경됩니다. const injector = ReflectiveInjector.resolveAndCreate([MailService]) const childInjector = injector.resolveAndCreateChild([]) const mailService1 = injector.get(MailService) const mailService2 = childInjector.get(MailService) console.log(mailService1 === mailService2) // true
EmailSender 클래스를 인스턴스화할 때 생성자 생성자 매개변수 형식으로 해당 종속성을 클래스 내부에 주입하는 방법이 종속성 주입입니다.
- 종속성 주입을 통해 코드 간의 결합이 줄어들고 코드의 유지 관리성이 높아집니다. MailService 클래스의 코드 변경 사항은 더 이상 EmailSender 클래스에 영향을 주지 않습니다.
- 2. DI 프레임워크
const injector = ReflectiveInjector.resolveAndCreate([ { provide: MailService, useClass: MailService } ])
숨기기
하는 자체 DI 프레임워크
가 있습니다. 매우 간단한 코드로 사용됩니다. Angular의 DI 프레임워크에는 네 가지 핵심 개념이 있습니다. 종속성
: 구성 요소가 의존하는 인스턴스 개체, 서비스 인스턴스 개체🎜🎜🎜🎜토큰
: 가져오기 서비스 인스턴스 개체의 ID🎜🎜🎜🎜인젝터
: 서비스 클래스의 인스턴스 개체를 생성 및 유지
하고 주입
하는 역할을 담당하는 인젝터 서비스를 구성 요소 인스턴스 개체에 추가합니다(서비스 개체의 생성 및 획득을 관리함). 🎜🎜🎜🎜Provider
: 인젝터의 개체를 구성하고, 서비스 클래스를 지정하여 서비스 인스턴스 개체를 생성하고, 인스턴스 개체의 식별자를 얻습니다. (Provider: Provider) 🎜🎜🎜🎜🎜2.1 인젝터 Injectors🎜🎜🎜인젝터는 서비스 클래스 인스턴스 개체를 생성하고 서비스 클래스 인스턴스 개체를 필수 구성 요소에 주입하는 역할을 담당합니다. 🎜🎜🎜🎜인젝터 만들기🎜const injector = ReflectiveInjector.resolveAndCreate([ { provide: "mail", useClass: MailService } ]) const mailService = injector.get("mail")
const injector = ReflectiveInjector.resolveAndCreate([ { provide: "Config", useValue: Object.freeze({ APIKEY: "API1234567890", APISCRET: "500-400-300" }) } ]) const Config = injector.get("Config")
scope chain
함수와 유사합니다. 현재 수준을 찾을 수 있으면 현재 수준을 사용합니다. 찾을 수 없으면 상위 수준으로 이동하여 인젝터를 구성하는 🎜rrreee🎜🎜🎜🎜2.2 Provider 🎜🎜🎜🎜🎜 개체를 찾아 인스턴스 개체를 생성할 서비스 클래스와 서비스 인스턴스 개체에 액세스할 식별자를 지정합니다. 🎜rrreee🎜🎜🎜종속 개체에 대한 액세스 식별은 문자열 유형일 수도 있습니다. 🎜rrreee🎜🎜🎜useValue🎜rrreee🎜🎜🎜 외부 개체는 인스턴스 개체를 가져옵니다. 식별을 통해 식별이 유지되는 한 내부 코드가 어떻게 변경되더라도 외부 세계에는 영향을 미치지 않습니다. 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜위 내용은 의존성 주입에 대한 각도 학습 이야기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

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

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

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

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

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

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

뜨거운 주제











Angular.js는 동적 애플리케이션을 만들기 위해 자유롭게 액세스할 수 있는 JavaScript 플랫폼입니다. HTML 구문을 템플릿 언어로 확장하여 애플리케이션의 다양한 측면을 빠르고 명확하게 표현할 수 있습니다. Angular.js는 코드를 작성, 업데이트 및 테스트하는 데 도움이 되는 다양한 도구를 제공합니다. 또한 라우팅 및 양식 관리와 같은 많은 기능을 제공합니다. 이 가이드에서는 Ubuntu24에 Angular를 설치하는 방법에 대해 설명합니다. 먼저 Node.js를 설치해야 합니다. Node.js는 서버 측에서 JavaScript 코드를 실행할 수 있게 해주는 ChromeV8 엔진 기반의 JavaScript 실행 환경입니다. Ub에 있으려면

이 글은 여러분이 계속해서 Angular를 배우고 Angular의 독립형 컴포넌트(Standalone Component)를 간략하게 이해하는 데 도움이 되기를 바랍니다.

이 글은 Angular의 상태 관리자 NgRx에 대한 심층적인 이해를 제공하고 NgRx 사용 방법을 소개하는 글이 될 것입니다.

각도에서 모나코 편집기를 사용하는 방법은 무엇입니까? 다음 글은 최근 비즈니스에서 사용되는 Monaco-Editor의 활용 사례를 기록한 글입니다.

이 기사는 Angular의 실제 경험을 공유하고 ng-zorro와 결합된 angualr을 사용하여 백엔드 시스템을 빠르게 개발하는 방법을 배우게 될 것입니다. 모든 사람에게 도움이 되기를 바랍니다.

앵귤러 유니버셜(Angular Universal)을 아시나요? 웹사이트가 더 나은 SEO 지원을 제공하는 데 도움이 될 수 있습니다!

인터넷의 급속한 발전과 함께 프론트엔드 개발 기술도 지속적으로 개선되고 반복되고 있습니다. PHP와 Angular는 프런트엔드 개발에 널리 사용되는 두 가지 기술입니다. PHP는 양식 처리, 동적 페이지 생성, 액세스 권한 관리와 같은 작업을 처리할 수 있는 서버측 스크립팅 언어입니다. Angular는 단일 페이지 애플리케이션을 개발하고 구성 요소화된 웹 애플리케이션을 구축하는 데 사용할 수 있는 JavaScript 프레임워크입니다. 이 기사에서는 프론트엔드 개발에 PHP와 Angular를 사용하는 방법과 이들을 결합하는 방법을 소개합니다.

Angular 프레임워크의 구성 요소에 대한 기본 표시 동작은 블록 수준 요소에 대한 것이 아닙니다. 이 디자인 선택은 구성 요소 스타일의 캡슐화를 촉진하고 개발자가 각 구성 요소가 표시되는 방법을 의식적으로 정의하도록 장려합니다. CSS 속성 표시를 명시적으로 설정하면 Angular 구성 요소의 표시를 완전히 제어하여 원하는 레이아웃과 응답성을 얻을 수 있습니다.
