Putting app, controllers & services in separate files

Question

I'm trying to move angular code into separate files before the project grows too big.

I tried moving the app, controllers and services into separate files but the errors stopped referencing points in the code (or they were too generic).

I have decided to put the file contents in on big <script> tag so I can work through the errors and get it working. Unfortunately I have come across this (Failed to instantiate module protonApp due to...) and don't know how to track the problem down (I'm new to angular)

The

(function () {
    'use strict';
    ...
}());

I have round the code is because the (little) research I have done says you should have your code between these when they are in separate files.

(function () {
    'use strict';
    var app = angular.module('protonApp',['ui.router','protonAppControllers','protonAppServices']);

    app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
        ...
    }]);

    app.value('debug',true);

    app.run(function($rootScope,$state,$http,debug,LeftMenuService) {
        ...
    });
}());


(function () {
    'use strict';
    angular.module('protonAppControllers', ['$scope','$http','LeftMenuService']);
}());


(function () {
    'use strict';
    angular.module('protonAppServices', ['$rootScope','$http']);
}());

(function () {
    'use strict';
    angular.module('protonAppControllers').controller('loginController',['$scope','$http','$state',function($scope,$http,$state){
        ...
    }]);
}());

(function () {
    angular.module('protonAppControllers').controller('surveyListController',['$scope','$http','LeftMenuService',function($scope,$http,LeftMenuService){
        ...
    }]);
}());

(function () {
    'use strict';
    angular.module('protonAppControllers').controller('surveyHelpController',['$scope','$http','LeftMenuService',function($scope,$http,LeftMenuService){
        ...
    }]);
}());


(function () {
    'use strict';
    angular.module('protonAppServices').service('LeftMenuService', function($http,$rootScope){
        ...
    });
}());

EDIT

Further digging reveals I can not access $rootScope or $scope inside any of my controller files

Answer 1

In your module injection you don't have to add $scope and $http :

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

Inject these in the controller but not in the module declaration