PubSub 메시지 핸들러로서의 Angular 서비스

Convert Angular service to a Message Handler. Do you want to organize your Angular code base as Service Oriented Architecture (SOA) way. And you want to create an Angular Service that can listen to a Message and react on them just like a N-ServiceBus Message Handlers? Read this article.

PUB/SUB란 무엇입니까?

소프트웨어 아키텍처에서 Pub/Sub는 메시징 패턴인 게시-구독입니다. 메시지는 유형 및 선택적 페이로드가 있는 일반 JavaScript 객체입니다. 게시자라고 하는 메시지 발신자. 메시지 수신자를 가입자라고 합니다. Learn more…

Angular Component의 책임은 무엇입니까?

Angular Component는 다음과 같은 책임을 져야 합니다.

모든 비즈니스 논리를 수행하기 위해 메시지 보내기

UI를 표시할 보기 모델이 있음

메시지를 구독하고 뷰 모델을 업데이트하고 변경 사항을 UI에 반영합니다.

Angular 서비스 책임이란 무엇입니까?

Angular Services는 다음과 같은 책임을 져야 합니다.

복잡한 비즈니스 규칙 수행

서버와 통신

작업이 수행되면 메시지 게시(선택 사항)

Angular의 메시지 핸들러는 무엇입니까?

Angular 프로젝트의 메시지 처리기는 하나 이상의 메시지를 수신/구독하고 비즈니스 로직을 수행할 수 있는 Angular 서비스에 불과합니다. 메시지 처리기는 들어오는 메시지를 처리한 후 게시할 수도 있습니다.

메시지 처리기는 느슨하게 결합된 코드를 작성하고 구성 요소와 서비스 간의 문제를 분리하는 데 도움이 됩니다.

Angular 앱의 메시지 처리기 예

아래는 ShipOrderService 메시지를 수신하고 배송을 처리한 다음 OrderReady 메시지를 게시하는 OrderShipped라는 메시지 핸들러로서의 Angular 서비스의 예입니다.

@fsms/angular-pubsub 노드 패키지 설치

Angular 앱에서 독립형 메시지 서비스를 만드는 데 도움이 되는 하나의 Angular 라이브러리를 만들었습니다. Angular 앱에서 메시지 핸들러를 생성할 수 있도록 설치@fsms/angular-pubsub해 보겠습니다.

아래 스크립트 실행: npm i -S @fsms/angular-pubsub

OrderReady 메시지 작성

주문 준비 정보를 호출하는 메시지 클래스를 만들 수 있습니다OrderReady.

import {
  DefineMessage,
  IMessageSchema,
  IMessage,
} from '@fsms/angular-pubsub';

@DefineMessage<IMessageSchema>()
export class OrderReady implements IMessage {
  static messageType = '[Inventory] Order Ready';
  messageType = OrderReady.messageType;
  constructor(public payload?: any) {}
}

ShipOrderService를 메시지 핸들러로 만들기

import { Injectable } from '@angular/core';
import {
  CallbackOptions,
  IHandleMessage,
  RegisterHandler,
} from '@fsms/angular-pubsub';
import { OrderReady } from '../messages/order-ready-message';
import { OrderShipped } from '../messages/order-shipped-message';

@Injectable({ providedIn: 'root' }) // Angular Service
@RegisterHandler({ 👈
  messages: [OrderReady],👈 // You can listen to many messages
})
export class ShipOrderService implements IHandleMessage<OrderReady> {
  handle({ message, context }: CallbackOptions<OrderReady>): void {
    console.log('[Shipping] Order Shipped', message);

    context.publish(new OrderShipped(message.payload));
    👆 // context will have publish method to publish any message from message handler. 
  }
}

루트 모듈에 메시지 핸들러 등록

루트(앱) 모듈에 메시지 핸들러를 등록합니다. PubsubModule.forRoot([])를 사용하여 앱 메시지 처리기를 등록합니다.

예: 등록ShipOrderService

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { PubsubModule } from '@fsms/angular-pubsub';
import { AppComponent } from './app.component';
import { ShipOrderService } from './services/ship-order.service';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FormsModule,
    PubsubModule.forRoot([ // Register App Module level Message Handlers
      ShipOrderService, 👈
    ]),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Angular 구성 요소에서 메시지 게시

그래서 우리는 우리 ShipOrderService를 생성하고 등록했습니다. 따라서 앱이 시작되면 ShipOrderService가 자동으로 OrederReady 메시지를 구독합니다.

이제 각도 구성 요소에서 메시지를 게시OrderReady하면 서비스handle 메서드가 호출됩니다.
AppComponent로 이동하여 OrderReady 메시지를 게시합니다.

  orderPaid($event: KeyboardEvent) {
    $event.preventDefault();
    this.pubsubService.publish(new OrderReady('20 USD'));
  }

애플리케이션 데모

결론

독립형 메시지 서비스를 만드는 메시지 처리기 아이디어가 정말 마음에 들었습니다. Udi Dahan 이를 자율 구성 요소라고 합니다. 그래서 아이디어를 활용하고 프런트 엔드 프레임워크에서 무언가를 수행하여 Angular 프레임워크에서 자율 구성 요소를 만들 수 있다고 생각했습니다.


이 기사가 마음에 드셨다면 친구들과 공유해 주시고 저와 공유할 제안이나 생각이 있으시면 댓글 상자에 적어주세요.

풀 스택 개발자 되기 💻

나는 Fullstack Master에서 가르칩니다. 소프트웨어 개발자가 되고 새로운 소프트웨어 엔지니어 또는 수석 개발자/설계자로 캐리어를 성장시키려는 경우. 전체 스택 개발 교육 프로그램에 가입하는 것을 고려하십시오. 많은 코딩 실습을 통해 Angular, RxJS, JavaScript, 시스템 아키텍처 등을 배우게 됩니다. All-Access Monthly 멤버십 플랜이 있으며 모든 비디오 코스, 슬라이드, 소스 코드 다운로드 및 월간 화상 통화에 무제한으로 액세스할 수 있습니다.

현재 및 미래의 Angular, node.js 및 관련 과정에 액세스하려면 All-Access Membership PRO plan을 구독하십시오.

PRO 플랜의 모든 것을 얻으려면 All-Access Membership ELITE plan에 가입하세요. 또한 Rupesh와의 월별 라이브 Q&A 화상 통화에 액세스할 수 있으며 의심/질문을 하고 더 많은 도움말, 팁 및 요령을 얻을 수 있습니다.

You bright future is waiting for you so visit today FullstackMaster and allow me to help you to board on your dream software company as a new Software Developer, Architect or Lead Engineer role.

💖 나에게 👋라고 말해!
루페시 티와리
Fullstack Master의 설립자
이메일: [email protected]
웹사이트: www.rupeshtiwari.com | www.fullstackmaster.net