Angular can't find my controllers when split into separate files

Question

I was following the answer posted for a similar question here: How to create separate AngularJS controller files?

However I'm still not able to split my controllers into separate files. I've started by splitting a single controller out from the rest into it's own file, but now none of the controllers are being loaded.

My js files are being loaded in the proper order in my index.html file with app.js coming before my controller files.

    <script src="libraries/jquery/1.11.3/jquery-1.11.3.min.js"></script>
    <script src="libraries/angular/1.4.8/angular.min.js"></script>
    <script src="libraries/angular-ui-router/0.2.14/angular-ui-router.min.js"></script>
    <script src="libraries/angular-scroll/angular-scroll.min.js"></script>
    <script src="libraries/uiboostrap/0.14.3/ui-bootstrap-tpls-0.14.3.min.js"></script>
    <script src="libraries/dirPagination/dirPagination.js"></script>
    <script src="libraries/angular-loading-bar/loading-bar.js"></script>
    <script src="js/app.js"></script>
    <script src="js/app.services.js"></script>
    <script src="js/app.controllers.js"></script>
    <script src="partials/events/StageBarCtrl.js"></script>

My app.js file:

var app = angular.module('myWebApp', [
    'myWebApp.services',
    'myWebApp.controllers',
    'ui.router',
    'duScroll',
    'ui.bootstrap',
    'angularUtils.directives.dirPagination',
    'angular-loading-bar'
]);

app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/404');

    $stateProvider
        .state('home', {
            url: '/',
            templateUrl: 'partials/home.html',
            controller: 'HomePageCtrl'
        })
        .state('event', {
            url: '#/events/event',
            views: {
                '': {
                    templateUrl: 'partials/events/event.html',
                    controller: 'EventCtrl'
                },
                'stageBar@event' : {
                    templateUrl: 'partials/events/stage-bar.html',
                    controller: 'StageBarCtrl'
                }
            }
        })
        .state('userProfiles', {
            url: '/admin/users',
            templateUrl: 'partials/admin/user-profiles.html',
            controller: 'UserProfilesCtrl'
        })
        .state('editTeams', {
            url: '/admin/teams',
            templateUrl: 'partials/admin/edit-teams.html',
            controller: 'TeamProfilesCtrl'
        })
        .state('editDepartments', {
            url: '/admin/departments',
            templateUrl: 'partials/admin/edit-departments.html',
            controller: 'DepartmentProfilesCtrl'
        })
        .state('editDivisions', {
            url: '/admin/divisions',
            templateUrl: 'partials/admin/edit-divisions.html',
            controller: 'DivisionProfilesCtrl'
        });
}]);

My main controller file app.controllers.js looks like this (contents elided for brevity):

angular.module('myWebApp.controllers',[]).
    controller('TopNavCtrl', function ($scope, $location) { 

    }).

    controller('scrollCtrl', function($scope, $document) {

    }).

    controller('AdminTableCtrl', function ( $scope, coreAPIservice ) {

    }).

    controller('EditDivisionsCtrl', function ( $scope, coreAPIservice ) {

    }).


    controller('EditDepartmentsCtrl', function ( $scope, coreAPIservice ) {

    }).

    controller('EditTeamsCtrl', function ( $scope, coreAPIservice ) {

    }).

    controller('HomePageCtrl', function ( $scope, $location, $http ) {

    }).

    controller('EventCtrl', function ( $scope, $window, $location, $http, coreAPIservice ) {

    }).

    controller('UserProfilesCtrl', function ( $scope, $location, $http, coreAPIservice ) {

    }).

    controller('TeamProfilesCtrl', function ( $scope, $location, $http ) {

    }).

    controller('DepartmentProfilesCtrl', function ( $scope, $location, $http ) {

    }).

    controller('DivisionProfilesCtrl', function ( $scope, $location, $http ) {

    }).

    controller('NotFoundCtrl', function ( $scope, $location, $http ) {

    });

The controller I separated into it's own file looks like this:

angular.module('myWebApp.controllers', []).
    controller('StageBarCtrl', function($scope, $window, $location, $http, eventFactory) {

    });

The error I get is: "Argument 'TopNavCtrl' is not a function, got undefined" which is the first controller encountered in index.html.

score 3 · Accepted Answer · answered Mar 21 '16 at 20:25

When you declaring controllers in separate files you need to use this notation:

angular.module('myWebApp.controllers').
controller('StageBarCtrl', function($scope, $window, $location, $http, eventFactory) {
    // ...
});

Note, angular.module('myWebApp.controllers') without [] as the second parameter (getter). It means retrieve previously registered module myWebApp.controllers. However, angular.module('myWebApp.controllers', []) (setter) means "create new module myWebApp.controllers", which overwrites anything that has been registered before.

Yeah, you beat me by 5 seconds, angular.module function can be a setter (with []) when defining a module, or a getter when referring module definitions (without []). — slackmart, Mar 21 '16 at 20:28

score 1 · Answer 2 · answered Mar 21 '16 at 21:32

You are so very close.

In your separated controller file(s), you are overwriting your parent myWebApp.controllers module each time by adding the "[]" as a second argument. This is resulting in only your last separated controller being injected. Thus the "Argument 'TopNavCtrl' is not a function, got undefined" error

You should be using the setter...

angular.module('myWebApp.controllers', [])

only once in app.controllers.js, in your case. And the getter...

angular.module('myWebApp.controllers')

for each separated controller.

Angular can't find my controllers when split into separate files

2 Answers2