Controller in separate file throws error - angularjs

Question

I am moving my controllers from one unique file containing my whole app to separate files and get that error : "Error: [ng:areq] Argument 'MainCtrl' is not a function, got undefined"
I used the setting method to define my app in app.js :
var app = angular.module('CMT', ['ui.router', 'angularCharts', 'uiSwitch']);
I then created a file MainCtrl.js with :
angular.module('CMT').controller('MainCtrl', [
'$scope', 'reviews', '$location',
function($scope, reviews, $location){
}]);
And I have included the files in index.html after including the angular source code :
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src='library/d3.min.js' type='text/javascript'></script>
<script src='library/angular-charts.min.js' type='text/javascript'></script>
<script src="node_modules/angular-ui-switch/angular-ui-switch.min.js"></script>
<script src="app.js" type='text/javascript'></script>
<script src="MainCtrl.js" type='text/javascript'></script>
Any hint or solution ?

Answer 1

Try the following:
In your app.js, inject your MainCtrl.js, like:
var app = angular.module('CMT', ['ui.router', 'angularCharts', 'uiSwitch', 'CMT.MainCtrl']);
And in your MainCtrl.js:
angular.module('CMT.MainCtrl', [])
EDIT:
An AngularJS module is a container. In every Angularjs app, you have one "main" module, and typically many sub-modules. These sub-modules are useful for modularizing/separating your app into components, like controllers, services etc. Initially you had one main module, which also contained the code for your controller. When you decided to move your controller out of the main module, what you wanted to do was move it into a sub-module.
So there were two problems with what you did:
You named your controller module (which is your sub-module in this case) the same name 'CMT' as that of your app/main module. Your sub-modules need to have unique names, and it is good practice to use the . separator - see this Angular style guide.
You didn't "link" your controller module to your app module in an Angular way. Just adding the script to your html isn't enough. If you have a sub-module called CMT.MainCtrl, you need to inject it into your main CMT module.
Judging by your naming convention MainCtrl.js versus something like controllers.js, I'm guessing you're organising your code by feature, instead of by type? In any case, read Angular best practices for more info on Angular directory structure.

Answer 2

Specify all your services/controllers/filters/directives files before the app.js file
<script src="MainCtrl.js" type='text/javascript'></script>
<script src="app.js" type='text/javascript'></script>
Note: you don't need to care about these file orders if you bundle all your script files into single file