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'
                }
            }
        }
    ];
}
})();

Answer 1

Try changing prime to the following:

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

Answer 2

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

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

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'
                    }
                }
            }
        ];
    }
})();