javascript - AngularJs 加载单独的 Controller

Question

我的每个 Angular Controller /服务都在单独的文件夹中(取自 Angular 种子)。我需要在不同的页面上调用不同的 Controller 。

我收到 ***Ctrl 未加载的错误。如何“继承”特定于每个页面的 Controller ？

这是我目前的结构。

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

除非你有充分的理由这样做，否则我建议只将你的 Controller 放在同一个模块中。您可以通过执行以下操作在其他文件(task.js 和 project.js)中引用您的 taskApp 模块:

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

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

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

告诉 Angular 你想创建一个新模块(没有依赖项)。细微但非常重要的区别。