Angular UI-Routing, Page automatically redirects to parent state when refreshed

Question

I am working on a project in which I have used Angular-UI routing. When I try to refresh web page or enter URL directly, It is redirected to parent state. It does load the state of the URL which I have reloaded but then quickly redirects to parent state. Here is my state routing

$stateProvider
    .state('home', {
        url: "",
        views: {
            "home": {
                templateUrl: root_url + "home"
                },
            },
        })
    .state('home.store', {
        url: "/store",
        views: {
            "store": {
                templateUrl: root_url + "store"
                },
            },
        })
    .state('home.store.storecontent', {
        views: {
            "storecontent": {
                templateUrl: root_url + "storecontent"
                }
            }
        })

Suppose currently I am on home.store.storecontent state. If I refreshed the page here, after reloading current state, It redirects me to the parent state which is home. I want to avoid this.

Answer 1

We have two options in general. First is to define url for child, the second is - make parent abstract which will mean that it child is default.

There is a working example for first approach

In case we would like to keep parent 'home.store' and child 'home.store.storecontent' non-abstract, we have to define unique url for both of them, e.g.:

.state('home.store', {
    url: "/store",
    ...
    })
.state('home.store.storecontent', {
    url: "/content",
    ...
    })

So, now we have two links:

<a href="#/store">
<a href="#/store/content">

And each of them will on refresh have unique target. Check it here

There is a working plunker for second approach

In case, that we want UI-Router to navigate to a child of 'home.store' state, we just have to make it abstract. Then - if there is a child with url: "" - it will be used as a non abstract state to be initiated.

These adjustment should do that:

.state('home.store', {
    url: "/store",
    // here, we make home.store to be abstract
    abstract: true,
    views: {
        "store": {
            templateUrl: root_url + "store"
            },
        },
    })
.state('home.store.storecontent', {
    // here, we say, that instead of parent (which url is selected)
    // this child state should be initiated
    url: "",
    views: {
        "storecontent": {
            templateUrl: root_url + "storecontent"
            }
        }
    })

Check it here in action

In case, that the 'home.store' should not be abstract, we should give some non empty url to its child - to distinguish these two...

Answer 2

are you using md-tabs with ui-sref and md-active?

if you are, the problem is that md-active fire click on tab, then you are redirected to the parent state.

i was with this problem and it is solved right now with https://github.com/angular/material/issues/5351

Answer 3

On each state change success event you need to cache or store in localStorage the current state name and when you refresh you can load from it if the login is valid.

$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {//You can save your storing state name function here}