How should I define the module to add controllers to it? - angularjs

Question

I've got my angular app setup something like this:
<div class="main" ng-app="myApp">
<div class="sub" ng-controller="sub1">
...
</div>
<div class="sub" ng-controller="sub2">
...
</div>
<div class="sub" ng-controller="sub3">
...
</div>
</div>
And the controllers each on different js file so the file structure is like:
Templates
-> home.html
Controllers
-> sub1Controller
-> sub2Controller
-> sub3Controller
In each controller file, I add the controller to the app by doing
ngApp.controller("sub1", function($scope){ ... });
And in the html file I linked the scripts.
After a few takes on getting the got undefined error, I found out that I am creating a new app on every directive, because to get the ngApp I used angular.module("myApp", []), unlike angular.module("myApp") that would retrieve the module. So basically my question is, where should I define the module? Since doing angular.module("myApp") won't work before angular.module("myApp", []) is invoked I can't use the one without the brackets always. Is defining the module on the containing page a bad practice? Is separating the controllers to different files instead of all in the same one a bad practice?

Answer 1

Separating controllers out into separate files is definitely a good idea, and I commend you for doing so. I'd recommend adding additional file above the controllers directory to define the angular module.
templates
-> home.html
js
->
angular_config.js
controllers
-> sub1Controller
-> sub2Controller
-> sub3Controller

Answer 2

There is nothing wrong with having all your controllers in the same file but for simplicity and future complexity reasons it is better to store each controller in a separate file.
A good solution may be to put all your controllers in controller folder(what you are currently doing )
the second thing is load another file that you can call app.js which will link all the controllers and other stuff together for example
in your app.js in the the js folder you can write :
window.onload = function(){
var app = angular.module('mymodal',[]);
app.controller('sub1Controller',function(){});
app.controller('sub2Controller',function(){});
app.controller('sub2Controller',function(){});
};
and then in your index.* file load js files in the following order
<script src="js/controllers/sub1Controller.js"></script>
<script src="js/controllers/sub2Controller.js"></script>
<script src="js/controllers/sub3Controller.js"></script>
<script src="js/app.js"></script>
By the way you can concatenate all your controllers files in one single file using task runner tools like grunt or gulp.