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

那是因为您将每个控制器放在一个单独的模块中，但是仅引用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']);

Answer 2

除非您有充分的理由，否则建议您仅将控制器放在同一模块中。 您可以通过执行以下操作在其他文件（task.js和project.js）中引用taskApp模块：

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

请注意，对angular.module的调用只有一个参数-告诉Angular您想要获取对现有模块的引用，而不是创建新模块。 另一方面，这样做：

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

告诉Angular您要创建一个新模块（不依赖）。 细微但非常重要的区别。