AngularJS分離控制器，參數不是一個函數，它是未定義的

我知道它被問了數百次，但我無法真正發現錯誤。我查看了所有類似的問題首先，我在一頁中完成了所有工作，但是很顯然，我需要學習將控制器分爲不同的文件。我已經做了以下內容：AngularJS分離控制器，參數不是一個函數，它是未定義的

諧音/ hosts.html：

Hosts Page 
<div ng-controller="HostsCtrl"> 
    {{ title }} 
</div>

的index.html

<html> 
<head> 
    <script src="bower_components/angular/angular.js"></script> 
    <script src="bower_components/angular-route/angular-route.js"></script> 
    <script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script> 
    <script src="js/myApp.js"></script> 
    <script src="js/HostsCtrl.js"></script> 
</head> 

<body ng-app="MyApp"> 
...

JS/MyApp.js

創建MyApp模塊和名爲的子模塊個

var app = angular.module('MyApp', ['ngRoute', 'ui.bootstrap']); 
console.log("index.js file loaded"); 

angular.module('MyApp.controllers', []);

JS/HostsCtrl.js

就在MyApp.controllers模塊顯示的Hello World和時間的簡單的控制器。

console.log("HostsCtrl.js file loaded"); 
angular.module('MyApp.controllers').controller("HostsCtrl", function($scope) { 
    $scope.title = "Hello world" + new Date().getTime(); 
});

控制檯輸出：

index.js file loaded MyApp.js:2 
HostsCtrl.js file loaded HostsCtrl.js:1 
Error: [ng:areq] Argument 'HostsCtrl' is not a function, got undefined

我假設的加載順序是正確的，但我不明白爲什麼它給出了一個錯誤，而不是能夠解決HostsCtrl。我究竟做錯了什麼？

來源

2014-11-01 Mustafa

看起來你從來沒有申報MyApp.controllers依賴（因爲你的控制器在單獨的模塊）。試試這個：

var app = angular.module('MyApp', [ 
    'ngRoute', 
    'ui.bootstrap', 
    'MyApp.controllers' 
]);

來源

2014-11-01 23:28:39 dfsq

你是對的，它解決了它。然而，我想知道，我在這裏聲明瞭這是一個依賴關係，但是MyApp.controllers聲明在這行之後，它怎麼沒有給出錯誤，可能說「你沒有MyApp.controllers，沒有辦法依賴他們」 – Mustafa 2014-11-02 00:05:18

AngularJS分離控制器，參數不是一個函數，它是未定義的

回答

相關問題