Disable Only Browser Back Button navigation(not links in app) with AngularJS/Javascript

Question

I am working on a SPA using AngularJS. I want to navigate through application states using links in application and I want to prevent the same navigation when back button is clicked.

All the solutions I found including $locationChangeStart in angularJs prevent navigation when I click links in my app also.

Please provide a solution which prevents only browser back button navigation and allows navigation through clicking link in application.

Answer 1

The easiest way to do this would be to have a mapping of transitions from current application state (url) to valid next application states (urls) and only preventDefault iff the transition from the current state to the one desired by $locationChangeStart isn't valid.

If you go about it like this, you not only prevent the user from using the back button but also from putting undesireable urls in the browser to create invalid application state and possibly harm your application.

I suggest you don't use some "on history change history.forward" method like linked in the other answer, it's the worst UX possible, make it transparent to the user.