角度設定の$ httpリクエスト - 可能でしょうか？

Question

$ urlMatcherFactoryProviderと一致する利用可能なルートの配列を取得するために、私のpublicApp.configの中で$ httpを呼び出そうとしています。

は今のところ、私は彼らがpageUrls = ['about','contact','another-page'];

ようにハードコーディングですが、私は可能なURLの配列を返します。私の急行APIでURLを持っています。 APIのURLは"/page-urls"

です。$http.get('/page-urls')のリクエストはconfig内に作成できますか？ $ 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要求を行い、次にルートを登録するサービスを作成します。実行ブロックにサービスを注入し、ルート登録を開始します。 、あなたが角度アプリの外に要求を行う必要がありますAJAXでこれを行う代わりに、 `NG-app`を使用してのアヤックス成功内の手動ブートストラップアプリからのデータを渡すために

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