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>& ...
随机推荐
- Windows基础
目录 一. 硬件概述 二.常见硬件设备 三.文件系统 四. 文件类型和DOS命令 五 .批处理 六 .TCP/IP概述和Windows配置 七.网络设置.DNS.邮件★ 一. 硬件概述 1.计算机的发 ...
- Mint UI 之loadmore组件的坑：内部元素头部被遮挡了一部分
前端经常会遇到数据分页加载的需求,mint-ui组件为大家提供了loadmore组件 但是我在使用的时候,遇到了一个问题:写好布局和样式以及逻辑之后,我的mt-loadmore标签的头部总是不顶在父元 ...
- Java并发编程系列-(6) Java线程池
6. 线程池 6.1 基本概念 在web开发中,服务器需要接受并处理请求,所以会为一个请求来分配一个线程来进行处理.如果每次请求都新创建一个线程的话实现起来非常简便,但是存在一个问题:如果并发的请求数 ...
- 函数知识总结（js）
c语言中函数的形参必须定义类型,而且形参的个数和实参的个数必须相等.但是在js中形参不需要定义,在函数定义的小括号中只需要写形参名就可以了不用写var关键字,而且在函数调用时传入的实参可以和形参的个数 ...
- CTF KFIOFan: 2 Vulnhub Walkthorugh
主机扫描: ╰─ nmap -p- -A 10.10.202.152 Starting Nmap 7.70 ( https://nmap.org ) at 2019-08-29 16:55 CSTNm ...
- android studio学习----目录结构
项目结构:一个窗口只有一个项目,项目 叫 Project 代表一个workspace 一个项目的结构跟eclipse区别还是蛮大的: 首先看APP结构:app放的其实就是 java文件和资源文件 ...
- imageRectForContentRect,titleRectForContentRect,contentRectForBounds,imageRectForContentRect什么时候调用
UIButton的布局顺序细节 什么时候调用imageRectForContentRect,titleRectForContentRect,contentRectForBounds,imageRect ...
- oracle数据库执行sql文件
使用oracle客户端连接数据库,从oracle官网下载客户端instantclient_18_3工具,到目录下打开cmd命令窗口: 个人网盘客户端工具:https://pan.baidu.com/s ...
- Java之缓冲流（字节/字符缓冲流）
概述 缓冲流,也叫高效流,是对4个基本的 FileXxx 流的增强,所以也是4个流,按照数据类型分类: 字节缓冲流: BufferedInputStream , BufferedOutputStrea ...
- 用Python在25行以下代码实现人脸识别
在本文中,我们将看到一种使用Python和开放源码库开始人脸识别的非常简单的方法. OpenCV OpenCV是最流行的计算机视觉库.最初是用C/C++编写的,现在它提供了Python的API. Op ...