AngularJS - How to separate controllers/modules?

Question

I have one application that has two pages.

1 - A list of users

2 - Where I can manage a particular user

In order to organize I create two separated controllers and one module inside the app.js file and put all stuff together (custom filters, directives, factories...)

Now I want to separate things in diferent files (or maybe folders too).

How can I do this?

angular.module('app', []).

controller('listController', function ($scope) {
    ... 
}).

controller('manageController', function ($scope) {
    ...
}).

factory('Api', ['$resource',
 function($resource) {
  return {
    ...
  };
}]).

filter('formtaData', function(){
   return function(data, modo){
       ...
   }
}).

Other issue is that my controllers have different dependencies and in the actual way I have to include them all in my module (and scripts on the page) even if a page don't need them.

Answer 1

appConfig.js

angular.module('app', [dep1, dep2]);

ListController.js

angular.module('app').controller('listController', function ($scope) {
    ... 
});

DetailsController.js

angular.module('app').controller('manageController', function ($scope) {
    ...
});

apiService.js

angular.module('app').factory('Api', ['$resource',
 function($resource) {
  return {
    ...
  };
}]);

formatDataFilter.js

angular.module('app').filter('formtaData', function(){
   return function(data, modo){
       ...
   }
});

Answer 2

You can do it in this way

templates/
    _login.html
    _list.html
    _manage.html
app/
    app.js
    controllers/
        ListController.js
        ManageController.js
    directives/
        SomeDirective.js
    services/
        ApiService.js
        AnotherService.js
    filters/
        FormtaDataFilter.js

In app.js you can write something like this:

app.config(function($routeProvider){
    $routeProvider
    .when('/list', {
        controller: 'ListController',
        templateUrl: 'templates/_list.html'
    })
    .when('/manage', {
        controller: 'ManageController.js',
        templateUrl: 'templates/_manage.html'
    })
    .otherwise({redirectTo: '/'});
});

Answer 3

The above answer is correct however I usually assign the angular module to a literal to avoid typing the full name every time.

var angularApp = angular.module('app', [dep1,dep2]);