如何使用AngularJS刷新（F5）并获取另一个页面？

Question

In my web application, I got a form on 2 different pages, purchase1 and purchase2 .

If a customer refreshes the page at purchase2 , I want the location to be changed back to purchase1 .

I haven't found a way to do so, I've tried to make a config like that:

.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.when('/purchase2', '/purchase1');
}

But obviously, that way I can never get to purchase2 page.

I need it to happen only on manual user Refresh.

Is there any way to do so? Some built-in Angular function that happens on Refresh?

Something like

$scope.onRefresh = function(){
   $location.path('/dashboard/purchase1');
}

Haven't found anything like it.

Answer 1

You can listen for beforeunload event. beforeunload event will be triggered when someone hits a F5 or refreshes the page anyhow. Do something like,

var windowElement = angular.element($window);
windowElement.on('beforeunload', function (event) {
    event.preventDefault();
    //below is the redirect part.
    $window.location.href = '/purchase1';
});

Put this code on purchase2 page.

Answer 2

Yes, you can do it.

Register a global listener for state change:

$scope.$on('$stateChangeStart', function(event, toState, toParams, fromState) {
    // If fromState is null that means it is a page refresh otherwise
    // The fromState will be the purchase1
    if (toState.name == 'purchase2' && !fromState) {
        $state.go('purchase1');
        event.preventDefault();
        return;
    }
});

By global, I mean register the above in such a controller whose scope is available throughout your application like a controller added to your body or html tag.

Also, I'm assuming the purchase1 & purchase2 are the name of your states for both the pages. If they are parameters to a common state you can alter the code above.

Answer 3

What happens on refresh is the same as what happens on first load.

What you can do is check whether the user has been here already, eg by setting a cookie and reading it later.

However, I think you should rethink your design. Why would you invest your time into making refresh function behave worse?

Answer 4

I think, javascript isnt the right way because javascript does not know anything about the previous page, because it will be rendered when page is already loaded. So try to check this in your server side application like in php or jsp and read the request-header because there you can get current url and redirect user to the new url

Answer 5

You can try to have a flag say purchase2-loaded and keep this variable in localStorage . You can then write an IIFE, which will check value of this variable and reroute to purchase1 .

Also on purchase1 , reset it to false .

Note: This is a pure JS Code and relies on localStorage.

Fiddle .

Sample Code

 (function(){ var isPurchase2Loaded = localStorage.getItem("Purchase2"); if(isPurchase2Loaded || isPurchase2Loaded === undefined){ document.write("Rerouting to purchase 1..."); } else{ document.write("Loading for the first Time..."); localStorage.setItem("Purchase2", true); } })() 

Answer 6

Eventually, if someone is interested, I fixed it like that:

In purchase1.js I've added this to the submit() function:

$rootscope.demographic=1;

In purchase2.js I've added this code to the controller:

var init = function(){
      if(angular.isUndefined($rootScope.demographic)){
           $location.path('/purchase1');    
      }

    };
    init();

It is working because Refresh(F5) completely restarting the application, therefore also resets the $rootscope and makes "Demographic" Undefined.

Upon entering purchase2, "init" function will start, if we came from purchase1 everything will be ok and demographic will be defined, otherwise we will just load purchase1 again.

:)

Answer 7

$state.go('purchase1'); 

这应该可以解决您的问题。