Implementing Angular UI router lazy resolves

Question

I use Angular & UI router and I need for one of my parent states's resolves to be lazy.

The reason for this is that I have a state called authenticated that is inherited by a whole hierarchy of child states. I need the resolve called isAuthenticated to be resolved lazily (i.e. each time a child of the authenticated state is entered).

Here is my parent authenticated state:

    .state('authenticated', {
        abstract: true,
        parent: 'root',
        views: {
            'header@': {
                controller: 'NavbarCtrl',
                templateUrl: 'app/navbar/views/navbar.view.html'
            }
        },
        resolve: {
            currentMember: ['domainService', function (domainService) {
                return domainService.currentMember();
            }],
            isAuthenticated: ['$rootScope', '$q', '$cookies', function ($rootScope, $q, $cookies) {
                return ($rootScope.globals.authenticated && $cookies.globalsAuthenticated) || $q.reject({unAuthorized: true});
            }]
        }
    })

I want to do that so that I can redirect unauthenticated users to login page easily.

How can I have a lazy resolve using the current implementation of the UI router (0.2.15)?

P.S. I had a look at oc lazy load but is appears to be aimed at loading whole modules or files...

Answer 1

you can use stateChangeStart it will help you for doing the exact thing you are looking for , check this link out

http://brewhouse.io/blog/2014/12/09/authentication-made-simple-in-single-page-angularjs-applications.html