Angular navigate to the previous state on page reload

Question

I wanted to know if there is a way in Angular to refresh a single page application and properly go back to the same state as before? I am using ui-router (version 0.2.15) for defining different states.

Currently, I am storing the state name using ngStorage and have placed $state.go(last_stored_state_name) in the controller of the state that loads first. This way I get to the state that i was on before refresh but the problem is i can see the first state's view just for a second before $state.go(last_stored_state_name) runs.

Can anyone please tell me how I can bypass the first state's view directly to the desired state?

dependening on the version of ui-router you'll have the reload parameter available to you. http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state what version of ui-router are you using? — Dayan Moreno Leon, Apr 17 '16 at 07:37
[http://stackoverflow.com/questions/21714655/reloading-current-state-refresh-data] — SanchezCool, Apr 17 '16 at 07:43

score 0 · Answer 1 · answered Apr 17 '16 at 07:38

0

Try this:

$state.go($state.current, {}, {reload: true});

answered Apr 17 '16 at 07:38

lahsrah

9,013
5
37
67

Do i add this in the controller of every state? – user2470087 Apr 17 '16 at 08:05

Shashank Agrawal · Answer 2 · 2016-04-17T08:00:48.863

0

Create a controller and add it with ng-controller at any top level element like on <body> tag so that its scope is available throughout the application and in that controller, do like this:

// Event listener for state change.
$scope.$on('$stateChangeStart', function(event, toState, toParams, fromState) {
    if (last_stored_state_name && isPageRefresh) {
        // prevent execution of current state and navigate to last saved state
        event.preventDefault();
        $state.go(last_stored_state_name);
        return;
    }
});

So you don't have to do $state.go(last_stored_state_name); in your controller. This way, you will not see the first state for a second.

You can figure out a variable isPageRefresh with any type of checks like checking if fromState is null or setting a local storage variable or setting a global javascript variable .

edited Apr 17 '16 at 08:00

answered Apr 17 '16 at 07:45

Shashank Agrawal

25,161
11
89
121

I have actually done something similar to this. I have captured the refresh event using windowElement.on('beforeunload', function (event) {}) and have set the storage variables inside it. This i have done in every controller so that refresh from anyone will trigger the saving of state. The problem lies after this when the view loads. – user2470087 Apr 17 '16 at 08:10
I tried your answer. I detected the refresh event in the state using my earlier approach and added your approach in a top level controller to change the state after reload. It still is not working. Moreover, the $state.go() in your approach is not getting executed. – user2470087 Apr 17 '16 at 12:42

Angular navigate to the previous state on page reload

2 Answers2