使用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. PHP DB 数据库连接类

    近期观看了一节 PHP 消息队列视频,对于讲师WiconWang提供的代码,在此分享一下,希望能对爱学习的小伙伴有所帮助… <?php // 数据库连接类 class DB{ //私有的属性 p ...

  2. [kx]为什么计算机能读懂 1 和 0 ？

    CPU如何实现运算的? 下面是一个小伙的总结, 从物理电路到逻辑运算到数字电路,一步一步的好理解. 最好能看看那本<编码 隐匿在计算机软硬件背后的语言>的书. 为什么计算机能读懂 1 和 ...

  3. easyUI的datebox添加清空按钮功能

    需要修改源码: 第一步:按下图修改 第二步:按下两图修改(*zh_CN.js)

  4. [LeetCode] 104. Maximum Depth of Binary Tree_Easy tag: DFS

    Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the long ...

  5. Fuzzy and fun on Air Jordan 12 Doernbecher design

    Carissa Navarro keeps it warm, fuzzy and fun on her 2017 Air Jordan 12 Doernbecher design. Nike's 20 ...

  6. unity3d-碰撞检测

    碰撞检测 游戏中很多时候都要判断碰撞检测,比如子弹打中敌机.当碰撞后.就要发生爆炸. 或者敌机减血, 我们先看一张图片,看皮球从天空下落.与地面碰撞的过程 碰撞检测条件 游戏中两个对象发生碰撞是需要条 ...

  7. Linux (RHEL)修改时区

    1.修改配置文件修改为上海时区 vi /etc/sysconfig/clock ZONE="Asia/Shanghai" 2.创建上海时区的软连接 ln -sf /usr/shar ...

  8. c++虚函数重写的权限问题

    cbase.h: #ifndef CBASE_H #define CBASE_H #include<iostream> using std::cout; using std::endl; ...

  9. Javascript-闰年javascript的判断

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. Atcoder Tenka1 Programmer Contest 2019 E - Polynomial Divisors

    题意: 给出一个多项式,问有多少个质数\(p\)使得\(p\;|\;f(x)\),不管\(x\)取何值 思路: 首先所有系数的\(gcd\)的质因子都是可以的. 再考虑一个结论,如果在\(\bmod ...