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>& ...
随机推荐
- Java题整
Java面试题整 http://www.cnblogs.com/remember-forget/p/6140166.html 上:http://blog.csdn.net/jackfrued/arti ...
- Docker swarm实战总结
一.简介 Swarm 是 Docker 官方提供的一款集群管理工具,其主要作用是把若干台 Docker 主机抽象为一个整体,并且通过一个入口统一管理这些 Docker 主机上的各种 Docker 资源 ...
- 判断浏览器是否启用cookie
<!DOCTYPE html> <html> <body onload="checkCookies()"> <script> fun ...
- JavaScript原型 补充
js原型 // 构造函数 = 类 function A(){} let a1 = new A(); // 添加原型 num => 类似于属性 A.prototype.num = 100; con ...
- django----orm查询优化 MTV与MVC模型 choice参数 ajax serializers
目录 orm查询优化 only defer select_related 与 prefetch_related MTV 与 MVC 模型 choice参数 Ajax 前端代码 后端代码 前后端传输数据 ...
- 图解leetcode —— 128. 最长连续序列
前言: 每道题附带动态示意图,提供java.python两种语言答案,力求提供leetcode最优解. 描述: 给定一个未排序的整数数组,找出最长连续序列的长度. 要求算法的时间复杂度为 O(n). ...
- idea创建Maven版的ssm项目
要使用idea创建一个maven项目,首先电脑安装maven,maven下载地址:http://maven.apache.org/download.cgi 1.打开idea,选择创建一个新项目,选择m ...
- Electron中使用sql.js操作SQLite数据库
推荐sql.js——一款纯js的sqlite工具. 一.关于sql.js sql.js(https://github.com/kripken/sql.js)通过使用Emscripten编译SQLite ...
- Hadoop入门学习笔记总结系列文章导航
一.为何要学习Hadoop? 这是一个信息爆炸的时代.经过数十年的积累,很多企业都聚集了大量的数据.这些数据也是企业的核心财富之一,怎样从累积的数据里寻找价值,变废为宝炼数成金成为当务之急.但数据增长 ...
- Laravel 框架对于分表进行统计合并查询的思路
当对数据表进行水平分表之后,若要进行数据统计,往往需要对所有分表一起进行联合查询.在使用 Laravel 框架时,可以利用 Model 类的 setTable 方法对于多个表进行合并查询. 举个例子, ...