angularjs $routeProvider route is executed before resolve completes

Question

I would like the route.resolve method(s) to fire before the actual route code is run. Unfortunately in the code below, prime() gets called but it is called asynchronously and the route code gets called before the prime completes. I thought the resolve methods of a route was suppose to complete before the route is loaded?

(function () {
'use strict';

var app = angular.module('app');

// Collect the routes
app.constant('routes', getRoutes());

// Configure the routes and route resolvers
app.config(['$routeProvider', 'routes', routeConfigurator]);
function routeConfigurator($routeProvider, routes) {

    routes.forEach(function (r) {
        setRoute(r.url, r.config)

    });

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

    function setRoute(url, definition) {
        //set resolvers for all of the routes
        //by extending any existing resolvers (or creating a new one)
        definition.resolve = angular.extend(definition.resolve || {}, {
             prime: prime
        });


        $routeProvider.when(url, definition);
        return $routeProvider;
    }


}

prime.$inject = ['datacontext'];

function prime(dc) {
    dc.prime();
}


// Define the routes 
function getRoutes() {
    return [
        {
            url: '/',
            config: {
                templateUrl: 'app/dashboard/dashboard.html',
                title: 'dashboard',
                settings: {
                    nav: 1,
                    content: '<i class="icon-dashboard"></i> Dashboard'
                }
            }
        },
        {
            url: '/sessions',
            config: {
                title: 'admin',
                templateUrl: 'app/sessions/sessions.html',
                settings: {
                    nav: 2,
                    content: '<i class="icon-calendar"></i> Sessions'
                }
            }
        },
        {
            url: '/speakers',
            config: {
                title: 'speakers',
                templateUrl: 'app/speakers/speakers.html',
                settings: {
                    nav: 3,
                    content: '<i class="icon-user"></i> Speakers'
                }
            }
        },
        {
            url: '/attendees',
            config: {
                title: 'attendees',
                templateUrl: 'app/attendees/attendees.html',
                settings: {
                    nav: 4,
                    content: '<i class="icon-group"></i> Attendees'
                }
            }
        }
    ];
}
})();

Gynecoid

You must ensure that prime returns an promise. – Foretooth

Can you make a functioning jsbin or jsfiddle? – Tempt

Have you sorted that out? Have you tested the solutions? – Norrie

Answer 1

Try changing prime to the following:

function prime(dc) {
    return dc.prime();
}

Micropathology

Answer 2

I suggest you re-position the prime function to the global controller defining it as:

$scope.prime = function (dc) {
    dc.prime();
};

Denti

Answer 3

Move prime inside scope of routeConfigurator

 (function () {
        'use strict';

    var app = angular.module('app');

    // Collect the routes
    app.constant('routes', getRoutes());

    // Configure the routes and route resolvers
    app.config(['$routeProvider', 'routes', routeConfigurator]);

    function routeConfigurator($routeProvider, routes) {
        routes.forEach(function (r) {
            setRoute(r.url, r.config);
        });
        $routeProvider.otherwise({ redirectTo: '/' });
        function setRoute(url, definition) {
            definition.resolve = angular.extend(definition.resolve || {}, { prime: prime });
            $routeProvider.when(url, definition);
            return $routeProvider;
        }
        prime.$inject = ['datacontext'];
        function prime(datacontext) {
            return datacontext.prime();
        }
    }


    // Define the routes 
    function getRoutes() {
        return [
            {
                url: '/',
                config: {
                    templateUrl: 'app/dashboard/dashboard.html',
                    title: 'dashboard',
                    settings: {
                        nav: 1,
                        content: '<i class="fa fa-dashboard"></i> Dashboard'
                    }
                }
            },
            {
                url: '/sessions',
                config: {
                    title: 'sessions',
                    templateUrl: 'app/sessions/sessions.html',
                    settings: {
                        nav: 2,
                        content: '<i class="fa fa-calendar"></i> Sessions'
                    }
                }
            },
            {
                url: '/speakers',
                config: {
                    title: 'speakers',
                    templateUrl: 'app/speakers/speakers.html',
                    settings: {
                        nav: 3,
                        content: '<i class="fa fa-user"></i> Speakers'
                    }
                }
            },
            {
                url: '/attendees',
                config: {
                    title: 'attendees',
                    templateUrl: 'app/attendees/attendees.html',
                    settings: {
                        nav: 4,
                        content: '<i class="fa fa-group"></i> Attendees'
                    }
                }
            }
        ];
    }
})();

Infielder