title: AngularJS best practices for module declaration?
body: <p>I have a bunch of Angular modules declared in my app.  I originally started declaring them using the "chained" syntax like this:</p>
  
  <pre><code>angular.module('mymodule', [])
      .controller('myctrl', ['dep1', function(dep1){ ... }])
      .service('myservice', ['dep2', function(dep2){ ... }])
      ... // more here
  </code></pre>
  
  <p>But I decided that wasn't very easy to read, so I started declaring them using a module variable like this:</p>
  
  <pre><code>var mod = angular.module('mymodule', []);
  
  mod.controller('myctrl', ['dep1', function(dep1){ ... }]);
  
  mod.service('myservice', ['dep2', function(dep2){ ... }]);
  ...
  </code></pre>
  
  <p>The second syntax seems a lot more readable to me, but my only complaint is that this syntax leaves the <code>mod</code> variable out in the global scope.  If I ever have some other variable named <code>mod</code>, it would be overridden with this next one (and other issues associated with global variables).</p>
  
  <p>So my question is, is this the best way?  Or would it be better to do something like this?:</p>
  
  <pre><code>(function(){
      var mod = angular.module('mymod', []);
      mod.controller('myctrl', ['dep1', function(dep1){ ... }]);
      mod.service('myservice', ['dep2', function(dep2){ ... }]);
      ...
  })();
  </code></pre>
  
  <p>Or does it even matter enough to care?  Just curious to know what the "best practices" are for module declaration.  Thanks in advance.</p>