使用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. abap关键字

    1:abap将提升的关键字快捷输入 按tab键,提示的关键字将会自动输入. 2:shift tab 用于对其格式 3:ctrl+d 将改行复制到下一行.

  2. [vue]webpack&vue组件工程化实践

    [vue]全局组件和局部组件(嵌套+props引用父组件数据) [vue]组件篇 [vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick [vue] ...

  3. POJ3096：Surprising Strings（map）

    http://poj.org/problem?id=3096 for循环真是奇妙! #include <string.h> #include <stdio.h> #includ ...

  4. 识别真假搜索引擎（搜索蜘蛛）方法（baidu,google,Msn,sogou,soso等)

    http://www.useragentstring.com/pages/useragentstring.php 今天分析研究了两个网站的 Apache 日志,分析日志虽然很无聊,但却是很有意义的事情 ...

  5. 软件包管理:yum在线管理-yum命令

    只要我们的电脑可以接入互联网,那么yum源就是配好的,yum命令可以直接使用. 列出的是服务器上全部的rpm包. 包名,包全名的概念只在rpm手动管理时有用. 关键字主要指包名,只要知道了关键字就可以 ...

  6. 错误：Python Urlfetch Error:'GET

    1) 如果你初装了 GaAgent, 记得把在 proxy.ini 里的 id 填上:2) 刷新几次:3) 把浏览器关了,重新打开:4) 清除浏览器的缓冲区:5) 清除 cookies6) 用浏览器的 ...

  7. 谷歌浏览器使用IE内核

    经常使用谷歌浏览器去到处溜达,可是,居然还不知道谷歌浏览的还有很多新鲜的设置,昨天遇到了调试一个脚本没有出现效果,而在IE中就可以显示所谓的效果: 查询了下,看到谷歌浏览器确实对脚本的部分样式要求还是 ...

  8. jar与war 包解压

    JAR包是Java中所特有一种压缩文档,其实大家就可以把它理解为.zip包.当然也是有区别的,JAR包中有一个META-INF\MANIFEST.MF文件,当你找成JAR包时,它会自动生成.JAR包是 ...

  9. MySQL数据库----表与表之间的关系

    表1 foreign key 表2 则表1的多条记录对应表2的一条记录,即多对一 利用foreign key的原理我们可以制作两张表的多对多,一对一关系 多对多: 表1的多条记录可以对应表2的一条记录 ...

  10. pyDay4

    内容来自廖雪峰的官方网站 1.关键字参数有什么用?它可以扩展函数的功能. 2.参数定义的顺序必须是:必选参数.默认参数.可变参数.命名关键字参数和关键字参数. 3.对于任意函数,都可以通过类似func ...