使用AngularJS时,当路由发生改变时,我们需要做某些处理,此时可以监听路由事件,常用的是$routeStartChange, $routeChangeSuccess。完整例子如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AngularJS监听路由变化</title>
</head>
<body ng-app="ngRouteExample">
<div id="navigation">
<a href="#/home">Home</a>
<a href="#/about">About</a>
</div> <div ng-view></div> <script type="text/ng-template" id="home.html">
<h1> Home </h1>
<table>
<tbody>
<tr ng-repeat="x in records" style="background:#abcdef;">
<td>{{x.Name}}</td>
<td>{{x.Country}}</td>
</tr>
</tbody>
</table>
</script> <script type="text/ng-template" id="about.html">
<h1> About </h1>
<p>在输入框中尝试输入:</p>
<p>姓名:<input type="text" ng-model="name"></p>
<p>你输入的为: {{name}}</p>
</script> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<script type="text/javascript">
angular.module('ngRouteExample', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'home.html',
controller: 'HomeController'
}).
when('/about', {
templateUrl: 'about.html',
controller: 'AboutController'
}).
otherwise({
redirectTo: '/home'
});
})
.run(['$rootScope', '$location', function($rootScope, $location) {
/* 监听路由的状态变化 */
$rootScope.$on('$routeChangeStart', function(evt, next, current){
console.log('route begin change');
});
$rootScope.$on('$routeChangeSuccess', function(evt, current, previous) {
console.log('route have already changed :'+$location.path());
});
}])
.controller('HomeController', function ($scope) {
$scope.records = [{
"Name" : "Alfreds Futterkiste",
"Country" : "Germany"
},{
"Name" : "Berglunds snabbköp",
"Country" : "Sweden"
},{
"Name" : "Centro comercial Moctezuma",
"Country" : "Mexico"
},{
"Name" : "Ernst Handel",
"Country" : "Austria"
}]
})
.controller('AboutController', function ($scope) {
$scope.name = '呵呵';
});
</script>
</body>
</html>

上述的例子是AngularJS 1的,对于Angular2是否也可以用,还没尝试过,有机会验证了再记录下咯~~

AngularJS监听路由变化的更多相关文章

  1. 【转载】AngularJS监听路由变化

    一.Angular 路由状态发生改变时可以通过' $stateChangeStart '.' $stateChangeSuccess '.' $stateChangeError '监听,通过注入'$l ...

  2. Angular 监听路由变化

    var app = angular.module('Mywind',['ui.router']) //Angular 监听路由变化 function run($ionicPlatform, $loca ...

  3. vue 如何通过监听路由变化给父级路由菜单添加active样式

    1.项目需求:在项目开发中,多级菜单的情况下,勾选子菜单时,需要在父级菜单添加active样式. 2.遇到的问题:一级路由菜单的话,点击当前路由会自动在路由标签上添加router-link-exact ...

  4. mint ui的tabBar监听路由变化实现tabBar切换

    说明 最近学习vue,使用了mint ui的tabBar,感觉好难受,结合 tab-container使用更难受,因为它不是根据路由来切换页面的.mui与它基本相反,因此它能根据搜索栏的路由变化,相应 ...

  5. angular 全局 监听路由变化

    app.run(['$rootScope', '$location', function($rootScope, $location) { /* 监听路由的状态变化 */ $rootScope.$on ...

  6. Angular 监听路由变化事件

    摘要: $stateChangeStart- 当模板开始解析之前触发 $rootScope.$on('$stateChangeStart', function(event, toState, toPa ...

  7. vue 监听路由变化

    方法一:通过 watch // 监听,当路由发生变化的时候执行 watch:{ $route(to,from){ console.log(to.path); } }, 或 // 监听,当路由发生变化的 ...

  8. AngularJS监听数组变化

    我们在使用angualr的监听时候,业务的需要我们会去监听一个数组的某一个值得变化,再写逻辑代码.然而我们在使用$scope.$watch("",function(){ })时候会 ...

  9. vue监听路由变化

    使用 watch,观察路由,一旦发生变化便重新获取数据 watch: { // 如果路由有变化,会再次执行该方法 '$route': 'fetchData' }

随机推荐

  1. Magento架构分析,Magento MVC 设计分析

    Magento架构分析,Magento MVC 设计分析 分类:Magento 标签:Magento MVC.Magento架构 669人浏览 Magento 采用类似 JAVA的架构,其扩展与稳定性 ...

  2. 第三章 用 PowerShell 进行远程管理(remoting)

    第三章 用 PowerShell 进行远程管理(remoting) PowerShell V2 引进了一项强大的新技术,远程(remoting),PowerShell V3 进行了完善和扩展.主要基于 ...

  3. rhel5.8 ISO yum源配置

    [root@lei1 mnt]# mkdir /mnt/iso [root@lei1 mnt]# mkdir /mnt/cdrom [root@lei1 ~]# mv rhel-server-5.8- ...

  4. win10 桌面设置为远程桌面

    查看方法: 1.点击桌面“计算机”,右键,点击属性. 2.在计算机属性系统窗口中点击“远程设置”. 3.在“系统属性”对话框中远程协助勾选“允许远程协助连接这台计算机”. 4.在“远程协助”点击“高级 ...

  5. windows 下 Django 搭架子 - 从建立project到建立app

    第一步,安装python 3.6 到C:\Python,在Python官网下Windows版的安装包即可 安装Django,在命令行下直接 pip install django,django 被安装在 ...

  6. workqueue --最清晰的讲解

    带你入门: 1.INIT_WORK(struct work_struct *work, void (*function)(void *), void *data) 上面一句只是定义了work和work ...

  7. jQuery对象和DOM对象相互转换

    DOM对象转为DOM对象: obj = document.getElementById('id') 使用$()包括对象即可 $(obj) jQuery对象转为DOM对象: 在对象后面添加[0] $(' ...

  8. Android中使用ViewPager制作广告栏效果 - 解决ViewPager占满全屏页面适配问题

    . 参考界面 : 携程app首页的广告栏, 使用ViewPager实现        自制页面效果图 : 源码下载地址: http://download.csdn.net/detail/han1202 ...

  9. maredit测试

    int main() { } void addTotail(ListNode *& pHead, int value) { ListNode *node = new ListNode(); n ...

  10. Netty Bootstrap(图解)|秒懂

    目录 Netty Bootstrap(图解) 源码工程 写在前面 图解几个重要概念 父子 channel EventLoop 线程与线程组 通道与Reactor线程组 Channel 通道的类型 启动 ...