AngularJs加载单独的控制器

Question

我有我的每个角度控制器/服务在单独的文件夹（从角种子采取）。 我需要在不同的页面上调用不同的控制器。

我得到错误，*** Ctrl没有加载。我如何“继承”每个页面特有的控制器？

这是我目前的结构。

// 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

除非您有充足的理由去做，否则我会建议您将控制器放在同一模块中。 - 这是告诉角度要得到一个

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

注意，调用angular.module只有一个参数：您可以通过执行以下引用其他文件（task.js和project.js）您taskApp模块引用现有模块，而不是创建新模块。另一方面，这样做：

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

告诉Angular你想创建一个新的模块（没有依赖关系）。微妙但非常重要的区别。

Answer 2

那是因为你安排了一个单独的模块每个控制器，而只是引用myApp，你需要注入其他应用程序依赖于你的主要的应用程序。另外，为什么你将你的应用程序和控制器存储在同一个对象中？难怪你会犯错误。改为：

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']);