0

I'm trying to dynamically load a bunch of states, by merging them from some disperse files.

I'm collecting all of them with $http.get and then add all with $stateProvider.state(name, config).

All ok here.

The problem is that if I enter another URL, besides the root URL "/", that same URL is never resolved to the correct state.

It seems that, if i load the app from the root state and navigate from there, the $urlRouterProvider can match with all the loaded states, but, if i try to enter the app from a child state, for example "/#/anotherpage", it cannot match any url/state and it fallback to .otherwise('/').

It's like if it tries to resolve the URL without waiting for all the states to be loaded.

I'm using $urlRouterProvider.deferIntercept() to try to stop it from continue, and after the configuration, i just enable again the sync.

app.config(configure).run(['$urlRouter', function($urlRouter){
        $urlRouter.sync();
        $urlRouter.listen();
    }]);

How do i make sure that $urlRouterProvider waits until all the states are loaded during .config(), and then try to match the correct state?

Thanks.

MGP
  • 653
  • 1
  • 14
  • 33
  • Take a look at `ui-router-extras` which lets you assign future states – charlietfl Feb 05 '16 at 15:27
  • @charlietfl yes.. but, unless you know a way that i'm not aware off, i'll have to change all the states already configured in the entire application and adapt all the app code to use this ui-router-extra (that, does not follow the original rules of it's parent..) – MGP Feb 05 '16 at 16:24
  • instead of using ajax could set the config in a script file ( can be server generated ) and assigned to a variable so it is available immediately. The src of a script tag can point to a non static server route , is not restricted to static `.js` files – charlietfl Feb 05 '16 at 16:29

1 Answers1

0

I'm not really sure that what i had is related but i'll post it : i was creating some object in a config phase. The object configuration was overridable so i couldn't built the state in the config phase of my provider. So i moved the $stateProvider calls and $urlRouterProviders calls in the $get of my provider.

If i tried to aim for one of the generated state it didn't work when loading the page the 1st time or refreshing. I had to use a "module.run(myProvider){}" to force instantiation of my provider to make it works. My guess is that my app.run was running before $urlRouterProvider resolves anything.

Another solution may be to use defer the bootstrap of your application removing ng-app and using angular.bootstrap when you're ready.

Walfrat
  • 5,363
  • 1
  • 16
  • 35
  • synchronous ajax is deprecated in browsers and should never ever be recommended. Manually bootstrapping angular after routes received is a far better option – charlietfl Feb 05 '16 at 15:49
  • Well it's still kind of synchronous and ruin the "dynamically" loading of state. But yes i though about that one too i don't know why I end up with ajax synchronous :P I'll edit my post. – Walfrat Feb 05 '16 at 15:52