angularjs $ routeProvider路由在resolve完成之前執行

Question

我希望在運行實際路由代碼之前觸發route.resolve方法。 不幸的是，在下面的代碼中，prime（）被調用，但是它被異步調用，並且在素數完成之前調用路由代碼。 我認為路由的解決方法是在加載路由之前完成的？

(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

嘗試將素數更改為以下內容：

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

Answer 2

我建議你將prime函數重新定位到全局控制器，將其定義為：

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

Answer 3

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