AngularJS监听路由变化的方法
更新时间：2017年03月07日 11:09:06 作者：浅岸
本篇文章主要介绍了AngularJS监听路由变化的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用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" rel="external nofollow" >Home</a>
<a href="#/about" rel="external nofollow" >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是否也可以用，还没尝试过，有机会验证了再记录下咯~~
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Angular4实现鼠标悬停3d倾斜效果，非常不错，具有参考借鉴价值,需要的朋友可以参考下2017-10-10
本文主要介绍AngularJS 如何在控制台进行错误调试，还不错，分享给大家，希望给大家做一个参考。2016-06-06
这篇文章主要为大家详细介绍了angular过滤器实现排序功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
下面小编就为大家带来一篇python爬取安居客二手房网站数据(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
解决angularJS中input标签的ng-change事件无效问题
今天小编就为大家分享一篇解决angularJS中input标签的ng-change事件无效问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
angular使用md5,CryptoJS des加密的方法
这篇文章主要介绍了angular使用md5,CryptoJS des加密的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
这篇文章主要为大家详细介绍了Angular模板表单校验方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要给大家介绍了关于Angular 2父子组件之间共享服务通信的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-07-07
这篇文章主要介绍了angularjs 处理多个异步请求方法汇总,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了angularjs http与后台交互的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
最新评论