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 相关文章推荐
jquery 常用操作方法
Jan 28 Javascript
js传中文参数controller里获取参数乱码问题解决方法
Jan 03 Javascript
js实现抽奖效果
Mar 27 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
Jun 19 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
基于vue.js无缝滚动效果
Jan 25 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
用Fundebug插件记录网络请求异常的方法
Feb 21 Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 Javascript
vue 微信扫码登录(自定义样式)
Jan 06 Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 Javascript
JavaScript实现手风琴效果
Feb 18 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
中国第一家无线电行
2021/03/01 无线电
PHP以指定字段为索引返回数据库所取的数据数组
2013/06/30 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
PHP简单实现断点续传下载的方法
2015/09/25 PHP
php封装的单文件(图片)上传类完整实例
2016/10/18 PHP
自适应高度框架 ----属个人收藏内容
2007/01/22 Javascript
显示js对象所有属性和方法的函数
2009/10/16 Javascript
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
javascript 年月日联动实现核心代码
2009/12/21 Javascript
JS模拟面向对象全解(二、类型与赋值)
2011/07/13 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
2017/02/22 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
JS设计模式之惰性模式(二)
2017/09/29 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
如何获取TypeScript的声明文件.d.ts
2018/05/01 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
keep-alive保持组件状态的方法
2020/12/02 Javascript
简单使用Python自动生成文章
2014/12/25 Python
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
Python之自动获取公网IP的实例讲解
2017/10/01 Python
小白如何入门Python? 制作一个网站为例
2018/03/06 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
Python装饰器原理与简单用法实例分析
2018/04/29 Python
python3.4.3下逐行读入txt文本并去重的方法
2018/04/29 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
详解Python odoo中嵌入html简单的分页功能
2019/05/29 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
浅谈Python中的模块
2020/06/10 Python
中学生寄语大全
2014/04/03 职场文书
五年级学生评语
2014/04/22 职场文书
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js