What are the best methods for capturing individual and time-sensitive occurrences within a service?

Question

What are the best methods for capturing individual and time-sensitive occurrences within a service?

I am currently working on structuring the events within a service to enable a mechanism for subscribing/unsubscribing listeners when a controller's scope is terminated. Previously, I utilized $rootScope.$on in this manner:

if(!$rootScope.$$listeners['event']) {
    $rootScope.$on('event', function(ev, data){
        // perform some actions...
    });
}

or

$scope.$on('$destroy', function(ev, data){
    // unsubscribe the listener
});

To ensure that only one listener exists for each event, it is crucial to remove the listener when the corresponding controller is no longer active; otherwise, the registered function would still be executed.

Therefore, I aim to introduce a $destroy event listener within my controller to eliminate the listener upon scope destruction without repeating this process for every event creation. This motivates me to create a specialized service for encapsulating these events.

angular.module('core').factory('event', [
    function() {
        var service = {};
        service.events = {};
        service.on = function(scope, eventId, callback) {
            scope.$on('$destroy', function(ev, other){
                //unsubscribe
            });
            service.events[eventId] = callback;
            // scope = null; perhaps?
        };
        service.emit = function(eventId, data){
            if (service.events[eventId])
                service.events[eventId](data);
            else
                return new Error('The event is not subscribed');
        };
        return service;
    }
]);

While I could utilize $rootScope directly instead of implementing custom methods, enclosing $on and $emit from $rootScope would lead to similar drawbacks.

As such, I have the following inquiries:

Is it advisable to include the scope reference in a service?
What does $$destroyed signify? Does it indicate that AngularJS has released all internal references to the instance?
Would assigning scope as null in my service facilitate garbage collection or does AngularJS handle object deletion explicitly?
Are there more effective strategies to achieve my objectives?

javascript angularjs angularjs-scope dom-events

Answer 1

Answer №1

Your goal here is essentially to create an event hub. It's clear that you've identified the issues with the current setup and proposed a different approach.

One way to tackle this problem is by extending the $rootScope with your event bus. Here's how you can do it:

app.config(function ($provide) {
$provide.decorator('$rootScope', ['$delegate', '$$bus', function ($delegate, $$bus) {
  Object.defineProperty($delegate.constructor.prototype, '$bus', {
    get: function () {
      var self = this;

      return {
        subscribe: function () {
          var sub = $$bus.subscribe.apply($$bus, arguments);

          self.$on('$destroy',
            function () {
              console.log("Unsubscribing...");
              sub.unsubscribe();

            });
        },

        publish: $$bus.publish
      };
    },
    enumerable: false
  });

  return $delegate;
}]);
});

Here's a basic implementation of the $$bus for reference:

app.factory('$$bus', function () {
  var api = {};
  var events = {};

  api.subscribe = function (event) {
    if (!events.hasOwnProperty(event.name)) {
      events[event.name] = [event];
    } else {
      events[event.name].push(event);
    }
    return {
      unsubscribe: function () {
        api.unsubscribe(event);
      }
    }
  };

  api.publish = function (eventName, data) {
    if (events.hasOwnProperty(eventName)) {
      console.log(eventName);

      angular.forEach(events[eventName], function (subscriber) {
        subscriber.callback.call(this, data);
      });
    }
  };

  api.unsubscribe = function (event) {
    if (events.hasOwnProperty(event.name)) {
      events[event.name].splice(events[event.name].indexOf(event), 1);
      if (events[event.name].length == 0) {
        delete events[event.name];
      }
    }
  };

  return api;
});

All you need to do now is subscribe or publish events, with automatic unsubscription when the $scope is destroyed:

$scope.$bus.subscribe({
  name: 'test', callback: function (data) {
    console.log(data);
  }
});

You can then publish an event later on:

$scope.$bus.publish('test', {name: "Publishing event!"});

It's worth noting that the events are subscribed to each individual $scope, not the $rootScope itself. This ensures that each $scope knows when to release.

This should address your query. You have the flexibility to enhance this mechanism further (e.g., releasing controller event listeners upon view routing, auto-unsubscribing from specific events only, etc.). Best of luck!

** The concept is derived from this source, which utilizes a different bus framework.

Answer 2

Your goal here is essentially to create an event hub. It's clear that you've identified the issues with the current setup and proposed a different approach.

One way to tackle this problem is by extending the $rootScope with your event bus. Here's how you can do it:

app.config(function ($provide) {
$provide.decorator('$rootScope', ['$delegate', '$$bus', function ($delegate, $$bus) {
  Object.defineProperty($delegate.constructor.prototype, '$bus', {
    get: function () {
      var self = this;

      return {
        subscribe: function () {
          var sub = $$bus.subscribe.apply($$bus, arguments);

          self.$on('$destroy',
            function () {
              console.log("Unsubscribing...");
              sub.unsubscribe();

            });
        },

        publish: $$bus.publish
      };
    },
    enumerable: false
  });

  return $delegate;
}]);
});

Here's a basic implementation of the $$bus for reference:

app.factory('$$bus', function () {
  var api = {};
  var events = {};

  api.subscribe = function (event) {
    if (!events.hasOwnProperty(event.name)) {
      events[event.name] = [event];
    } else {
      events[event.name].push(event);
    }
    return {
      unsubscribe: function () {
        api.unsubscribe(event);
      }
    }
  };

  api.publish = function (eventName, data) {
    if (events.hasOwnProperty(eventName)) {
      console.log(eventName);

      angular.forEach(events[eventName], function (subscriber) {
        subscriber.callback.call(this, data);
      });
    }
  };

  api.unsubscribe = function (event) {
    if (events.hasOwnProperty(event.name)) {
      events[event.name].splice(events[event.name].indexOf(event), 1);
      if (events[event.name].length == 0) {
        delete events[event.name];
      }
    }
  };

  return api;
});

All you need to do now is subscribe or publish events, with automatic unsubscription when the $scope is destroyed:

$scope.$bus.subscribe({
  name: 'test', callback: function (data) {
    console.log(data);
  }
});

You can then publish an event later on:

$scope.$bus.publish('test', {name: "Publishing event!"});

It's worth noting that the events are subscribed to each individual $scope, not the $rootScope itself. This ensures that each $scope knows when to release.

This should address your query. You have the flexibility to enhance this mechanism further (e.g., releasing controller event listeners upon view routing, auto-unsubscribing from specific events only, etc.). Best of luck!

** The concept is derived from this source, which utilizes a different bus framework.

What are the best methods for capturing individual and time-sensitive occurrences within a service?

Answer №1

Similar questions

Utilizing Zoomdata data in conjunction with echarts index.js to create a dynamic stacked line chart

Adding JavaScript dependencies in Directives in AngularJS: A Step-by-Step Guide

Error encountered when asynchronously iterating over an object in TypeScript

What could be causing the Or operator to malfunction within the ng-pattern attribute in AngularJS?

Generating a client-side MD5 hash for an image file in order to compare it to the hash calculated by Firebase?

Unable to find custom components when using react-router

What is the best way to access all sections of a JSON file containing nested objects within objects?

Why is Socket.io functioning on localhost but fails to work once deployed to Heroku?

Working with JSON structure using Javascript

Step-by-Step Guide on Dividing Table Row Data into Two Distinct Tables

I encountered an error message while running the Angular JS code that I had written, and I am unable to find a solution to resolve it

Building a matrix-esque table using d3.js reminiscent of HTML tables

Displaying Dates in an Express Application using EJS

Triggering multiple onClick events in React / Material-UI when used within a data.map() loop

Unable to display returned data from an AJAX request made with jQuery autocomplete

"Utilizing jQuery's getJSON method in a session to fetch data

[entity: undefined prototype] { type: 'clip', info: 'Watch my latest video!!' } using nodejs - multer

Why isn't the connect.use() function working in Node.js?

React array mapping issue does not produce any error message

`Switching between two buttons: A guide`