Pub/Sub design pattern angularjs service

Question

I've been trying to use the answer here posted by Mark Rajcok

angular JS - communicate between non-dependend services

I am having trouble understanding his answer. Specially this part:

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

Is the event1ServiceHandlers array populated with functions (here called handler) that is triggered in this forEach loop?

I think it would be much easier to understand with a good example how a publish/subscribe is set up.

I have two services who need to communicate but I want to avoid $rootScope.$broadcast so from what I have read a pub/sub service is the best approach. One of my services need to execute a function on my other service, but that service already has my first service as a dependency so I cannot do the same both ways because of circular dependency.

My question: So assume you have two angularjs services (factory), how does service 1 execute a function on service 2 if service 2 already has service 1 as a dependency. Not using $broadcast and $on

Mark Rajcok · Accepted Answer · 2016-02-11T15:51:26.603

Is the event1ServiceHandlers array populated with functions (here called handler) that is triggered in this forEach loop?

Yes

how does service 1 execute a function on service 2 if service 2 already has service 1 as a dependency

Create service 3, NotificationService as before:

.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);
        }
    };
}])

Have service 2 register a callback function with the NotificationService:

.factory('Service2', ['NotificationService',
function(NotificationService) {
    // event1 handler
    var doSomething = function(someData) {
        console.log('S2', someData);
        // do something here
    }
    // subscribe to event1
    NotificationService.onEvent1(doSomething);
    return {
      // define public API for Service2 here
    }
}])

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

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

Thank you! (I deleted the comment you wished to have deleted). Never thought you could store functions in an array and loop through and execute them like that. Also subscribing using a third service took a little time wrapping my head around :) — Ashkan Hovold, Feb 11 '16 at 15:01
@AshkanAldini, yes, the design pattern is a bit tricky to understand. I modified the example slightly: I renamed the service 2 function `doSomething()`. Hopefully that might make it easier for future readers to understand. — Mark Rajcok, Feb 11 '16 at 15:53

score -1 · Answer 2 · answered Feb 09 '16 at 14:14

-1

In his example, NotificationService is a new service that any of the existing services would depend on. He provided an implementation of Service1 but Service2 would essentially be the same...both depend on NotificationService and neither know about each other.

Service1 and Service2 each subscribe to events by calling NotificationService.onEvent1(event1Happened); and trigger events by calling NotificationService.event1Happened(my_data);.

answered Feb 09 '16 at 14:14

Brad Barber

2,953
1
19
18

That part I understand, but I would like to se an actual example where it is being used, how the subscription is set up between the services using the NotificationService – Ashkan Hovold Feb 09 '16 at 14:24
There's really not much more too it than that...suppose Service1 is only responsible for triggering an event and Service2 was only responsible for handling an event. Then Service2 would subscribe via the notification service by calling `NotificationService.onEvent1(event1Happened); ` and Service1 would publish an event by calling `NotificationService.event1Happened(my_data);` – Brad Barber Feb 09 '16 at 14:33

Pub/Sub design pattern angularjs service

2 Answers2

Linked