Angularjs – $routeProvider not firing Controller

angularjsangularjs-routing

I have a situation where the Angular $routeProvider appears to not fire controller actions on route changes.

The routes are super simple urls:

window.app = angular.module('app', ['ngRoute', 'app.filters', 'app.services', 'app.directives', 'app.controllers'])
    .config([
        '$routeProvider', function($routeProvider) {
            console.log("app.js config launched");

            $routeProvider
                .when('/nav', {
                    templateUrl: 'temp/test.html',
                    controller: 'navController'
                    // controller: function($scope) { alert('scope called.') }                    
                })
                .when('/home', {
                    controller: 'homeController',
                    template: ' '
                });

            $routeProvider.otherwise({ redirectTo: '/home' });
        }
    ]);

The controller is just an log out to verify access:

app.controller('navController', [
    "$scope", "cellService",
    function ($scope, cellService) {
        console.log("**** navController fired");
    }
]);

The initialization code fires so the routing is initialized. When I hit:

http://localhost:4333/app/#/nav

and the url changes I can see that the test.html template is accessed by the browser, but the controller never fires.

This seems to indicate the route is getting activated by the URL change, but for some reason the controller is not firing. I've tried using a function instead of a controller name, but that too never gets fired. I've also verified that the controller is valid by attaching ng-controller="navController" to an element and that fires the controller just fine.

This is a page that originally didn't have routing associated as it was basically single self-contained page that didn't need navigation. I added the route code after the fact. I added an ng-view (there wasn't one before) after which at least the template started loading – without ng-view nothing happens.

Stumped and not sure what else to look at. Help.

Best Answer

It turns out the problem really was operator error on my part, but I think it's a scenario that can cause issues so I'll use this as the answer.

The issue that caused this problem were two-fold:

  • The HTML template HTML page (via templateUrl) had an invalid URL so the page never loaded and the controller wasn't fired because of that.

  • When switching to a template I used an empty template (" ") but had also removed the ng-View directive. The ng-View directive MUST BE present even when using an empty template. Without it the controller doesn't fire.

In both cases it didn't work and I mistakenly assumed that the controller was not getting fired which was confusing because it did fire if I explicitly hooked it up with ng-controller.

Yup plain operator error, but the latter is vitally important - without ng-View the controller doesn't fire.

Related Topic