Question

我知道它被问了好几百次，但我真的找不到错误。我看了所有类似的问题起初，我在一个页面上做了所有事情，它工作正常，但显然我需要学习将我的控制器分成不同的文件。我做了以下事情：

泛音/ 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模块和名为controllers

的子模块

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

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

JS / HostsCtrl.js

MyApp.controllers模块中的一个简单控制器，显示问候世界和时间。

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。我究竟做错了什么？

Answer 1

您似乎永远不会声明MyApp.controllers依赖关系（因为您的控制器位于单独的模块中）。试试这个：

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

AngularJS分离控制器，Argument不是函数，它是未定义的

1 个答案: