角度配置中的 $http 请求 - 有可能吗？

Question

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

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

但是我的 express API 中有一个 url，它返回一组可用的 URL。 api地址为"/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 作为可注入的提供程序。提供者将创建一个执行 http 请求的服务，然后注册路由。在运行块中注入服务并启动路由注册。

类似这样的：

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