Although this question has been asked numerous times, I am still unable to identify the error. Despite searching through similar questions extensively, I cannot seem to pinpoint the issue. Initially, everything was implemented on one page and it worked fine. However, to improve organization, I decided to separate my controllers into different files. Here is what I have done:
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
The MyApp module is created, along with a submodule named controllers
var app = angular.module('MyApp', ['ngRoute', 'ui.bootstrap']);
console.log("index.js file loaded");
angular.module('MyApp.controllers', []);
js/HostsCtrl.js
This simple controller is within the MyApp.controllers module, displaying a hello world message along with the current time.
console.log("HostsCtrl.js file loaded");
angular.module('MyApp.controllers').controller("HostsCtrl", function($scope) {
$scope.title = "Hello world" + new Date().getTime();
});
The console output:
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
Despite double-checking the loading order, I can't seem to understand why the error stating that it cannot resolve HostsCtrl persists. What could I possibly be doing wrong?