How to refactor angular dependency injection for concatination and minification?

Question

I have written my angular application into seperate files for my readability and ways to easily find things to edit/code. This is my app.js that requires the dependencies.

app.js

var app = angular.module('app', ['ngResource', 'ngRoute', 'app.services', 'app.controllers', 'app.feed','app.directives', 'app.factories']);

app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    ...
}]);

This is an example of how the dependencies are written out.

services.js

var app = angular.module('app.services', []);

app.factory('AuthService', ['$scope'], function($scope) {
    ...
}]);

However, when I try to concat the scripts, app is redefined constantly. I thought of taking out the var declaration but, I like to keep the files separate.

How would I be able to write this out where the dependency injections stay intact for my app.js, while still keeping the files separate.

Answer 1

To prevent the constant re declaration of you app variable, you can take advantage of the module pattern: Angular Style Guide:Modules. Instead of explicitly declaring app in every dependency:

var app = angular.module('app.services', []);

app.factory('AuthService', ['$scope'], function($scope) {
    ...
}]);

You can define you service, component, directive, controller, etc as a part of the correct module:

angular.module('app.services')
.factory('AuthService', ['$scope'], function($scope) {
    ...
}]);

Declaring an 'app.services' module would only need to happen once.

See : Angular Style Guide:Modules for better explanations.