Using Angular Style Guide: Controllers in one module but multiple files

I’m trying to understand the Angular Style Guide, so I can scale up my ionic projects. so, as an exercise I’m applying the style guide to the ionic tabs starter projects.

The style guide recommends putting each controller in a separate file. I’ve been able to do this for the dashboard and account tabs, but I’m having a problem with the chat tab. This is the only one of the three where a module has more than one controller.

When I have the two chat controllers in a single file, it works. Here’s a github repo with the project.

When I separate the two chat controllers, it doesn’t work. The modules follow the format recommended on a question on StackOverflow. It does not matter what order I put the script commands in index.html.

Here is a branch of the same github repo.

The error message is:

Error: [ng:areq] Argument ‘ChatsCtrl’ is not a function, got undefined
AngularJS
at ionic.bundle.js:8890
at assertArg (ionic.bundle.js:10407)
at assertArgFn (ionic.bundle.js:10417)
at ionic.bundle.js:17258
at self.appendViewElement (ionic.bundle.js:48435)
at Object.switcher.render (ionic.bundle.js:46629)
at Object.switcher.init (ionic.bundle.js:46549)
at self.render (ionic.bundle.js:48295)
at self.register (ionic.bundle.js:48253)
at updateView (ionic.bundle.js:53645)

I know that I have a ChatsCtrl function and the same code works when there is only controller file. I don’t have enough experience with ionic to debug this error, so I’m hoping that I could get some help here.

Thanks in advance for your help.

see this line in the documentation https://docs.angularjs.org/guide/module

Creation versus Retrieval
Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.

2 Likes

That’s it! head desk Thank you.