Undo path changes in AngularJS

Having long been fond of Angular, I just got to the blog of the author framework Dan Wahlin. And in vain - there you can find a lot of interesting and necessary for each application thoughts. One of them I translated in this article. In it, you will learn how to stop switching to another page in the Angular application.




Dictionary translator:
- view - template
- route - route
- navigation - transition
')
Routing is an excellent tool that allows you to associate templates with AngularJS controllers with the least amount of code needed.
While the user can go straight to a given path, there is a possibility that he initiates the transition before completing some important action (for example, saving data). In such situations, you may want to cancel the transition and ask the user if he wants to finish his work or warn about the loss of his data. In this article I want to talk about the reception, which can be used to implement this task.

$ LocationChangeStart event

When a transition occurs in the AngularJS application, several events occur. One of them is called $ locationChangeStart, and the other is $ routeChangeStart (there are actually several more). Currently (version 1.2) the $ routeChangeStart event does not provide an opportunity to cancel the transition, but $ locationChangeStart is quite suitable for this. If you look at the AngularJS code, you will find the following section, which shows the occurrence of the $ locationChangeStart event when calling the $ Browser’s onUrlChange () method:

$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 most important part of the code is the $ broadcast call. This call passes the $ locationChangeStart event to all child scope, so that they can be notified of a change in location. To handle this event, you can use the $ rootScope.on () function. For example, I added the $ on () call to the function that is called immediately after the controller starts:

  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 expects the $ locationChangeStart event and calls the routeChange () function when it occurs. The return value of the $ on function is the function of “canceling the wait”, which can be called to stop waiting for the event. In this example, it is called onRouteChangeOff (available in the controller). Very soon you will see how it is used.

Cancel transition route

The callback function routeChange () is triggered by the $ locationChangeStart event and shows the user’s warning dialog box:


Here is the code for the routeChange () function:

 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; } 

In the parameters of this function, you can notice the event object and the new route that the user is trying to navigate. Since you need to remind the user about data loss before changing the template, the event object is used to cancel the transition. Notice the call to event.preventDefault () at the end of the function.
The dialog box is shown by calling the modalService.showModal () function (take a look at my previous post about a personalized modalService that works as a wrapper around the $ modal service from Angular UI Bootstrap).
If the user selects "Ignore Changes", then his changes will be canceled and the application will follow the desired route. This happens due to disabling the $ locationChangeStart event by calling the onRouteChangeOff () function (remember that this function is returned by calling the $ on function), so we don’t get stuck in the endless loop of the dialog box when clicking on the Ignore Changes button.
Then $ location.path (newUrl) is called to handle the transition to the specified pattern. If the user cancels the action, he will remain on the current template.

findings

The key to canceling the transition is understanding how to work with the $ locationChangeStart event.
I hope in the future this task can be solved with the help of the $ routeChangeStart event, but at the moment the given code performs this work in full.
You can see an example of how this code works in the customer management application , which is available on Github (especially the customerEdit template). Learn more about the app here .