AngularJS监听路由变化的方法

2019-11-19 17:17:09

字体：大中小

来源：转载

供稿：网友

使用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获取DIV值的方法示例

下一篇：微信小程序开发之入门实例教程篇