Module injections vs Single application

Question

I have been working with AngularJs for a while and I now feel comfortable enough with it that I started to review my earlier work.

So I started out with following the basic tutorials and got used to setting up the application, controllers and services as following:

Module injections

// application.js
angular.module('appname',
    [ // dependencies
      'ui.router'
    , 'someController'    
    ]);

// somecontroller.js
angular.module('someController', [])        
    .controller('someCtrl',
        ['$scope', function ($scope) {
            // Some stuff
        }]);

And of course including js files in my index.html e.g.:

<script src="path/angular.js"></script>
<script src="path/angular-ui-router.min.js"></script>
<script src="path/application.js"></script>
<script src="path/somecontroller.js"></script>

Since I tend to separate all logic by feature (separate directory, own MV* structure per directory), I found that the list of dependencies can grow rather large. And also I think adding each controller, service etc. to the app dependencies is kind of a drag.

So I started to do it this way instead:

Single application

// application.js
var app = angular.module('appname',
    [ // dependencies
      'ui.router'
    ]);

// somecontroller.js
app.controller('someCtrl',
    ['$scope', function ($scope) {
        // Some stuff
    }]);

The obvious win for doing it like this is that I do not longer have to add the controller reference to the app dependencies.

So now my question(s) are:

1. Besides the obvious, what is the difference between the 2 methods?
2. From the Angular perspective which of the methods is considered "good/bad practice"? And why?

Answer 1

I don't think the second method is good. You add all controllers to your app main's module. If you want to truly group your code by feature, I recommend a third approach :

// application.js
angular.module('appname',
    [ 'ui.router'
    , 'appname.booking'    
    ]);

//booking.mod.js
angular.module('appname.booking', []);

//booking.ctrl.js
angular.module('appname.booking')        
    .controller('BookingCtrl', function ($scope) {
            // Some booking logic
        }]);

This way, you create a module per feature and obtain a project architecture easy to understand and navigate.

Answer 2

Looks like you need to read a bit more about modules.

The difference between your two approaches is that in the first one you create a different module for your controller and by injecting that module into the app dependencies you tell angular "by the way, I want the features that come with that module, too".

In your second approach, you only have a single huge module for the entire application, which means all the controllers, service, directives, .. will be automatically considered as part of the application.

Both approaches work, however having different modules for different functionality could help you structure you application better, as well as provide more reusability & easier testing.