最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
AngularJS监听路由变化的方法
时间:2017-06-02 编辑:简简单单 来源:一聚教程网
使用AngularJS时,当路由发生改变时,我们需要做某些处理,此时可以监听路由事件,常用的是$routeStartChange, $routeChangeSuccess。完整例子如下:
代码如下 | 复制代码 | ||
Home
About
在输入框中尝试输入:
姓名:
你输入的为: {{name}}
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 ='呵呵'; });
|
相关文章
- AngularJS表格添加序号的方法 05-18
- 利用angularjs1.4制作的简易滑动门效果 05-10
- AngularJS执行流程详解 04-14
- AngularJS 使用ng-repeat报错 [ngRepeat:dupes] 02-08
- AngularJS入门教程:Helloworld 12-26
- AngularJS如何通过ng-route实现基本路由功能的教程 12-14