AngularJs UI-Router - Page Refresh $state.current is now empty

Question

I have an Angular application using ui-router and I am having issues whenever I refresh the page. I am using nested views, named views to build the

Answer 1

There is a question: AngularJS - UI-router - How to configure dynamic views with one answer, which shows how to do that.

What is happening? On refresh, the url is evaluated sooner, then states are registered. We have to postpone that. And solution is driven by UI-Router native feature deferIntercept(defer)

$urlRouterProvider.deferIntercept(defer)

As stated in the doc:

Disables (or enables) deferring location change interception.

If you wish to customize the behavior of syncing the URL (for example, if you wish to defer a transition but maintain the current URL), call this method at configuration time. Then, at run time, call $urlRouter.listen() after you have configured your own $locationChangeSuccess event handler.

In a nutshell, we will stop URL handling in config phase:

app.config(function ($urlRouterProvider) {
 
  // Prevent $urlRouter from automatically intercepting URL changes;
  // this allows you to configure custom behavior in between
  // location changes and route synchronization:
  $urlRouterProvider.deferIntercept();
 
})

And we will re-enable that in .run() phase, once we configured all dynamic states from JSON:

.run(function ($rootScope, $urlRouter, UserService) {
 
  ...

    // Once the user has logged in, sync the current URL
    // to the router:
     $urlRouter.sync();
 
    // Configures $urlRouter's listener *after* your custom listener
    $urlRouter.listen();
});

There is a plunker from the linked Q & A

Answer 2

I don't know how are all your routes.. but if you refresh a page of a child state, you need to pass all parameters of the parents states to be resolved correctly.