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分离控制器，参数不是一个函数，它是未定义的

回答

相关问题