使用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. 十天精通CSS3(1)

    什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主流浏览器chrome.safari.firefox.opera.甚至360都已经支 ...

  2. [ps] 灰度和通道基础知识

    灰度.灰度值.灰度图像 灰度:灰度使用黑色调来表示物体,即用黑色为基准色,不同饱和度的黑色来显示图像.每个灰度对象都具有从0%(白色)到100%(黑色)的亮度值.使用黑白或灰度扫描仪生成的图像通常以灰 ...

  3. 关于Redis-存Long取Integer类型转换错误的问题；String对象被转义的问题

    背景 最近遇到了两个Redis相关的问题,趁着清明假期,梳理整理. 1.存入Long类型对象,在代码中使用Long类型接收,结果报类型转换错误. 2.String对象的反序列化问题,直接在Redis服 ...

  4. Geometry

    uva1473 这题说的是 在空间中给了n个点 然后用体积最小的圆锥将这些点包含在内可以在表面上, 将这些点 映射到xoz平面上然后,然后枚举每个上凸包的边和每个点的极值进行判断求得最小的体积 我们会 ...

  5. 使用 JsPlumb 绘制拓扑图的通用方法

    摘要: 实现 JsPlumb 绘制拓扑图的通用方法. 只要服务端返回一个符合指定格式的数据结构,就可以绘制相应的拓扑图. 难度: 中级 示例工程见:  http://download.csdn.net ...

  6. Linux命令: 向文件写内容，编辑文件，保存文件，查看文件，不保存文件

    1.找到要编辑的文件 2.敲  vi t1.txt ,显示文件内容(vim命令) 3.敲 i,最下面变成INSERT 4.编辑自己想要的内容 5a.敲ESC:wq回车 5b.如果不想保存文件在时敲ES ...

  7. MyBatis学习笔记(七)——Mybatis缓存

    转自孤傲苍狼的博客:http://www.cnblogs.com/xdp-gacl/p/4270403.html 一.MyBatis缓存介绍 正如大多数持久层框架一样,MyBatis 同样提供了一级缓 ...

  8. 20165207 Exp0 Kali安装

    Exp0 Kali安装 选哪个 在打开www.kali.org的网页之后,我进入其下载页面,可供下载的kali版本有很多 对于选择哪个版本,在实验楼我用过xfce桌面.下面还有直接下下来就可以在vm里 ...

  9. Request 对象 response 对象 常见属性

    请求和响应 Express 应用使用回调函数的参数: request 和 response 对象来处理请求和响应的数据. app.get('/', function (req, res) { // - ...

  10. redis删除单个key和多个key，ssdb会落地导致重启redis无法清除缓存

    redis删除单个key和多个key,ssdb会落地导致重启redis无法清除缓存,需要针对单个key进行删除 删除单个:del key 删除多个:redis-cli -a pass(密码) keys ...