Angular Convention for declaring controllers

Question

Is there an established convention regarding declaration of controllers? (Or any form of module-level configuration).

I have observed two different approaches in use:

var shoppingCartModule = angular.module('ShoppingCart',[])
shoppingCartModule.controller('CheckoutCtrl', function($scope) { ... });

vs

angular.module('ShoppingCart').controller('CheckoutCtrl', function($scope) { ... });

Are there any benefits between the two approaches? Also, is there a preferred (or emerging) convention?

I'm specifically interested in benefits for non-trivial apps with many modules, where declarations of controllers and modules may span many files.

Answer 1

Personally I do the following (reasons after):

angular.module('myApp', []);

angular.module('myApp').controller('myController', ['$dependency', 'anotherDependency',      
  function($dependency, anotherDependency) {
    ...
  }
]);

Reasons:

• I try and avoid the global scope
• Redundantly declaring dependencies with string equivalents allows you to safely minify your code
• It's consistent, clean and the whole story is there. Eg. with app.something you don't know what app is, with `angular.module('myApp').something' it's pretty obvious what that is.

Edit: Just remembered a cool video I saw on this very topic a while ago - http://www.egghead.io/video/tTihyXaz4Bo. If you haven't checked out John's site, I highly recommend it. I was so impressed with his videos I donated, and you should too!

Answer 2

Personally, I find it be a little bit cleaner this way:

angular.
  module('myApp').
  controller('myController', ['$dependency', 'anotherDependency', myAppController]);

function myAppController($dependency, anotherDependency) {
  ...
}

Or, even more better:

var Controllers  = {};

Controllers .someController = function myAppController($dependency, anotherDependency) {
  ...
}

angular.
  module('myApp').
  controller('myController', ['$dependency', 'anotherDependency', Controllers .someController]);