In an effort to enhance my simple Angular app, I decided to modularize it. I separated the controller into its own file within a dedicated directory. By employing dependency injection, I ensured the controller's availability in the app module. Combining both files in the HTML was achieved through concatenation/minification. The dependencies for the controller are correctly configured and appear to be functioning as expected.
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 accesses the DropWizard example project to greet users via the 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);
I attempted version 2 under the impression that explicitly setting the controller on the application might resolve any issues, yet this led to the error: "Uncaught TypeError: HelloController is not defined." Can someone clarify where I may have gone wrong with this setup? Thank you