AngularJS Cancel Route Change

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,

• Overview Of AngularJS
• Modules And Controller In AngularJS
• Controllers in AngularJS
• AngularJS ng src Directive
• AngularJS ng-Repeat Directive
• Handling Events In AngularJS
• How To Use Two-Way Data Binding In AngularJS
• Filters In AngularJS
• Sorting Data In AngularJS
• Sorting Rows By Table Header In AngularJS
• Creating Custom Filters In AngularJS
• ng-Hide And ng-Show In AngularJS
• ng-init Directive In AngularJS
• Search And MultiSearch In AngularJS
• ngInclude Directive In AngularJS
• $http Service In AngularJS
• Consuming ASP.NET WebService In AngularJS
• AnchorScroll Service In AngularJS
• AngularJS Page Refresh Problems
• RouteParams In AngularJS
• Angular AnchorScroll With Database Part
• AngularJS Routing Using WebService
• AngularJS Controller As Syntax
• AngularJS Nested Scopes And Controllers As Syntax
• AngularJS CaseSensitive And Inline Templates

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.

.controller("studentsController", function($http, $route, $scope) {
            $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,

.controller("studentsController", function($http, $route, $scope) {
            $scope.$on(“$routeChangeStart”, , function(event, next, current) {
                if (confirm("Are you sure you want to Navigate away from this page ")) {}
            })

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,

if (!confirm("Are you sure you want to Navigate away from this page ")) {

}

To cancel route Change we are going to use event object  -- we use prevent default function as,

.controller("studentsController", function($http, $route, $scope) {
            $scope.$on(“$routeChangeStart”, function(event, next, current) {
                if (!confirm("Are you sure you want to Navigate away from this page ")) {
                    event.preventDefault();
                }
            })

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

.controller("studentsController", function($http, $route, $scope) {
            $scope.$on("$routeChangeStart", function(event, next, current) {
                if (!confirm("Are you sure you want to Navigate away from this page " + next.$$route.originalPath)) {
                    event.preventDefault();
                }
            });

So when you click on Home you will get this dialog as,



We can achieve same thing by using $locationchangestart as,

.controller("studentsController", function($http, $route, $scope)
            {
            $scope.$on("$locationChangeStart", function(event, next, current) {
                if (!confirm("Are you sure you want to Navigate away from this page " + next)) {
                    event.preventDefault();
                }
            });

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!!