AngularJS监听路由变化的方法

前端之家收集整理的这篇文章主要介绍了AngularJS监听路由变化的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

使用AngularJS时,当路由发生改变时,我们需要做某些处理,此时可以监听路由事件,常用的是$routeStartChange,$routeChangeSuccess。完整例子如下:

<Meta charset="utf-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge"> AngularJS监听路由变化 Home About

<script type="text/ng-template" id="home.html">

Home

<script type="text/ng-template" id="about.html">

About

在输入框中尝试输入:

姓名:

你输入的为: {{name}}

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"&gt;
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"&gt;
<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',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 = '呵呵';
});

上述的例子是AngularJS 1的,对于Angular2是否也可以用,还没尝试过,有机会验证了再记录下咯~~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/41003.html

猜你在找的JavaScript相关文章