n this video we will discuss, how to cancel route change in Angular with an example. This is extremely useful if you want to warn a user when they are navigating away from a page with unsaved changes. 

For our example, let us assume that the user is currently on this students page. When he click on any other links (Home or Courses on the left), we want to present the user with a confirmation box (Are you sure you want to navigate away from this page). If the user clicks OK, the user will be redirected to the new route. If cancel is clicked, route navigation should be cancelled and the user should stay on the students page. 

 

Handle $routeChangeStart event in studentsController function

.controller("studentsController", function ($http, $route, $scope) {
    var vm = this;
 
    $scope.$on("$routeChangeStart", function (event, next, current) {
        if (!confirm("Are you sure you want to navigate away from this page")) {
            event.preventDefault();
        }
    });
 
    vm.reloadData = function () {
        $route.reload();
    }
 
    $http.get("StudentService.asmx/GetAllStudents")
                .then(function (response) {
                    vm.students = response.data;
                })
})
 

Notice 
1. We are injecting $scope object into the controller function
2. With in $routeChangeStart event handler function, we are using confirm() function to display the confirmation dialog box
3. When the confirmation dialog box is displayed, If the user clicks Cancel, event.preventDefault() is called and it cancels the route change, so the user stays on the same page
4. On the other hand if the user clicks OK, event.preventDefault() is not called and the route is allowed to change.

If you want to include the route that the user is trying to navigate to in the confirmation message you can do so by using next parameter of the $routeChangeStart event handler function as shown below.

.controller("studentsController", function ($http, $route, $scope) {
    var vm = this;
 
    $scope.$on("$routeChangeStart", function (event, next, current) {
        if (!confirm("Are you sure you want to navigate away from this page to "
                                                    + next.$$route.originalPath))
        {
            event.preventDefault();
        }
    });
 
    vm.reloadData = function () {
        $route.reload();
    }
 
    $http.get("StudentService.asmx/GetAllStudents")
                .then(function (response) {
                    vm.students = response.data;
                })
})

With this change in place and while you are on students page and if you click on Home link on the left menu, you will get the following message. 

 

At this point, you might be thinking, how do I know next parameter has $$route.originalPath property. Well you can log the next parameter and see all that properties it has. We will discuss how to do this in our next video.

You can also cancel route change by handling $locationChangeStart event

.controller("studentsController", function ($http, $route, $scope) {
    var vm = this;
 
    $scope.$on("$locationChangeStart", function (event, next, current) {
        if (!confirm("Are you sure you want to navigate away from this page to " + next)) {
            event.preventDefault();
        }
    });
 
    vm.reloadData = function () {
        $route.reload();
    }
 
    $http.get("StudentService.asmx/GetAllStudents")
                .then(function (response) {
                    vm.students = response.data;
                })
})

The next and current parameters of $locationChangeStart event handler has the complete next and current URLs. So when you click on home while on students page, you will see the following message. 

 

In our next video we will discuss the different events that are triggered when a route change occurs in an angular application.

最新文章

  1. 调试台自动多出现一个'' ，我 用uploadify上传图片时，在给页面写入一个返回值为图片名称的变量的值的时候值的前面始终多出现一个''
  2. 代码性能优化——task
  3. ubuntu 彻底删除卸载
  4. JSon_零基础_003_将Map集合对象转换为JSon格式的对象字符串，返回给界面
  5. css笔记09：选择器优先级
  6. java thread类和runable
  7. ExtJs 第二章，Ext.form.Basic表单操作
  8. DataInputStream类readLong()引起的思考
  9. iOS开发常用第三方开源框架 持续更新中...
  10. BZOJ 4216: Pig [分块]
  11. [No0000F3]C# 结构（Struct）
  12. Wannafly挑战赛19 B矩阵
  13. 正则表达式中　re.match与re.search的区别
  14. #CSS margin-top父元素下落
  15. Qt的一些鲜为人知但是非常有用的小功能
  16. select、poll和epoll的比较
  17. Beta阶段敏捷冲刺③
  18. Scala程序编译运行
  19. [DeeplearningAI笔记]卷积神经网络3.10候选区域region proposals与R-CNN
  20. beego学习笔记（4）：开发文档阅读（6）

热门文章

  1. 【C++ Primer Plus】编程练习答案——第12章
  2. 阿里 Midway 正式发布 Serverless v1.0，研发提效 50%
  3. 【UE4】基础概念——文件结构、类型、反射、编译、接口、垃圾回收、序列化
  4. 从零开始的Spring Session(一)
  5. python redis自带门神 lock 方法
  6. 简明教程 | Docker篇 · 其一：基础入门
  7. 為什麼我的手機連Wi-Fi速度總是卡在75Mbps？Wi-Fi速度解惑～帶你一次看懂！
  8. C/C++编程笔记：浪漫流星雨表白装b程序
  9. 手把手教你学Dapr - 3. 使用Dapr运行第一个.Net程序
  10. 从零开始 DIY 智能家居 - 基于 ESP32 的智能紫外线传感器模块