AngularJS - Have $StateProvider query for dynamic data in app.config - angularjs

Question

This works, but Json is not how I want to retrieve the data:
var states = [
{ name: 'main', url: '/', templateUrl: '/views/main.html', controller: 'MainCtrl' },
{ name: 'login', url: '', templateUrl: '/views/login-form.html', controller: 'LoginCtrl' },
{ name: 'logout', url: '', templateUrl: '', controller: 'LogoutCtrl' },
{
name: 'sales',
url: '',
templateUrl: '/views/sales-data.html',
controller: 'SalesDataCtrl',
resolve: {
user: 'User',
authenticationRequired:
['user', function(user) { user.isAuthenticated(); }]
}
}
];
angular.forEach(states, function (state) {
$stateProvider.state(state.name, state);
});
This does not work in retrieving the data:
app.config(['$locationProvider', '$resourceProvider', '$stateProvider', function ($locationProvider, $resourceProvider, $stateProvider) {
$locationProvider.html5Mode(true);
not working ---> var states = $resource('http://localhost:9669/api/breeze/states').query();
angular.forEach(states, function(state) {
$stateProvider.state(state.name, state);
});
}]);
My question is two-fold:
How does one retrieve remote data inside app.config so as to populate $StateProvider.
I know even when that is acheived, I will have a problem with the return value of
"['user', function(user) { user.isAuthenticated(); }]"
as it will come back as a string and angular will not recognize it as a function.
How can I overcome that issue?
[Side note: the api call does work, the issue is not the api controller.]
Thank you.

Answer 1

[Solution]
Documentation is piece-meal on this matter, but after sewing various posts together I found the answer.
First one must understand that data cannot be populated in the $stateProvider as it is part of app.config because app.config only initializes providers, the actual http service has to be performed in app.run.
Step 1: Declare 2 Globals, ie. $stateProviderRef and $urlRouterProviderRef references before the app.module and pass the actual $stateProvider & $urlRouterProvider references to them in app.config:
(function() {
var id = 'app';
var $stateProviderRef = null;
var $urlRouterProviderRef = null;
......
// Create the module and define its dependencies.
app.config(function($stateProvider, $urlRouterProvider) {
$stateProviderRef = $stateProvider;
$urlRouterProviderRef = $urlRouterProvider;
});
.......
Step 2: Create a Custom Factory Provider:
app.factory('menuItems', function($http) {
return {
all: function() {
return $http({
url: 'http://localhost:XXXX/api/menuitems',
method: 'GET'
});
}
};
});
Step 3: Call the custom provider in app.run:
app.run(['$q', '$rootScope', '$state','$urlRouter', 'menuItems',
function($q, $rootScope, $state, $urlRouter, menuItems) {
breeze.core.extendQ($rootScope, $q);
menuItems.all().success(function (data) {
angular.forEach(data, function (value, key) {
var stateName = 'state_' + value.OrderNum; //<-- custom to me as I have over 300 menu items and did not want to create a stateName field
$stateProviderRef.state(stateName, {url:value.url, templateUrl:value.templateUrl, controller:value.controller });
});
// because $stateProvider does not have a default otherwise
$urlRouterProviderRef.otherwise('/');
});
.....
}
]);