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

AngularJS Separating The Controllers, Argument is not a function, it is undefined

本文关键字：函数 未定义 分隔 控制器 Argument AngularJS      更新时间：2023-09-26

我知道它被问了数百次，但我真的找不到错误。我看过所有类似的问题。起初，我在一个页面上做了所有的事情，它很有效，但显然我需要学会将我的控制器分离到不同的文件。我做了以下事情：

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

看起来您从未声明MyApp.controllers依赖项（因为您的控制器在单独的模块中）。试试这个：

var app = angular.module('MyApp', [
    'ngRoute', 
    'ui.bootstrap',
    'MyApp.controllers'
]);
相关文章：