Angular Service as PubSub Message Handler

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.

What is PUB/SUB?

In software architecture Pub/Sub is publish-subscribe that is a messaging pattern. Message is a Plain JavaScript Object with type and optional payload. Where senders of the messages, called publishers. Receiver of the messages are called subscribers. Learn more…

What are Angular Component’s Responsibilities?

Angular Component must take below responsibilities:

1. Send messages to perform any business logic
2. Have view model to display UI
3. Subscribe to message and update view model and reflect changes in UI.

What is Angular Service Responsibilities?

Angular Services must take below responsibilities:

1. Perform complex business rules
2. Communicate to server
3. Publish messages once task is performed (optional)

What is Message Handler in Angular?

Message handler in angular project is nothing but an angular service that can listens/subscribes to one or more messages and perform business logic. Message Handler can also publish after handling incoming messages.

Message handler helps us to write loosely coupled code and separating concerns between component and services.

Example of Message Handler in Angular app

Below is the example of Angular Service as Message Handler called as ShipOrderService which listens to OrderReady message and process shipping then publishes OrderShipped message.

Installing @fsms/angular-pubsub Node Package

I have created one angular library which will help us to create stand alone message service in your angular app. Let’s Install @fsms/angular-pubsub so that we can create message handlers in our angular app.

Run Below script: npm i -S @fsms/angular-pubsub

Creating OrderReady Message

Lets create a message class that will have order ready information call it 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) {}
}

Creating ShipOrderService as Message Handler

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. 
  }
}

Registering your Message Handler in Root Module

Register your message handler in Root (App) Module. Use PubsubModule.forRoot([]) to register your app message handlers.

Example: Registering 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 {}

Publishing message from the Angular Component

So we have created our ShipOrderService and registered it. So when our app starts then ShipOrderService will automatically subscribe to OrederReady message.

Now if we publish OrderReady message from angular component then service handle method will be called.

Let’s go to AppComponent and publish OrderReady message.

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

Demo of the Application

Conclusion

I really liked the message handler idea to create stand alone message services. Udi Dahan call them Autonomous Components. So I thought lets leverage the idea and do something on front-end framework to create Autonomous Components in Angular Framework.

---

If you enjoyed this article then please share to your friends and if you have suggestions or thoughts to share with me then please write in the comment box.

Become full stack developer 💻

I teach at Fullstack Master. If you want to become Software Developer and grow your carrier as new Software Engineer or Lead Developer/Architect. Consider subscribing to our full stack development training programs. You will learn Angular, RxJS, JavaScript, System Architecture and much more with lots of hands on coding. We have All-Access Monthly membership plans and you will get unlimited access to all of our video courses, slides , download source code & Monthly video calls.

• Please subscribe to All-Access Membership PRO plan to access current and future angular, node.js and related courses.
• Please subscribe to All-Access Membership ELITE plan to get everything from PRO plan. Additionally, you will get access to monthly live Q&A video call with Rupesh and you can ask doubts/questions and get more help, tips and tricks.

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.

💖 Say 👋 to me!

Rupesh Tiwari

Founder of Fullstack Master

Email: [e-mail]

Website: www.rupeshtiwari.com | www.fullstackmaster.net