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事件热键兼容ie|firefox
Dec 30 Javascript
javascript获得服务器端控件的ID的实现代码
Dec 28 Javascript
JS的千分位算法实现思路
Jul 31 Javascript
jqgrid 表格数据导出实例
Nov 21 Javascript
js中判断用户输入的值是否为空的简单实例
Dec 23 Javascript
用JavaScript实现对话框的教程
Jun 04 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
关于react-router的几种配置方式详解
Jul 24 Javascript
详解Vue demo实现商品列表的展示
May 07 Javascript
p5.js绘制旋转的正方形
Oct 23 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
Jul 15 Javascript
vue+iview实现分页及查询功能
Nov 17 Vue.js
微信小程序开发之入门实例教程篇
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 数组入门教程小结
2009/05/20 PHP
php设计模式 FlyWeight (享元模式)
2011/06/26 PHP
PHP使用xmllint命令处理xml与html的方法
2014/12/15 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
JavaScript 学习初步 入门教程
2010/03/25 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
2012/08/17 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
使用Vue实现移动端左滑删除效果附源码
2019/05/16 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
python生成器表达式和列表解析
2016/03/10 Python
Python SQLite3数据库日期与时间常见函数用法分析
2017/08/14 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
python将excel转换为csv的代码方法总结
2019/07/03 Python
Python threading的使用方法解析
2019/08/28 Python
Python实现井字棋小游戏
2020/03/09 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
python 密码学示例——理解哈希(Hash)算法
2020/09/21 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
联想台湾官网:Lenovo TW
2018/05/09 全球购物
幼儿园小班评语大全
2014/04/17 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
2015年档案管理工作总结
2015/04/08 职场文书
新农村建设指导员工作总结
2015/08/13 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书