title: AngularJS: Best practices
body: <p><em>I don't think this question is considered opinion-based since it is asking about best practices, but at the same time I don't think there are any industry standards for AngularJS best practices, so it's hard to avoid <strong>opinions</strong> in some cases.  In other cases, one way of programming is clearly better than the other.  I am not sure which category this question falls under.</em></p>
  
  <p>I don't think there are any <strong>official</strong> AngularJS best practices.  There are guidelines, and some people have released their own best practices, but I haven't stumbled upon an industry standard.  </p>
  
  <p>I have a question about how I'm organizing my modules and the code itself.  It feels like I have a lot of small files and too many folders, even though I have broken down the app into common components and core features.  It's still a relatively small application, but it's likely to grow.  </p>
  
  <p>The biggest question I have was how I should organize my submodules.  Currently each submodule is broken down into various files, separating controllers, directives, and services.  I was wondering if I should just define them all in one file, and then if the submodule gets too large, break it down again.</p>
  
  <p>For instance, right now I have a module <strong>app.buttonToggle</strong>, with various files:</p>
  
  <p><strong>buttonToggle.app.js</strong></p>
  
  <pre><code>angular.module('app.buttonToggle', []);
  </code></pre>
  
  <p><strong>buttonToggleCtrl.js</strong></p>
  
  <pre><code>angular.module('app.buttonToggle').controller('ButtonToggleCtrl', ButtonToggleCtrl);
  
  function ButtonToggleCtrl() ...
  ...
  </code></pre>
  
  <p><strong>buttonToggle.js</strong></p>
  
  <pre><code>angular.module('app.buttonToggle').directive('buttonToggle', buttonToggle);
  
  function buttonToggle() ...
  ...
  </code></pre>
  
  <p>Instead would it be better to combine them into one file?</p>
  
  <p><strong>buttonToggle.app.js</strong></p>
  
  <pre><code>angular.module('app.buttonToggle', [])
  
      .controller('ButtonToggleCtrl', function() { ... })
  
      .directive('buttonToggle', function() { ... });
  </code></pre>
  
  <p>What would be the benefit of doing the latter, if any?  I like how it uses less code, but is it harder to test?</p>