AngularJS Service Implementing the Pub/Sub Design Pattern

Question

AngularJS Service Implementing the Pub/Sub Design Pattern

I've been browsing for solutions to a problem and stumbled upon an answer provided by Mark Rajcok

angular JS - communicate between non-dependend services

However, I am struggling to fully grasp his explanation, particularly this part:

angular.forEach(event1ServiceHandlers, function(handler) {
            handler(some_data);
});

I'm uncertain if the event1ServiceHandlers array is filled with functions (referred to as handler) that are executed within this forEach loop.

It would be immensely helpful if someone could provide a clear example of setting up a publish/subscribe system.

I have two services that need to communicate with each other, but I want to steer away from using $rootScope.$broadcast. After researching, it seems like implementing a pub/sub service is the optimal approach. One of my services must call a function within the other service. However, due to one service being a dependency of the other, I cannot establish a mutual connection because of circular dependencies.

Therefore, my question is: If you have two AngularJS services (factories), how can service 1 trigger a function in service 2 when service 2 already depends on service 1? This should be done without utilizing $broadcast and $on.

javascript angularjs design-patterns publish-subscribe

Answer 1

Answer №1

Are the handlers in the event1ServiceHandlers array functions that are triggered within this forEach loop?

Affirmative

How can service 1 execute a function on service 2 if service 2 already depends on service 1?

To achieve this, introduce a new service called NotificationService:

.factory('NotificationService', [function() {
    var event1ServiceHandlers = [];
    return {
        // publish
        event1Happened: function(some_data) {
            angular.forEach(event1ServiceHandlers, function(handler) {
                handler(some_data);
            });
        },
        // subscribe
        onEvent1: function(handler) {
            event1ServiceHandlers.push(handler);
        }
    };
}])

Then, have service 2 register a callback function with the NotificationService:

.factory('Service2', ['NotificationService',
function(NotificationService) {
    // Event handler for event1
    var doSomething = function(someData) {
        console.log('S2', someData);
        // Actions to be performed here
    }
    // Subscribe to event1
    NotificationService.onEvent1(doSomething);
    return {
      // Define public API for Service2 here
    }
}])

Whenever service 1 needs to execute the doSomething() function on service 2, it can trigger the event1Happened event:

.factory('Service1', ['NotificationService',
function(NotificationService) {
    var someData = ...;
    return {
       // Define public API for Service1 here
       callService2Method: function() {
         // Trigger event
         NotificationService.event1Happened(someData);
       }
    }
}])

Answer 2

Are the handlers in the event1ServiceHandlers array functions that are triggered within this forEach loop?

Affirmative

How can service 1 execute a function on service 2 if service 2 already depends on service 1?

To achieve this, introduce a new service called NotificationService:

.factory('NotificationService', [function() {
    var event1ServiceHandlers = [];
    return {
        // publish
        event1Happened: function(some_data) {
            angular.forEach(event1ServiceHandlers, function(handler) {
                handler(some_data);
            });
        },
        // subscribe
        onEvent1: function(handler) {
            event1ServiceHandlers.push(handler);
        }
    };
}])

Then, have service 2 register a callback function with the NotificationService:

.factory('Service2', ['NotificationService',
function(NotificationService) {
    // Event handler for event1
    var doSomething = function(someData) {
        console.log('S2', someData);
        // Actions to be performed here
    }
    // Subscribe to event1
    NotificationService.onEvent1(doSomething);
    return {
      // Define public API for Service2 here
    }
}])

Whenever service 1 needs to execute the doSomething() function on service 2, it can trigger the event1Happened event:

.factory('Service1', ['NotificationService',
function(NotificationService) {
    var someData = ...;
    return {
       // Define public API for Service1 here
       callService2Method: function() {
         // Trigger event
         NotificationService.event1Happened(someData);
       }
    }
}])

Answer 3

Answer №2

Within his illustration, the NotificationService emerges as a novel service that any preexisting services would rely upon. Although he presented an implementation of Service1, the functionality for Service2 remains essentially unchanged...both are dependent on NotificationService without either being aware of the other.

Service1 and Service2 individually subscribe to events by invoking

NotificationService.onEvent1(event1Happened);

and trigger events through

NotificationService.event1Happened(my_data);

.

Answer 4

Within his illustration, the NotificationService emerges as a novel service that any preexisting services would rely upon. Although he presented an implementation of Service1, the functionality for Service2 remains essentially unchanged...both are dependent on NotificationService without either being aware of the other.

Service1 and Service2 individually subscribe to events by invoking

NotificationService.onEvent1(event1Happened);

and trigger events through

NotificationService.event1Happened(my_data);

.

AngularJS Service Implementing the Pub/Sub Design Pattern

Answer №1

Answer №2

Similar questions

Tips for saving an image that has been dragged onto the browser locally

Tips for implementing validation in JavaScript

AngularJS: Recommendations for structuring code to dynamically update the DOM in response to AJAX requests

JavaScript - utilize regular expressions to check if the argument starts with a forward slash

What method does jQuery Validation use to configure the validation message?

The Res.redirect function appears to be useless within my Angular-Express project

Idea: Develop a bookmarklet that generates a header form and deletes it upon submission

Transitioning my website to incorporate Angular JS

Using the value from the Vuex state to set the initial value for a different parameter

Troubleshooting the display of API-generated lists in Angular 8

Registration of Laravel Vue.js components

Transitioning from one bootstrap modal to another in quick succession may lead to unexpected scrolling problems

Ways to find the image source using JavaScript/Jquery upon page loading?

The EJS template on the Express app is encountering an issue: it is unable to find the view "/id" within the views directory located at "/home/USER/Desktop/scholarship-app/views"

What is the process of implementing FFT in node.js?

The AJAX success callback function failed to execute in cases where the dataType was set to JSONP during Cross domain Access

Various instances of controllers in Angular.js and JavaScript

Issues arise when attempting to alter the background image using jQuery without browserSync being activated

Decorators do not allow function calls, yet the call to 'CountdownTimerModule' was executed

jQuerry's on method fails to respond to newly added elements through the clone() function