migrate from ngRoute to ui.router $rootScope.$on '$stateChangeStart' not triggering

Question

I am trying to create a authentication system. I stubled upon this (plunk) tutorial which is great but uses ngRoute and i wish to stwitch to ui.router.

After some hard time trying to do it by myself, i dedided to search a bit more to find this ui.router auth demo (plunk) .

I replaced some stuff an now my code looks like this (plunk) .

I have successfully managed to replace ngRoute with ui.router but i have a small big problem:

The module.run method hits, but inside it I have the code below that never gets triggered (I just want the alert to pop so can move on to write the redirect logic).

$rootScope.$on('$stateChangeStart', function (e, toState, toParams, fromState, fromParams) {
        alert("enter");

        // redirect to login page if not logged in and trying to access a restricted page
        // var restrictedPage = $.inArray($state.path(), ['/login', '/register']) === -1;
        // var restrictedPage = !($state.includes("login") || $state.includes("register"));

        var loggedIn = $rootScope.globals.currentUser;
        if (!loggedIn) {
            $state.go('login');
        }
    });

I have yet to figure out what I am doing wrong. Thank you for your time guys!

Answer 1

Try this version.

Basically, use $transitions instead of $rootScope.$on('$stateChangeStart' , because that has been deprecated.