AngularJS监听路由变化的方法


Posted in Javascript onMarch 07, 2017

使用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是否也可以用,还没尝试过,有机会验证了再记录下咯~~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过JAVASCRIPT读取ASP设定的COOKIE
Nov 24 Javascript
javascript之AJAX框架使用说明
Apr 24 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
Jun 24 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
Nov 25 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 Javascript
JavaScript实现动态添加Form表单元素的方法示例
Aug 14 Javascript
js生成word中图片处理方法
Jan 06 Javascript
微信小程序-form表单提交代码实例
Apr 29 Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 Javascript
Vue axios 跨域请求无法带上cookie的解决
Sep 08 Javascript
微信小程序开发之入门实例教程篇
Mar 07 #Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 #Javascript
Node.js查找当前目录下文件夹实例代码
Mar 07 #Javascript
jQuery模拟下拉框选择对应菜单的内容
Mar 07 #Javascript
详解JS异步加载的三种方式
Mar 07 #Javascript
无法获取隐藏元素宽度和高度的解决方案
Mar 07 #Javascript
angularjs+bootstrap菜单的使用示例代码
Mar 07 #Javascript
You might like
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
Yii框架日志记录Logging操作示例
2018/07/12 PHP
Laravel获取当前请求的控制器和方法以及中间件的例子
2019/10/11 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
2007/04/21 Javascript
js截取函数(indexOf,join等)
2010/09/01 Javascript
js获取html文件的思路及示例
2013/09/17 Javascript
让JavaScript和其它资源并发下载的方法
2014/10/16 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
2018/03/28 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
vue解决使用$http获取数据时报错的问题
2019/10/30 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
2020/12/14 Vue.js
python+pygame简单画板实现代码实例
2017/12/13 Python
Django之路由层的实现
2019/09/09 Python
Anaconda使用IDLE的实现示例
2020/09/23 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
详解HTML5通讯录获取指定多个人的信息
2016/12/20 HTML / CSS
linux面试题参考答案(3)
2012/09/13 面试题
小车司机岗位职责
2013/11/25 职场文书
财务管理职业生涯规划范文
2013/12/27 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
化工操作工岗位职责
2014/04/29 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
会计求职自荐信范文
2015/03/04 职场文书
2016继续教育培训学习心得体会
2016/01/19 职场文书
七年级之开学家长寄语35句
2019/09/05 职场文书
导游词之无锡丝业博物馆
2019/11/12 职场文书
python库sklearn常用操作
2021/08/23 Python
Go语言编译原理之变量捕获
2022/08/05 Golang