Cancelling Route Navigation in AngularJS Controllers

If you’re new to AngularJS check out my AngularJS in 60-ish Minutes video tutorial or download the free eBook. Also check out The AngularJS Magazine for up-to-date information on using AngularJS to build Single Page Applications (SPAs).

 

 

Routing provides a nice way to associate views with controllers in AngularJS using a minimal amount of code. While a user is normally able to navigate directly to a specific route, there may be times when a user triggers a route change before they’ve finalized an important action such as saving data. In these types of situations you may want to cancel the route navigation and ask the user if they’d like to finish what they were doing so that their data isn’t lost. In this post I’ll talk about a technique that can be used to accomplish this type of routing task.

 

The $locationChangeStart Event

When route navigation occurs in an AngularJS application a few events are raised. One is named $locationChangeStart and the other is named $routeChangeStart (there are other events as well). At the current time (version 1.2) the $routeChangeStart doesn’t provide a way to cancel route navigation, however, the $locationChangeStart event can be used to cancel navigation. If you dig into the AngularJS core script you’ll find the following code that shows how the $locationChangeStart event is raised as the $browser object’s onUrlChange() function is invoked:

 

$browser.onUrlChange(function (newUrl) {
    if ($location.absUrl() != newUrl) {
        if ($rootScope.$broadcast('$locationChangeStart', newUrl, 
$location.absUrl()).defaultPrevented
) { $browser.url($location.absUrl()); return; } $rootScope.$evalAsync(function () { var oldUrl = $location.absUrl(); $location.$$parse(newUrl); afterLocationChange(oldUrl); }); if (!$rootScope.$$phase) $rootScope.$digest(); } });


The key part of the code is the call to $broadcast. This call broadcasts the $locationChangeStart event to all child scopes so that they can be notified before a location change is made. To handle the $locationChangeStart event you can use the $rootScope.on() function. For this example I’ve added a call to $on() into a function that is called immediately after the controller is invoked:

 

function init() {
    
    //initialize data here..
    //Make sure they're warned if they made a change but didn't save it
    //Call to $on returns a "deregistration" function that can be called to
    //remove the listener (see routeChange() for an example of using it)
    onRouteChangeOff = $rootScope.$on('$locationChangeStart', routeChange);
}


This code listens for the $locationChangeStart event and calls routeChange() when it occurs. The value returned from calling $on is a “deregistration” function that can be called to detach from the event. In this case the deregistration function is named onRouteChangeOff (it’s accessible throughout the controller). You’ll see how the onRouteChangeOff function is used in just a moment.

 

Cancelling Route Navigation

The routeChange() callback triggered by the $locationChangeStart event displays a modal dialog similar to the following to prompt the user:

 

image

 

Here’s the code for routeChange():

function routeChange(event, newUrl) {
    //Navigate to newUrl if the form isn't dirty
    if (!$scope.editForm.$dirty) return;

    var modalOptions = {
        closeButtonText: 'Cancel',
        actionButtonText: 'Ignore Changes',
        headerText: 'Unsaved Changes',
        bodyText: 'You have unsaved changes. Leave the page?'
    };

    modalService.showModal({}, modalOptions).then(function (result) {
        if (result === 'ok') {
            onRouteChangeOff(); //Stop listening for location changes
            $location.path(newUrl); //Go to page they're interested in
        }
    });

    //prevent navigation by default since we'll handle it
    //once the user selects a dialog option
    event.preventDefault();
    return;
}


Looking at the parameters of routeChange() you can see that it accepts an event object and the new route that the user is trying to navigate to. The event object is used to prevent navigation since we need to prompt the user before leaving the current view. Notice the call to event.preventDefault() at the end of the function. The modal dialog is shown by calling modalService.showModal() (see my previous post for more information about the custom modalService that acts as a wrapper around Angular UI Bootstrap’s $modal service).

If the user selects “Ignore Changes” then their changes will be discarded and the application will navigate to the route they intended to go to originally. This is done by first detaching from the $locationChangeStart event by calling onRouteChangeOff() (recall that this is the function returned from the call to $on()) so that we don’t get stuck in a never ending cycle where the dialog continues to display when they click the “Ignore Changes” button. A call is then made to $location.path(newUrl) to handle navigating to the target view. If the user cancels the operation they’ll stay on the current view.

Conclusion

The key to canceling routes is understanding how to work with the $locationChangeStart event and cancelling it so that route navigation doesn’t occur. I’m hoping that in the future the same type of task can be done using the $routeChangeStart event but for now this code gets the job done. You can see this code in action in the Customer Manager application available on Github (specifically the customerEdit view). Learn more about the application here.

Published Thursday, November 7, 2013 11:22 PM by dwahlin
Filed under: ,

Comments

# Cancelling Route Navigation in AngularJS Controllers » Wisconsin Web Works

Pingback from  Cancelling Route Navigation in AngularJS Controllers » Wisconsin Web Works

# Interesting Finds: November 8, 2013

Friday, November 8, 2013 7:20 AM by Jason Haley

Interesting Finds: November 8, 2013

# Dew Drop – November 11, 2013 (#1664) | Morning Dew

Monday, November 11, 2013 9:11 AM by Dew Drop – November 11, 2013 (#1664) | Morning Dew

Pingback from  Dew Drop – November 11, 2013 (#1664) | Morning Dew

# re: Cancelling Route Navigation in AngularJS Controllers

Tuesday, December 3, 2013 1:34 AM by spy

function routeChange(event, newUrl) {

can you tell me that where is the parameter 'newUrl' from?

I search the doc, and find out

'The event listener function format is: function(event, args...)'

but I cannot understand 'newUrl'.

Can you tell me why? thanks.

# re: Cancelling Route Navigation in AngularJS Controllers

Tuesday, December 3, 2013 2:20 AM by dwahlin

spy:

It's passed in automatically by AngularJS as the event fires. So, you get the event object and the url that they're trying to navigate to - the newUrl.

Dan

# re: Cancelling Route Navigation in AngularJS Controllers

Thursday, January 30, 2014 1:38 PM by Amelia

Thank you, this helped me immensely.

Before I found your post (after literally days of searching), I kept trying to put the "$locationChangeStart" listener into the app.run() bootstrap function, haha.

Please consider adding this into the official documentation, it's very well written and easy to understand.