AngularJs Loading separate controllers

Question

I have each of my angular controllers/services in separate folders (taken from angular seed). I need to call different controllers on different pages.

I am getting errors that ***Ctrl is not loading. How do I 'inherit' controllers specific to each page?

Here is my current structure.

// Index.html
<script>app.js</script>
<div ng-app='myApp'>
    <div ng-controller='headerCtrl'> Load user profile on every page</div>
</div>


// TaskList.html
<script>app.js</script>
<script>task.js</script>
<div ng-app='myApp'>
    <div ng-controller='headerCtrl'>Load user profile on every page</div>
    <div ng-controller='taskCtrl'>  Load task list </div>
</div>


// ProjectList.html
<script>app.js</script>
<script>project.js</script>
<div ng-app='myApp'>
    <div ng-controller='headerCtrl'>Load user profile on every page</div>
    <div ng-controller='projectCtrl'>Load task list</div>
</div>


// app.js
var myApp = angular.module('myApp', []);
myApp.controller('headerCtrl', function ($scope, $window) {
    // do stuff
});


// task.js
var taskCtrl = angular.module('taskCtrl', []);
taskCtrl.controller('taskCtrl', function ($scope, $window) {
    // do stuff
});

// project.js
var projectCtrl = angular.module('projectCtrl', []);
projectCtrl.controller('projectCtrl', function ($scope, $window) {
    // do stuff
});

Answer 1

Unless you have a good reason to do, I would recommend just putting your controllers in the same module. You can reference your taskApp module in other files (task.js and project.js) by doing the following:

var taskApp = angular.module('taskApp');
taskApp.controller('taskCtrl, ...);

Note that the call to angular.module has only one parameter - that's telling Angular that you want to get a reference to an existing module, rather than create a new module. On the other hand, doing this:

var taskApp = angular.module('taskApp', []);

Is telling Angular that you want to create a new module (with no dependencies). Subtle but very important difference.

Answer 2

That's because you're putting each controller in a separate module, but only referencing myApp , you need to inject the other app dependencies to your main app. Also, why are you storing your app and controllers in the same object? No wonder you're getting errors. Do this instead:

var taskApp = angular.module('taskApp', []);
taskApp.controller('taskCtrl', function ($scope, $window) {
    // do stuff
});

var projectApp = angular.module('projectApp', []);
projectApp.controller('projectCtrl', function ($scope, $window) {
    // do stuff
});

var myApp = angular.module('myApp', ['taskApp','projectApp']);