Separation of AngularJS controller files?

Question

I'm getting an error when running my app: Argument 'AppCtrl' is not a function, got undefined - I believe it has something to do with the separation of controller files?

Ok, so I have in my first file: app.js this:

angular.module('zerochili', [
    'ionic',
    'zerochili.controllers',
    'zerochili.services',
    'zerochili.directives'
])

Then I have some different controller files - Lets take the file there the AppCtrl is - This looks like the following:

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

.controller('AppCtrl', ['$scope', '$ionicModal', '$timeout', function ($scope, $ionicModal, $timeout){


}])

And another file fx like so:

angular.module('zerochili.controllers', [])
.controller('LoginCtrl', ['$scope', '$state', '$ionicPopup', '$timeout', function($scope, $state, $ionicPopup, $timeout){

}]);

What am I doing wrong? Can't seem to quite figure it out?

ScottL · Accepted Answer · 2016-08-17 06:51:48Z

1

You can think of your app.js as the part where you define the module. The controller files should be adding to the module (not have ", []" as this creates the module).

You should probably be doing this in your controllers

angular.module('zerochili')
.controller('AppCtrl', etc.

So, remove these: 'zerochili.controllers', 'zerochili.services', 'zerochili.directives' from the app.js and add your controllers,services and directives to the 'zerochili' module like above.

If you want to keep, for example, 'zerochili.controllers' make sure that you don't create this module twice, i.e. have angular.module('zerochili.controllers', []) twice.

edited Aug 17, 2016 at 6:51

answered Aug 17, 2016 at 6:38

ScottL

1,75511 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user431619 Over a year ago

So instead of referencing to zerochili.controllers, I should be referencing to just zerochili, and this is what im doing in app.js ?

Dan M. CISSOKHO Over a year ago

in fact each time you put [], you are creating a new module

Dan M. CISSOKHO · Accepted Answer · 2016-08-17 06:50:17Z

1

It's only because you are creating a new modul with []

you can put at the end of your app.js

angular.module('zerochili.controllers', []);
angular.module('zerochili.directives', []);
angular.module('zerochili.services', []);

and then use it like this:

angular.module('zerochili.controllers')...

answered Aug 17, 2016 at 6:50

Dan M. CISSOKHO

1,0851 gold badge14 silver badges28 bronze badges

Collectives™ on Stack Overflow

Separation of AngularJS controller files?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related