title: How do I keep track of events in AngularJS?
body: <p>I have an app that has items, and you can do things like add new items, update the text of an item, move the item to a different folder, etc.</p>
  
  <p>I have an <code>items</code> factory that holds all the items as plain objects inside an array, and the factory returns a singleton that has various methods, like <code>get()</code>, <code>set()</code>, etc.</p>
  
  <p>To add some context to the question, I'm working with Node.js and MongoDB as well.</p>
  
  <p>Anyway, due to all the various factories I have, like <code>items</code>, <code>folders</code>, and all the various controllers for different views, I am relying heavily on events. To give some examples:</p>
  
  <pre><code>// items factory
  update: function(params) {
      // add to database, then...
      .then(function() {
          $rootScope.$emit('itemCreated');
      });
  }
  </code></pre>
  
  <p>
  
  <pre><code>// items controller
  
  // I need to refresh the items list in the scope
  $rootScope.$on('itemCreated', function() { // when an item is added to the database
      $scope.items = items.getAll(); // retrieve all items from the items factory
  });
  </code></pre>
  
  <p>These are their own kind of "subset" of events, in that they <em>all pertain to "CRUD" operations on items</em>.</p>
  
  <p>But, I also have other events that I use. For example, I have an interceptor that listens to any requests and responses. I have a loading widget (an image of a spinning wheel) that uses a directive. This directive will show the loading widget when a request begins, and hide the loading widget when a request ends. This is also event based.</p>
  
  <pre><code>// on request
  $rootScope.$emit(_START_REQUEST_);
  
  // on any response
  $rootScope.$emit(_END_REQUEST_);
  </code></pre>
  
  <p>I attempted to "modularize" these request and response events by simply making them constants.</p>
  
  <pre><code>.constant('_START_REQUEST_', '_START_REQUEST_');
  </code></pre>
  
  <p>I am trying to find a solution in order to "modularize" all my other events, like the events emitted on CRUD operations for items. One idea I've had is to define all of the item CRUD events inside the <code>items</code> factory:</p>
  
  <pre><code>events: {
      update: 'itemUpdate',
      create: 'itemCreated'
      // etc.
  }
  </code></pre>
  
  <p>Then, I can simply inject my <code>items</code> factory into a controller, and reference events like so:</p>
  
  <pre><code>$rootScope.$on(items.events.update, function() {});
  </code></pre>
  
  <p>I also considered simply defining <strong>all</strong> events, regardless of whether they are interceptor events or item events, as constants in my app. However, it seemed like this solution directly coupled item events to the module itself, rather than to the <code>items</code> factory, which is where I feel they "belong".</p>
  
  <p>Basically, the issue is that right now all my events definitions seem to be scattered around. My question is: <strong>what pattern or best practice would you recommend for modularizing and defining events in AngularJS?</strong></p>