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