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

Angular Fire: The $on method is missing and causing an error stating that undefined is not a function

Leveraging the local variables within a function in conjunction with the setTimeout method

If I do not utilize v-model within computed, then computed will not provide a value

Customize Link Appearance Depending on Current Section

I'm struggling to comprehend the purpose of this function. [From the Codecademy Contact List exercise]

The issue of asynchronous nested callbacks not functioning properly within each iteration of a for loop in Node.js

Retrieving a specific variable from a cookie value that is stored within a JSON array

Exploring the world of unit testing with Jest in Strapi version 4

Experience the click action that comes equipped with two unique functions: the ability to effortlessly add or remove a class

Get the value of the button that has been clicked

Emulating Data in Angular 2 Using Configuration Similar to Ember Mirage

Avoiding server requests in Firefox by refraining from using ajax

When a new element is added to the DOM, bind a click event to it that will trigger another

What is the method to retrieve the class name of an element when the div is created as '<div id 'one' class="element one"></div>'?

I am looking to incorporate a new "ID" column into my mui data grid table in ReactJS that will incrementally count from 0 to the total number of rows

Having trouble with string matching in JavaScript?

Execute JavaScript function after the reset button has been clicked

Learn the steps for showcasing user information in a tabular layout by utilizing session management with node.js, react.js, and SQL

React Native: Having trouble opening the date picker

Error: Attempting to access properties of undefined object (reading 'hash') has caused an unhandled TypeError