How to disable back and forward navigation in AngularJS

Question

I'm using the built in router in Angular.JS to switch between control/template pairs. While switching the pages, the address bar is changed the accordingly. I checked the document, it says AngularJs has synchronized the $location service with the browser address bar.

My issue is I really want to disable the back and forth in my pages. It's because by clicking back and forth, I'm not able to fetch the data to fill the page. Previously with JQuery mobile, I've disabled the URL changes in the address bar. By this way, I have basically disabled the back and forth. However, with AngularJS, is there a way to do that?

Fiona · Accepted Answer · 2014-01-22 08:21:12Z

1

I've figured out the issue by myself. To stop page switching triggered by back and forth, a way is to listen on $locationChangeStart event. If you are able to tell it's triggered by back and forth button, disable the page change by invoking event.preventDefault();.

As long as how to tell whether a page change is triggered by history button or by your logic, since in my main service, I have the logic to control page change. Hence, it's not a problem for me.

answered Jan 22, 2014 at 8:21

Fiona

9341 gold badge8 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kyle C Over a year ago

and how were you able to determine that the change is happening because of a navigation button ?

RaviH · Accepted Answer · 2014-01-21 10:03:16Z

0

No. It is natural for the users of a web app to use back and forward buttons to navigate. In a pure jQuery app people use various jQuery plugins to enable browser history because by default jQuery does not do anything to support browser history. Therefore angularJS maintains browser history out of the box.

You can add parameters to the URL to populate the data when the user uses back and forward buttons to navigate. There is no better way to support back and forward buttons for navigation.

answered Jan 21, 2014 at 10:03

RaviH

3,5942 gold badges17 silver badges14 bronze badges

Comments

sathishkumar · Accepted Answer · 2015-10-16 10:02:18Z

0

Using Ui router module:

To disable back button:

$rootScope.$on('$stateChangeStart', 
function(event, toState, toParams, fromState, fromParams){
   event.preventDefault();
   window.history.forward();
});

answered Oct 16, 2015 at 10:02

sathishkumar

1,8564 gold badges22 silver badges32 bronze badges

Comments

Viorel Mateianu · Accepted Answer · 2017-04-11 09:45:44Z

0

var allowNav = false;
var checkNav = false;

$rootScope.$on('$stateChangeSuccess', function (event, toState, toStateParams, fromState, fromStateParams) {

            allowNav = checkNav;
            checkNav = true;

        });

$rootScope.$on('$locationChangeStart', function (event, next, current) {
            // Prevent the browser default action (Going back)
            if (checkNav) {
                if (!allowNav) {
                    event.preventDefault();
                }
                else {
                    allowNav = false;
                }
            }
        });

answered Apr 11, 2017 at 9:45

Viorel Mateianu

112 bronze badges

Collectives™ on Stack Overflow

How to disable back and forward navigation in AngularJS

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related