I've been stuck on this problem for a few hours now, and no solution seems to work. I've searched for similar issues but haven't found any fixes that apply to my situation.
The main issue I'm facing is with registering controllers. I can only register controllers within the same file where I declare the app. When trying to set up the 'MainController' in a separate file, I get an error saying "The controller with the name 'MainController' is not registered." Moving MainController to the same file as the app declaration solves the problem, but makes the code difficult to navigate when multiple controllers are involved. Here's an example of my code:
angular.module('myApp', ['ngRoute']);
angular.module('myApp')
.controller('MainController', MainController);
However, other controllers kept in different files fail to register. For instance, in home.controller.js:
angular.module('myApp')
.controller('HomeController', HomeController);
function HomeController(HomeService) {
}
This HomeController doesn't register, and I'm unsure why. Each HTML partial in ng-view has its own controller, and ng-view is nested within MainController. Below is the content of app.config.js:
angular.module('myApp')
.config(function($routeProvider, $locationProvider) {
$routeProvider.when('/home', {
templateUrl: 'views/home.html',
controller: 'HomeController as home'
}).when('/profile', {
templateUrl: 'views/profile.html',
controller: 'ProfileController as profile'
});
$locationProvider.html5Mode(true);
});
Lastly, here's part of index.html:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>My App</title>
<script src="vendors/angular.min.js"></script>
<script src="vendors/angular-route.min.js"></script>
<script src="scripts/app.module.js"></script>
<script src="scripts/app.config.js"></script>
<scripts src="scripts/home.controller.js"></scripts>
<scripts src="scripts/profile.controller.js"></scripts>
<script src="scripts/main.service.js"></script>
<script src="scripts/home.service.js"></script>
<script src="scripts/profile.service.js"></script>
<base href="/" />
</head>
<body ng-controller="MainController as main">
<header>
<h1>My App</h1>
</header>
<!-- Content varies -->
<div class="container">
<ng-view></ng-view>
</div>
</body>
</html>
I've successfully handled similar projects in the past without any issues, so I'm at a loss as to what could be causing this particular problem. Any assistance would be greatly appreciated!