My goal is to dynamically retrieve an array of available routes to match with the $urlMatcherFactoryProvider by making an $http call inside my publicApp.config.
Currently, I have hard-coded the routes as
pageUrls = ['about','contact','another-page'];However, there is an API endpoint in my express server that returns the list of available URLs. The API URL is "/page-urls"
I am wondering if it is possible to issue an $http.get('/page-urls') request within the configuration phase. While I know that $http can be used inside the run() function, I need the list of URLs before setting up routing via the $stateProvider.
(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('/');
}]);
})();