Question

我将每个角度控制器/服务放在不同的文件夹中（取自角度种子）。我需要在不同的页面上调用不同的控制器。

我收到的错误是***没有加载。我如何'继承'特定于每个页面的控制器？

这是我目前的结构。

// 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您要创建一个新模块（没有依赖项）。微妙但非常重要的区别。

AngularJs加载单独的控制器

2 个答案: