angularjs路由监听，uirouter感知路由变化，解决uirouter路由监听不生效的问题
壹 ❀ 引
angularjs除了惊为天人的双向数据绑定外，路由也是出彩的一笔，通过路由配置，我们能在不发起页面跳转的情况下，对当前页内容进行整体更新，angularjs提供了ngRoute模块用于路由配置，除此之外，angularUI也提供了uirouter模块用于解决路由问题，本文将从ngRoute与uirouter两个模块出发，分别介绍两者的路由监听方法。
贰 ❀ ngRoute路由监听
ngRoute提供了路由事件用于监听路由过程中的每个阶段，可以为这些不同的路由事件设置监听器并在路由发生变化时做出响应。先上一个完整的例子，需要引入angularjs与angular-route.js：
<!DOCTYPE html>
<html lang="en" ng-app="myApp"> <head>
<meta charset="UTF-8">
<title>Document</title>
</head> <body ng-controller="myCtrl as vm">
<ul>
<li><a href="index.html#!/index">index</a></li>
<li><a href="index.html#!/login">login</a></li>
<li><a href="index.html#!/dashboard">dashboard</a></li>
</ul>
<div ng-view></div>
</body>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-route/angular-route.js"></script>
<script src="js/app.js"></script> </html>
angular.module('myApp', ['ngRoute'])
.controller('myCtrl', function ($scope) {
let vm = this
})
.config(['$routeProvider', function ($routeProvider) {
// 在这里定义路由
$routeProvider
.when('/index', {
template: '<div><h2>Route1</h2></div>',
})
.when('/login', {
template: '<div><h2>Route2</h2></div>',
})
.when('/dashboard', {
template: '<div><h2>Route3</h2></div>',
})
.otherwise({
redirectTo: '/index'
});
}])
.run(['$rootScope', '$location', function ($rootScope, $location) {
$rootScope.$on('$routeChangeSuccess', function (evt, current, previous) {
console.log(evt, current, previous);
console.log(1);
});
}]);
1.$routeChangeStart
AngularJS在路由变化之前会执行$routeChangeStart事件。在这一步中，路由服务会开始加载路由变化所需要的所有依赖，并且模板和resolve中的promise也会被resolve。
angular.module('myApp', [])
.run(['$rootScope', '$location', function ($rootScope, $location) {
$rootScope.$on('$routeChangeStart', function (evt, current, previous) {
// do something
// evt 原始的AngularJS evt对象
// current 用户当前所处的路由
// current 上一个路由（如果当前是第一个路由，则为undefined）。
});
}]);
2. $routeChangeSuccess
AngularJS会在路由的依赖被加载后执行$routeChangeSuccess事件。
angular.module('myApp', [])
.run(['$rootScope', '$location', function ($rootScope, $location) {
$rootScope.$on('$routeChangeSuccess', function (evt, current, previous) {
// do something
// evt 原始的AngularJS evt对象
// current 用户当前所处的路由
// previous 上一个路由（如果当前是第一个路由，则为undefined）。
});
}]);
3. $routeChangeError
angular.module('myApp', [])
.run(function ($rootScope, $location) {
$rootScope.$on('$routeChangeError', function (current, previous, rejection) {
// do something
// current 当前路由的信息
// previous 上一个路由的信息
// rejection 被拒绝的promise的错误信息
});
});
4. $routeUpdate
叁 ❀ uirouter路由监听
uirouter是由angualrUI提供的三方路由模块，因此也需要额外下载，并在主模块中注入路由模块，需要引入angualrjs，angular-ui-router.js与stateEvents.js，先看一个完整的例子：
<!DOCTYPE html>
<html lang="en" ng-app="myApp"> <head>
<meta charset="UTF-8">
<title>Document</title>
</head> <body ng-controller="myCtrl as vm"> <ul>
<li><a ui-sref="index">index</a></li>
<li><a ui-sref="login">login</a></li>
<li><a ui-sref="dashboard">dashboard</a></li>
</ul>
<div ui-view></div>
</body>
</body>
<script src="modules/angular.js"></script>
<script src="modules/@uirouter/angularjs/release/angular-ui-router.js"></script>
<script src="modules/@uirouter/angularjs/release/stateEvents.js"></script>
<script src="demo.js"></script> </html>
angular.module('myApp', ['ui.router', 'ui.router.state.events'])
.controller('myCtrl', function ($scope) {
let vm = this
})
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
//设置路由初始页面
$urlRouterProvider.otherwise('orderList');
//路由配置
$stateProvider
.state('index', {
url: '/index',
template: '<div><h2>Route1</h2></div>',
})
.state('login', {
url: '/login',
template: '<div><h2>Route2</h2></div>',
})
.state('dashboard', {
url: '/dashboard',
template: '<div><h2>Route3</h2></div>',
})
}])
.run(['$rootScope', function ($rootScope) {
// 监听路由开始时触发
$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
//do something
console.log(1);
// event 该事件的基本信息
// toState 当前路由的基本信息，比如路由名称，url,视图的控制器，模板路径等
// toParams 当前路由的参数
// fromState 上一个路由的基本信息，比如路由名称，url,视图的控制器，模板路径等
// fromParams 上一个路由的参数
});
// 路由成功时触发
$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
//do something
// event 该事件的基本信息
// toState 当前路由的基本信息，比如路由名称，url,视图的控制器，模板路径等
// toParams 当前路由的参数
// fromState 上一个路由的基本信息，比如路由名称，url,视图的控制器，模板路径等
// fromParams 上一个路由的参数
});
// 路由错误时触发
$rootScope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams, error) {
//do something
// event 该事件的基本信息
// toState 当前路由的基本信息，比如路由名称，url,视图的控制器，模板路径等
// toParams 当前路由的参数
// fromState 上一个路由的基本信息，比如路由名称，url,视图的控制器，模板路径等
// fromParams 上一个路由的参数
// error 错误信息
});
}]);
若$stateChangeStart之类的路由事件没触发，还是前面说的，得引入stateEvents.js文件，此文件在下载angular-ui-router.js时会同时包含。
肆 ❀ 参考
解决ui-router路由监听$stateChangeStart、$stateChangeSuccess、$stateChangeError不执行的问题
angularjs路由监听，uirouter感知路由变化，解决uirouter路由监听不生效的问题的更多相关文章
- oninput和onpropertychange实时监听输入框值的变化
oninput和onpropertychange实时监听输入框值的变化 传统监听输入框的做法就是使用keyup.keydown.keypress,或者change事件来实现,但keyup.keydow ...
- 解决Fiddler不能监听Java HttpURLConnection请求的方法
在默认情况下,Fiddler不能监听Java HttpURLConnection请求.究其原因,Java的网络通信协议栈可能浏览器的通信协议栈略有区别,Fiddler监听Http请求的原理是 在应用程 ...
- 关于Oracle本地连接出现与监听有关的问题的解决方法探讨
关于Oracle本地连接出现与监听有关的问题的解决方法探讨 监听的作用: 用于应用桌面即用户与数据库服务器建立连接的媒介,客户端发送连接请求,监听识别请求并建立客户端与服务器的连接后,监听的使命并完成 ...
- vue中监听window.resize的变化
我只想说每个人遇到的bug真的不能一概而论,解决办法也会有不同.在vue中使用echarts的时候,会想要实现window.resize窗体变化大小的时候让图形大小跟着变化.实现的过程中各种bug,也 ...
- js 实时监听input中值变化
注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...
- javascript --- 实时监听输入框值的变化
实时监听文本框值变化是非常常见的功能,通常最简单的办法就是用keyup,keydown来实现,但是这种方法有两个问题,一个是当直接复制粘贴的时候没法监听到事件,另外一个问题是在移动端,使用删除键删除输 ...
- Android监听WIFI网络的变化并且获得当前信号强度
MainActivity如下: package cc.testwifi; import android.os.Bundle; import android.app.Activity; /** * De ...
- js监听文本框值变化事件，就oninput & onpropertychange & onkeyup & onchange的区别
在Web前端项目中实时监听文本框的值变化是非常常见的功能,通常最简单最容易想到的是onkeyup和onchange事件,但是在使用onkeyup来监听键盘事件的时候,监听不到鼠标右键的粘贴.复制的操作 ...
- 用jquery监听输入数字的变化
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
随机推荐
- Orleans 文档记录
Orleans 官方文档:官方文档 http://dotnet.github.io/orleans/index.html Orleans 中文文档:中文文档 https://orleanscn.git ...
- 基于 Blazui 的 Blazor 后台管理模板 BlazAdmin 正式尝鲜
简介 BlazAdmin 是一个基于Blazui的后台管理模板,无JS,无TS,非 Silverlight,非 WebForm,一个标签即可使用. 我将在下一篇文章讨论 Blazor 服务器端渲染与客 ...
- JAVA可视化闹钟源码
概述 一些同学的Java课设有这样一个问题,比较感兴趣就做了一下 功能介绍: 1.可增加闹钟 2.可删除闹钟 3.时间到了响铃 4.关闭闹钟不会丢失闹钟(因为闹钟存储在txt文件中,不会因程序关闭就终 ...
- item()方法遍历字典
Python字典的遍历方法有好几种,其中一种是for...in,这个我就不说明,在Python了几乎随处都可见for...in.下面说的这种遍历方式是item()方法. item() item()方法 ...
- javascript基础(001)-js加减乘除注意事项(含类型转换)
一,加减乘除注意事项: 1.任意类型'+'字符串都被强转字符串 2.数字和布尔类型'+'undefined 结果为 NaN (Not a Number) 3.'-','*','/'操作会尝试把数据转为 ...
- scrapy框架（二）
scrapy框架(二) 一.scrapy 选择器 概述: Scrapy提供基于lxml库的解析机制,它们被称为选择器. 因为,它们“选择”由XPath或CSS表达式指定的HTML文档的某部分. Sca ...
- UWP 更强大的文件获取能力
默认情况下,通用 Windows 平台 (UWP) 应用可以访问特定文件系统位置. 应用也可以通过文件选取器或通过声明功能访问其他位置. 在创建新的应用时,默认情况下你可以访问以下文件系统位置: 1. ...
- 在Windows10中安装与配置Nginx
一.使用环境: Windows 10 1909 nginx 1.16.1 二.安装与配置: 1. 打开链接,http://nginx.org/en/download.html 下载稳定版本nginx ...
- Sql将一列数据拆分为多行显示的两种方法
原始数据与期望结果有表tb, 如下:id value----------- -----------1 aa,bb2 aaa,bbb,ccc欲按 ...
- Cortex-A7处理器算数运算指令和逻辑运算指令
汇编中也可以进行算术运算, 比如加减乘除,常用的运算指令用法如表所示: 常用运算指令 在嵌入式开发中最常会用的就是加减指令,乘除基本用不到. 我们用 C 语言进行CPU 寄存器配置的时候常常需要用 ...