Loading angular ui-routes from server - angularjs

Question

I'm trying to load routes from server. when user navigate to a route via link it works perfectly, but when user hit F5 or open a route from bookmarks page will be empty. I tried $state.reload() after for loop but it causes "Cannot transition to abstract state '[object Object]'" error
var app = angular
.module("app ", ["ui.router"])
.config(function ($stateProvider, $urlRouterProvider) {
app.stateProvider = $stateProvider;
app.urlRouterProvider = $urlRouterProvider;
})
.run(function ($http, $state, $stateParams) {
$http({
method: 'POST',
url: '/Config/GetRoutes'
}).success(function (data, status) {
for (i in data.routes) {
app.stateProvider.state(data.routes[i].name, {
url: "/" + data.routes[i].name,
templateUrl: data.routes[i].url,
controller: 'sectionController'
});
}
});
})
;

Answer 1

Finally I found my answer!
var app = angular
.module("app ", ["ui.router"])
.config(function ($stateProvider, $urlRouterProvider) {
app.stateProvider = $stateProvider;
app.urlRouterProvider = $urlRouterProvider;
//defer intecepting
$urlRouterProvider.deferIntercept();
})
.run(function ($http, $state, $stateParams) {
$http({
method: 'POST',
url: '/Config/GetRoutes'
}).success(function (data, status) {
for (i in data.routes) {
app.stateProvider.state(data.routes[i].name, {
url: "/" + data.routes[i].name,
templateUrl: data.routes[i].url,
controller: 'sectionController'
});
}
// intecepting again
$urlRouter.sync();
$urlRouter.listen();
});
})
;

Answer 2

Hi I believe better solution is to write a provider to add routes dynamically, then use that in run function.
http://plnkr.co/edit/C2gXMo?p=preview
app.provider("DinamicRouteProvider", DinamicRouteProvider);
function DinamicRouteProvider($stateProvider) {
return {
$get: function( $state ) {
return {
addRoute: function (route){
$stateProvider
.state(route.name, {
url: '/' + route.name,
template: '<div><h2>This is '+route.name+'</h2></div>',
controller: 'DynCtrl'
});
console.log('State added', route)
}
};
}
};
}