I am facing a strange issue with my Angular application that uses ngRoute. I have set up different controllers for each template in the routes.js file:
routes.js:
angular.module('PokeApp', ['ngRoute'])
.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: '../templates/template-index.html',
controller: 'IndexController'
})
.when('/products', {
templateUrl: '../templates/template-products.html',
controller: 'ProductsController'
})
.when('/events', {
templateUrl: '../templates/template-events.html',
controller: 'EventsController'
})
.otherwise({ redirectTo: '/' });
The controllers are linked in the index.html file like this:
<!-- Scripts -->
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/routes.js"></script>
<script src="js/controllers/controller-index.js"></script>
<script src="js/controllers/controller-products.js"></script>
<script src="js/controllers/controller-events.js"></script>
Even though my controllers look almost identical, let's take Index and Products as an example:
controller-index.js:
angular.module('PokeApp')
.controller('IndexController', function($scope) {
// Testing purposes
console.log("hi");
..
});
controller-products.js:
angular.module('PokeApp')
.controller('ProductsController', function($scope) {
// Again, for testing
console.log("hi");
..
});
The strange part is that when I visit '/', the Index Controller doesn't log anything to the console. There are no typos because if I purposely use the wrong controller name, I get an error in the console.
However, when I go to /products, I do see 'hi' printed as expected.
I have checked everything I can think of - typos, paths, even searched on stackoverflow. I just can't seem to figure out why the Index Controller isn't functioning while the others work perfectly fine.
Could someone please help me troubleshoot this? Thank you for your time.