我正在尝试使这个简单的 Angular 应用程序变得更加模块化。我将 Controller 分解为它自己的文件，在它自己的目录中。我正在使用依赖项注入(inject)来使 Controller 在应用程序模块中可用。我通过串联/缩小链接 html 中的两个文件。我已正确设置 Controller 的依赖项，据我所知，该部分工作正常。
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello Tester Application</title>
<link rel="stylesheet" href="css/lib/bootstrap.min.css">
<link rel="stylesheet" href="css/main.min.css">
</head>
<body ng-app="helloTesterApp">
<header>
<h1>Hello Tester App</h1>
</header>
<p class="description">This application calls the DropWizard example project to say hello to the user using that API.</p>
<main ng-controller="HelloController">
<div class="content-container">
<input class="input-sm" type="text" name="name" placeholder="Enter your name here" ng-model="user.name">
<button class="btn" type="button" ng-click="sayHello()">Get Greeting</button>
<p class="response">Response Message: {{response.message}}</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sapiente facilis ea harum, nostrum doloribus pariatur totam beatae vero nemo. Assumenda ad qui a rerum reiciendis cumque optio commodi facere.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div>
<p>Current request Port: {{config.port}}</p>
<p>If you would like to send the request to a different port, enter it here: <input class="input-sm" type="text" name="port" placeholder="alternative port" ng-model="config.altPort"></p>
</div>
</main>
<footer>
<script src="js/vendor/angular.min.js"></script>
<script src="js/vendor/angular-route.min.js" charset="utf-8"></script>
<script src="js/vendor/jquery-2.2.3.min.js" charset="utf-8"></script>
<script src="js/app.min.js"></script>
</footer>
</body>
</html>
helloController.js
angular.module('helloController', ['helloService'])
.controller("HelloController", ['HelloService', '$scope', function($scope, HelloService) {
$scope.user = {
name: ""
};
$scope.response = {
message: ""
};
$scope.config = {
port: 9000,
altPort: 0
};
$scope.sayHello = function() {
$scope.response.message = HelloService.sayHello($scope.user.name, $scope.config.port);
};
}]);
app.js (v.1)
angular.module('helloTesterApp', ['helloController']);
app.js (v.2)
angular.module('helloTesterApp', ['helloController'])
.controller('HelloController', HelloController);
我尝试了版本 2，因为我认为问题可能是我没有在应用程序上显式设置 Controller ，但这只会产生错误:“Uncaught TypeError:HelloController 未定义。”
有人可以解释一下我做错了什么吗？谢谢
最佳答案
当您声明并作为参数时，依赖项的顺序必须匹配:
尝试改变:
['HelloService', '$scope', function($scope, HelloService)
至
['HelloService', '$scope', 函数(HelloService, $scope)
关于javascript - 注入(inject)应用程序的 Angular Controller 未定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37014201/