AngularJS: How do I create controllers in multiple files

Question

I'm trying to split my controllers into multiple files, but when i try to register them at my module im getting an error:

groupcontroller.coffee

app = angular.module('WebChat', []); app.controller 'GroupController', ($scope) ->

usercontroller.coffee

app = angular.module('WebChat', []); app.controller 'UserController', ($scope) ->

Error

Error: Argument 'GroupController' is not a function, got undefined

From the documentation I dont really get what the module method does anyway. Does it store my controller with the key 'Webchat'?

Edit: It also seems that passing [] creates a new module and overwrites the previous one

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

To prevent this, you have to leave out the [] like

app = angular.module('WebChat');

+1 for edit that explains passing [] as the second argument to the module method overwrites the previous one. — semperos
– semperos, Commented Mar 25, 2013 at 21:20

zx1986 · Accepted Answer · 2013-09-24 08:17:07Z

here is what I did:

index.html

<script src="js/angular.js" type="text/javascript" charset="utf-8"></script> <script src="js/myApp.js" type="text/javascript" charset="utf-8"></script> <script src="js/myCtrlA.js" type="text/javascript" charset="utf-8"></script> <script src="js/myCtrlB.js" type="text/javascript" charset="utf-8"></script>

app.js

myApp = angular.module('myApp', []) myApp.config ($routeProvider) -> $routeProvider.when('/a', {controller: 'myCtrlA', templateUrl: 'a.html'}) $routeProvider.when('/b', {controller: 'myCtrlB', templateUrl: 'b.html'})

myCtrlA.js

angular.module('myApp').controller 'myCtrlA', ($scope) -> console.log 'this is myCtrlA'

myCtrlB.js

angular.module('myApp').controller 'myCtrlB', ($scope) -> console.log 'this is myCtrlB'

as you can see, if I have a lot of controller js files, that will be a lot of script elements in index.html too.
I don't know how to deal with that yet.

FYI: http://briantford.com/blog/huuuuuge-angular-apps.html
but this article did not mention the html file too.

The order on the html page is important, I was building a js file with grunt and concat but got the error that module xy wasn't found, after putting the angular.module declaration on 1st place everything works fine :-).

Roy Truelove · Accepted Answer · 2012-09-29 20:12:17Z

Check other places in your code where you're referencing 'GroupController' (probably in your route). Chances are you have it as there as a variable, but when you declare a controller inside a module you'll have to wrap it quotes. EG:

MyCtrl1() = -> () ... $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: MyCtrl1})

works fine because MyCtrl1 is a variable. But when declaring controllers in a module as you are:

app = angular.module('WebChat', []); app.controller 'GroupController', ($scope) -> # ... $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'GroupController'})

'GroupController' needs quotes in the route.

ta4ka · Accepted Answer · 2014-01-24 16:48:09Z

I have my app var definied in my app.js file witch is first referenced and after that the controller files for example FirstCtrl.js.

so in app.js ex

var app = angular.module(...

in FirstCtrl.js

app.controller('FirstCtrl',

LampCat · Accepted Answer · 2014-03-01 16:23:29Z

There is a simple solution to this problem. Concatenate your *.coffee files before compile. If you use 'gulp' you may create task like this:

 gulp.src(['./assets/js/ng/**/*.coffee']) .pipe(concat('main.coffee')) .pipe(coffee()) .pipe(ngmin()) .pipe(gulp.dest('./public/static/js/app')) .pipe(livereload(server));

For example:

chat.coffee

myChat = angular.module 'myChat', []

msg.coffee

myChat .directive 'message', () -> return { restrict: 'E' replace : true transclude: true scope: true template: '<div></div>' }

After concatenate and compile we have:

(function () { var myChat; myChat = angular.module('myChat', []); myChat.directive('message', function () { return { restrict: 'E', replace: true, transclude: true, scope: true, template: '<div></div>' }; }); }.call(this));

Enjoy!

Collectives™ on Stack Overflow

AngularJS: How do I create controllers in multiple files

4 Answers 4

1 Comment

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Linked

Related