AngularJS Cancel Route Change

Introduction

When we run our Demo application we see output as,



Currently I am in student controllers, displaying the list of students. These details are being fetched from the database with the help of web services. If I want to navigate to home controller it should display a popup: do you want to navigate to the other URL and leave this current route? If the user clicks ok it will allow the route change; when the user clicks cancel it will stay on the current route only.

NOTE: This technique is very useful in long forms,for example, passport form or login form, where you had completed most of your details and if you had accidentally clicked on any URLs it should give you a prompt for Yes or Cancel.

In our student controller I am going to using $scope object and in that I am going us $on function. So in $on function $routeChangeStart event is Handled.

When routeChangeStart is triggered a function is called and that function will have parameters like event which is called, the second parameter is the next parameter in which the next route is called and the last parameter is current parameter to stick to that route only.
Now the next thing which we have to do is to display a confirmation which we will do using JavaScript confirm function,
Now we want the confirmation if the user clicks ok it will return true and route to the other URL and if users click cancel it will return false and it will stay on the current route only. So when user clicks on cancel it should return false so we are using NOT operator,
To cancel route Change we are going to use event object -- we use prevent default function as,
So this is the code which is required to cancel a route change in Angular.

Let’s save the changes and run application,



As you can see when I clicked on home it gave me a popup: do you want to navigate. When I clicked on cancel it stayed on the current route as,



Now let’s click on Home and it will give me a prompt and will click ok -- let’s check if we get navigate to home controller,



It had routed to our Home controller there

Now suppose in that, I want to display a message, such as do you want to navigate/home -- so here you are going to use next. $$route.originalPath as
So when you click on Home you will get this dialog as,



We can achieve same thing by using $locationchangestart as,
In this we don’t need the original route path. Save the changes and reload the page.

When I clicked on Home controller I got this dialog box which has the message and the complete URlL server, port number and the controller name



Conclusion

This was about Cancel Route Change in AngularJS. Hope this article was helpful!!