angularjs - Angular 配置中的 $http 请求 - 这可能吗？

Question

我正在尝试在我的 publicApp.config 中进行 $http 调用，以检索可用路由数组以与 $urlMatcherFactoryProvider 匹配。

现在，我将它们硬编码为 pageUrls = ['about','contact','another-page'];

但是我的 express API 中有一个 url，它返回可用 URL 的数组。 API URL 是 "/page-urls"

是否可以在配置中发出 $http.get('/page-urls') 请求？我知道 $http 在 run() 中可用，但在通过 $stateProvider 进行路由之前我需要可用 URL 的列表。

(function() {
    'use strict'

    var pageUrls = [];

    var publicApp = angular.module('publicApp', ['ui.router'])

    publicApp.config(['$stateProvider', '$urlRouterProvider', '$urlMatcherFactoryProvider', function($stateProvider, $urlRouterProvider, $urlMatcherFactoryProvider) {

        pageUrls = ['about','contact','another-page'];  

        var urls = pageUrls.join('|');
        var urlMatcher = $urlMatcherFactoryProvider.compile("/{source:(?:" + urls + ")}");


        $stateProvider      
            .state('/', {
                url: '/',
                templateUrl: "views/home/home.view.html",
                controller: "homeCtrl"
            })
            .state('urls', {
                    url: urlMatcher,
                    templateUrl: "views/pages/page.view.html",
                    controller: "pageCtrl"
                });

            $urlRouterProvider.otherwise('/');


    }]);



})();

Answer 1

创建一个将 $stateProvider 作为可注入(inject)的提供者。提供商将创建一个服务来执行 http 请求，然后注册路由。在运行 block 中注入(inject)服务并启动路由注册。

像这样:

var publicApp = angular.module('publicApp', ['ui.router'])

publicApp.provider('routes', function($stateProvider, $urlRouterProvider, $urlMatcherFactoryProvider){
    function registerRoutes(listOfUrls){
        // register routes with $stateProvider
        // angular.forEach(listOfUrls, function(url){
        //     $stateProvider.state...
        // });
    }

    this.$get = function($http){
        return {
            initialize: function(){
                return $http.get('/page-urls').then(function(response){
                    registerRoutes(response.data);
                });
            }
        };
    };
});

publicApp.run(function(routes){
    routes.initialize();
});