title: Angular Module Organization/Architecture
body: <p>Having worked with angular for a while now, I am now seeing people break a single application out into multiple modules and I am debating the merits of such an approach.</p>
  
  <h2>Single Module</h2>
  
  <pre><code>angular.module('myApp', []);
  angular.module('myApp').controller('FooCtrl', function(){});
  angular.module('myApp').service('foo', function(){});
  angular.module('myApp').directive('fooElement', function(){});
  </code></pre>
  
  <h2>Multiple Modules</h2>
  
  <pre><code>angular.module('myApp.Controllers', []);
  angular.module('myApp.Controllers').controller('FooCtrl', function(){});
  angular.module('myApp.Services', []);
  angular.module('myApp.Services').service('foo', function(){});
  angular.module('myApp.Directives');
  angular.module('myApp.Directives').directive('fooElement', function(){});
  
  // Then inject the separate modules into the "parent" module
  angular.module('myApp', [
      'myApp.Controllers',
      'myApp.Services',
      'myApp.Directives']);
  </code></pre>
  
  <p>I am all for modularity, but these separate modules are so specific that they are not going to get any reuse outside of the app in which they are created that they will not be re-used for any other purpose (read: not injected into any other module).</p>
  
  <p>So what is the point that one would decide to separate your app which is defined as a singular module into multiple modules when reuse outside is not a valid concern?</p>