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

I'm having trouble grasping the concept of this asynchronous behavior

Optimizing Require.js File for Efficient Loading

JavaScript Radio Buttons

Deleting files with a dedicated function (Dropzone.js)

To combine both jquery-1.min.js and jquery.min.js is essential for achieving optimal functionality

Obtain the URL value using jQuery and place it inside a <span> element

Effortless method to handle package.json configurations

Introducing the First Angular Factory

Button for Autocomplete Component in React Material UI to be displayed after clearing the field

How can function expressions result in a returned value?

Access real-time information via JSON

What is the best way to automatically adjust the size of this HTML Menu to match the width of its

The face textures are not being applied correctly to the model imported in THREE.js

Is there a way to incorporate both max-width and min-width in a matchMedia query effectively?

Enter information to accompany your images in the description box

A Vue computed property is returning the entire function instead of the expected value

Struggling to access values from your model using EL in JavaScript? Let me provide some guidance

Codeigniter session unexpectedly ends after AJAX call completes successfully

`Formatting Dates with Google Script`

Validating the same input in Angular Formly allows for consistent and