Overview

In this article we will see AngularJS Cancel route change with an example. We will be using the same example; i.e,. our demo application which displays various student details with web services.

For more articles on AngularJS refer to these links,

Introduction

When we run our Demo application we see output as,

output

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.
  1. .controller("studentsController", function($http, $route, $scope) {
  2. $scope.$on(“$routeChangeStart”, , function(event, next, current) {})
Now the next thing which we have to do is to display a confirmation which we will do using JavaScript confirm function,
  1. .controller("studentsController", function($http, $route, $scope) {
  2. $scope.$on(“$routeChangeStart”, , function(event, next, current) {
  3. if (confirm("Are you sure you want to Navigate away from this page ")) {}
  4. })
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,
  1. if (!confirm("Are you sure you want to Navigate away from this page ")) {
  3. }
To cancel route Change we are going to use event object -- we use prevent default function as,
  1. .controller("studentsController", function($http, $route, $scope) {
  2. $scope.$on(“$routeChangeStart”, function(event, next, current) {
  3. if (!confirm("Are you sure you want to Navigate away from this page ")) {
  4. event.preventDefault();
  5. }
  6. })
So this is the code which is required to cancel a route change in Angular.

Let’s save the changes and run application,

output

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,

output

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,

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
  1. .controller("studentsController", function($http, $route, $scope) {
  2. $scope.$on("$routeChangeStart", function(event, next, current) {
  3. if (!confirm("Are you sure you want to Navigate away from this page " + next.$$route.originalPath)) {
  4. event.preventDefault();
  5. }
  6. });
So when you click on Home you will get this dialog as,

dialog

We can achieve same thing by using $locationchangestart as,
  1. .controller("studentsController", function($http, $route, $scope)
  2. {
  3. $scope.$on("$locationChangeStart", function(event, next, current) {
  4. if (!confirm("Are you sure you want to Navigate away from this page " + next)) {
  5. event.preventDefault();
  6. }
  7. });
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

dialog

Conclusion

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