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您要創建一個新模塊（不依賴）。 細微但非常重要的區別。