Angular|Angular ui-route路由状态监听
使用ui-route很多的时候需要控制页面跳转。
而监听路由状态的变化是最开始的切入点,我们可以再注入$location服务进行跳转逻辑管理。
在ui-route的api-doc中,便给我们介绍了几个event,这样可以使得我们很简单就能知道路由变化的状态。
以下我就记录一下ui-route0.x版本的监听方法
var app=angular.module(“app”,[“ui-route”])
//先配置一些跳转页面
app.config(“$stateProvider”,”$urlStateProvider”,function($stateProvider,$urlStateProvider){
$stateProvider.state(“login”,{
url:”/login”
templateUrl:”login.html”
})
})
//我们开始初始化全局监听事件
app.run(“$rootScope”,[function($rootScope){
//订阅一个监听事件
$rootScope.$on(“$stateChangeStart”,function(toState,fromState){
【Angular|Angular ui-route路由状态监听】function body.........
})
}])
说明:
&stateChangeStart是ui-route模块内置的事件
回调函数的参数是固定的,toState,fomState分别表示“跳转到的状态”、“跳转前的状态”
这样注册完一个事件,在跳转的时候就会自动监听。响应你给定的一系列逻辑了。
更多api 可参考源码:https://github.com/angular-ui/ui-router
推荐阅读
- angular2内置管道
- day|day 28 设置路由表
- Angular|Angular 用service 在组件间传递数据
- Angular|Angular 日期管道 datePipe - dateFormat
- 思科路由映射表控制BGP路径的方法和实例
- 学习angular笔记
- 微信小程序路由跳转
- react 与 angular
- 测试环境与路由|测试环境与路由 | 阿里巴巴DevOps实践指南
- 爪哇学习笔记——从pushState方法看前端路由