AngularJS中locationchange、routechange事件

原创 2013年12月03日 16:51:15

假设有这样一场景:在用户切换到另外一个route时,需要检查当前表单(内容)是否已保存?考虑下在AngularJS中如何实现?


我们首先来分析下,场景中有那些事件流。

①:用户编辑了表单

②:用户准备点击另外一个route url,触发提示‘是否要保存’

③:点击‘是’,route切换事件停止;点击‘否’,route切换事件继续


主要流程就这些其实很简单。这里主要涉及到了AngularJS中的事件处理模块。


首先我们需要知道的是$locationChangeStart和$routeChangeStart哪个事件先触发。

$route is used for deep-linking URLs to controllers and views (HTML partials). It watches $location.url() and tries to map the path to an existing route definition.

route是监控location.url的,然后采取操作的。所以事件的触发应该是先location后route事件


var app = angular.module('myApp', ['ngRoute']);

//
app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/view1', {
        templateUrl: 'view1.html'
    }).when('/view2', {
            templateUrl: 'view2.html'
        }).otherwise({redirectTo: '/view1'});
}]);

app.run(['$rootScope', '$window', '$location', '$log', function ($rootScope, $window, $location, $log) {
    var locationChangeStartOff = $rootScope.$on('$locationChangeStart', locationChangeStart);
    var locationChangeSuccessOff = $rootScope.$on('$locationChangeSuccess', locationChangeSuccess);

    var routeChangeStartOff = $rootScope.$on('$routeChangeStart', routeChangeStart);
    var routeChangeSuccessOff = $rootScope.$on('$routeChangeSuccess', routeChangeSuccess);

    function locationChangeStart(event) {
        $log.log('locationChangeStart');
        $log.log(arguments);
    }

    function locationChangeSuccess(event) {
        $log.log('locationChangeSuccess');
        $log.log(arguments);
    }

    function routeChangeStart(event) {
        $log.log('routeChangeStart');
        $log.log(arguments);
    }

    function routeChangeSuccess(event) {
        $log.log('routeChangeSuccess');
        $log.log(arguments);
    }
}]);
运行结果:



这个其实框架原型已经出现了


我们只需要处理 locationChangeStart,这里给出部分实现:

function locationChangeStart(event, newUrl) {
        $log.log('locationChangeStart');
        $log.log(arguments);

        var ret = $window.confirm('Are you sure to give it up? ');
        if (ret) {
            locationChangeStartOff(); //Stop listening for location changes or you can do others
            $location.path(newUrl);
            return;
        }
        event.preventDefault();
        return;
    }


好的,我们来总结下:

我们利用location改变事件来实现了在提交Location之前做了定制化,除了location事件,还有route事件,利用route事件我们可以做‘loading..’效果。




版权声明:本文为博主原创文章,未经博主允许不得转载。

angular之$location基本用法

一. 获取url的相关方法: 以 'http://localhost/$location/21.1%20$location.html#/foo?name=bunny#myhash' 这个路径为例...
  • u013184759
  • u013184759
  • 2017年01月06日 15:33
  • 13839

angularJs-route路由详解

本篇基于ng-route来讲下angular中的路由,路由功能主要是 $routeProvider服务 与 ng-view 实现。 ng-view的实现原理,是根据路由的切换,动态编译html模板—...
  • bing_JavaScript
  • bing_JavaScript
  • 2016年05月05日 14:42
  • 10468

angularJS系列之监听路由变化$location和$route实例

直接上代码 //增加路由跳转时的判断,如果是同一个页面重新刷新,则让其跳转到相应的页面。 app.run(['$rootScope', '$window', '$location',...
  • xuexiiphone
  • xuexiiphone
  • 2016年07月17日 18:05
  • 4294

$stateChangeStart状态改变事件及参数说明

我初入angularjs,公司只有我一个前端,遇到过许多的坑,主要原因还是对angularjs的很多东西不熟悉,这次就让我来说说$stateChangeStart事件吧,大家共勉 http://www...
  • qjhsmd2015
  • qjhsmd2015
  • 2017年03月24日 12:50
  • 4108

Angular 监听路由变化

Angular 路由状态发生改变时可以通过'$stateChangeStart'、'$stateChangeSuccess'、'$stateChangeError' 监听,通过注入'$location...
  • JunBo_Song
  • JunBo_Song
  • 2016年08月05日 11:30
  • 11730

angular 系列八 ui-router详细介绍及ngRoute工具区别

我们了解 angular.js 是一种富客户端单页面应用,所以要在一个页面呈现不同的视图,路由起到了至关重要的作用. angular.js 为我们封装好了一个路由工具 ngRoute ,它是一...
  • u014082714
  • u014082714
  • 2017年03月15日 00:04
  • 677

angularjs 路由回退,返回到上一个路由

在现阶段比较流行的angularjs框架中;路由是一个比较重要的应用;angularjs的单页面是其强大功能之一; 所有的页面其实就只是在一个页面就实现的:angularjs通过对路由的控制来进行页面...
  • licheng11403080324
  • licheng11403080324
  • 2016年03月08日 10:53
  • 14328

angularJS如何处理事件冒泡

事件冒泡和事件捕捉一直以来都是被讨论的话题,也许大家平时在工作中没有遇到过需要解决事件冒泡的情况 举个栗子: 从以上的代码中的fun1(),fun2()和...
  • Sourcecode_poet
  • Sourcecode_poet
  • 2016年12月07日 19:44
  • 3101

AngularJs 失去焦点事件

body {             padding-top:30px;         }                     var app = angular.module('a...
  • u014788227
  • u014788227
  • 2015年10月21日 16:27
  • 13250

angularjs 失去焦点事件

//失去焦点使用 jQuery 的扩展支持冒泡 app.directive('ngBlur', function($parse){ return function(scope, element, ...
  • myweishanli
  • myweishanli
  • 2014年01月07日 01:06
  • 5588
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AngularJS中locationchange、routechange事件
举报原因:
原因补充:

(最多只允许输入30个字)