前几天,项目在做一个功能时需要在页面切换之前关闭正在执行的函数。尝试了几种方式都不行,最后想到既然angularjs是通过理由切换页面,那就在路由上面做文章吧。AngularJS在路由发生改变时,可以通过路由事件来监听路由是否发生了改变。常用的是状态包括 $stateChangeStart,$stateChangeSuccess,$stateChangeError,测试代码以及注释如下:

var app = angular.module("app", []);   //定义app
app.run(['$rootScope', '$location', function ($rootScope, $location) { //需要注入服务$rootScope;$location在这可要可不要,这里用来查看获取新的路由链接
//路由监听事件
$rootScope.$on('$stateChangeStart',
function (event, toState, toParams, fromState, fromParams) {
alert("路由的状态变化开始!");
console.log('route begin change');
});
// stateChangeSuccess 当模板解析完成后触发
$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
alert("路由的状态变化成功!");
console.log('route have already changed :' + $location.path());
}); // $stateChangeError 当模板解析过程中发生错误时触发
$rootScope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams, error) {
alert("路由的状态变化失败!");
console.log('route changed failed:');
})
}]);

  在测试时顺手截了几张图,直观判断:

    从China路由切换到Today:点击Today -> 路由的状态变化开始 -> 路由的状态变化成功 -> 新页面Today渲染;而且可以看到新获取到的路由新链接

    

    

    

    

    Today路由切换到China路由,方式和步骤相同。

    

    

    

   注意:在测试的过程中,我先用的状态字段是$routeStartChange和$routeChangeSuccess,但是代码没有执行,度娘了下才发现,这两个关键字是ng1在1.5版本之前的,测试时用的1.5以后的版本,所以代码不执行。

    如果有用到1.5之前版本的,可以试试下面代码:

var app = angular.module("app", []);   //定义app
app.run(['$rootScope', '$location', function($rootScope, $location) { //需要注入服务$rootScope;$location在这可要可不要,这里用来查看获取新的路由链接
/* 监听路由的状态变化 */
$rootScope.$on('$routeChangeStart', function(evt, next, current){
alert("路由的状态变化开始!");
console.log('route begin change');
});
/* 路由的状态变化成功 */
$rootScope.$on('$routeChangeSuccess', function(evt, current, previous) {
alert("路由的状态变化成功!");
console.log('route have already changed :'+$location.path());
});
}]);

  页面的加载渲染监听:路由的切换可以监听了,那么顺便记一下页面的加载渲染监听:

  // 在页面渲染中可通过$viewContentLoading$viewContentLoaded监听页面渲染状态:$viewContentLoading(渲染开始)和$viewContentLoaded(渲染结束)。(在控制器中添加以下代码实现监听)

  // $viewContentLoading:当页面视图开始加载时,DOM渲染完成之前触发,该事件将在$scope链上广播此事件。
$scope.$watch('$viewContentLoading', function (event, viewConfig) {
alert('模板加载完成之前!');
});
//$viewContentLoaded:当页面视图加载完成,DOM渲染完成之后触发,视图所在的$scope发出该事件。
$scope.$watch('$viewContentLoaded', function (event) {
alert('模板已经加载完成!');
});

angularjs -- 路由监听的更多相关文章

  1. angularjs路由监听,uirouter感知路由变化,解决uirouter路由监听不生效的问题

     壹 ❀ 引 angularjs除了惊为天人的双向数据绑定外,路由也是出彩的一笔,通过路由配置,我们能在不发起页面跳转的情况下,对当前页内容进行整体更新,angularjs提供了ngRoute模块用于 ...

  2. 解决ui-router路由监听$stateChangeStart、$stateChangeSuccess、$stateChangeError不执行的问题

    问题解答 angular1项目导入ui-router之后,使用路由监听,代码如下 angular.module('app', ['ui.router', 'ui.router.state.events ...

  3. vue路由监听及路由守卫

    路由监听: //当一个组件被复用的时候,那么路由发生变化,但是页面上面的数据不会发生变化 新建one.vue 组件 作为home的子组件,在home.vue 中写遍历渲染页面 ,并用params传参, ...

  4. Vue路由监听

    一.问题描述 描述:页面1showowner.vue跳转到页面2showuser.vue 需求:页面1的多个结点对应于一个页面2文件[页面2未展示] 问题:并不是页面一的一个结点对应一个页面二文件 处 ...

  5. vue的路由带参数和取参数,watch路由监听

    1.写在html里 <router-link :to="{path:'/goldShop/goodsInfo',query: { id:item.id }}" class=& ...

  6. vue路由监听和参数监听

    1.路由携带数据跳转 routerAction(hideDisplays, data) { switch (hideDisplays) { case "pubAccountMenu" ...

  7. 关于AngularJs中监听事件及脏循环的理解

    可能很多刚入行或者刚学习的前端对于AngularJs中的一些事件或者概念感觉不理解或者没有思路,今天让我们一起来剖析一下AngularJs中的一些事件. AngularJs中对于的监听事件会用到一个s ...

  8. vue 路由监听

    发现网上其实有很多种答案,但是测试之后发现很多都不行,或者写的不完整. 一.在app.vue组件内,增加监听$route,如下: watch: { $route(to, from) { console ...

  9. AngularJS - Watch 监听对象

    <body> <div ng-app="myApp"> <div ng-controller="firstController"& ...

随机推荐

  1. 关于JSON基础的总结

    本文总结自百度百科 JSON 语法规则 JSON 语法是 JavaScript 对象表示语法的子集. 数据在键值对中 数据由逗号分隔 花括号保存对象 方括号保存数组 JSON 名称/值对 JSON 数 ...

  2. mysql ERROR 1045 (28000): Access denied for user 可能解决方法分析

    在实际登录redmine的过程中,我们遇到了如下的error ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using ...

  3. spring boot整合Swagger2

    Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化RESTful风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件的方法,参数和模型紧密集成到服务器 ...

  4. Img与background的区别

    今天做项目中,用background显示了二维码和一些文字,但显示到页面上时,二维码和图片都变得模糊了.于是将图片调整.放大,但在放大后,作为背景图片的它则显示不全,无奈之下用了backgroung- ...

  5. Python -- Gui编程 -- Qt库的使用 -- 配置资源文件

    1.源文件(qtRes.py) import sys from PyQt4 import QtCore, QtGui, uic class MyDialog(QtGui.QDialog): def _ ...

  6. R语言---- 数据的基本运算

    一.基本运算符号 1.基本数学计算 +.-.*./.^.%%(求模).%/%(整除)注意:求模运算两边若为小数,则整数和小数部分分别求模.例:5.6%%2.2 2.比较运算 >.<.> ...

  7. PyCharm2018专业版激活步骤

    激活步骤: 1.更改hosts文件,2 获取注册码,  3 完成注册. 1. 更改host文件 hosts文件的路径 : c:\windows\system32\drivers\etc\hosts 将 ...

  8. php的error_log()记录日志

    <?php date_default_timezone_set('PRC');//设置时区,否则会有警告 //把This s a error保存到/home/log-yyyy-MM-dd.txt ...

  9. [九省联考 2018]IIIDX

    Description 题库链接 给你 \(n+1\) 个节点的一棵树,节点编号为 \(0\sim n\) , \(0\) 为根.边集为 \(\mathbb{E}=\left\{(u,v)\big|\ ...

  10. [转]VS2013中使用Git建立源代码管理

    本文转自:https://blog.csdn.net/bodybo/article/details/38976549 第一次在VS2013中使用Git,也是第一次使用Git,各种不熟悉.百度各种使用经 ...