ngRoute路由改變監聽事件(1)+ui.router狀態路由
阿新 • • 發佈:2019-01-10
angular.module('myApp',['ngRoute'])
.config(['$routeProvider',function ($routeProvider) {
$routeProvider
.when('/home',{
templateUrl: 'home.html',
controller: 'HomeController',
/**
* 該屬性的特點:列表(物件中的key值)可以注入到控制器中使用,
* 如果key值為字串,那麼服務名必須是字串,
* 如果是函式,那麼服務名必須是函式引數
*/
// resolve: {
// //這裡的b值必須是服務的名字
// a: 'b'
// }
})
.when('/other',{
templateUrl: 'other.html',
controller: 'OtherController'
})
.otherwise ('/home');
}])
.run(['$rootScope',function ($rootScope) {
//路由開始切換
/**
* args[0]: 事件
* args[1]: 要切換的路由
* args[2]: 第一次進入該方法,沒有當前路由,為undefined
*/
$rootScope.$on('$routeChangeStart',function (event,next,current) {
console.log([event,next,current ]);
});
//路由切換成功
/**
* args[0]: 事件
* args[1]: 當前的路由
* args[2]: 上一個路由,第一次進入該方法,沒有上一個路由,為undefined
*/
$rootScope.$on('$routeChangeSuccess',function (event,current,previous) {
console.log([event,current,previous]);
});
//路由切換失敗(比如resolve中有錯誤等待),都會導致路由切換失敗
$rootScope.$on('$routeChangeError',function (event,msg) {
console.log([event,msg]);
});
//當$location.path發生變化或者$location.url發生變化時觸發
$rootScope.$on('$locationChangeStart',function (event,msg) {
console.log([event,msg]);
});
//當且僅當path或url變化成功後觸發
$rootScope.$on('$locationChangeSuccess',function (event,msg) {
console.log([event,msg]);
});
}])
.controller('HomeController',['$scope','$location',function ($scope,$location) {
$scope.toOtherView = function () {
$location.path('/other');
}
}])
.controller('OtherController',['$scope','$location',function ($scope,$location) {
$scope.toHomeView = function () {
$location.path('/home');
}
}]);
.config(['$routeProvider',function ($routeProvider) {
$routeProvider
.when('/home',{
templateUrl: 'home.html',
controller: 'HomeController',
/**
* 該屬性的特點:列表(物件中的key值)可以注入到控制器中使用,
* 如果key值為字串,那麼服務名必須是字串,
*/
// resolve: {
// //這裡的b值必須是服務的名字
// a: 'b'
// }
})
.when('/other',{
templateUrl: 'other.html',
controller: 'OtherController'
})
.otherwise
}])
.run(['$rootScope',function ($rootScope) {
//路由開始切換
/**
* args[0]: 事件
* args[1]: 要切換的路由
* args[2]: 第一次進入該方法,沒有當前路由,為undefined
*/
$rootScope.$on('$routeChangeStart',function (event,next,current) {
console.log([event,next,current
});
//路由切換成功
/**
* args[0]: 事件
* args[1]: 當前的路由
* args[2]: 上一個路由,第一次進入該方法,沒有上一個路由,為undefined
*/
$rootScope.$on('$routeChangeSuccess',function (event,current,previous) {
console.log([event,current,previous]);
});
//路由切換失敗(比如resolve中有錯誤等待),都會導致路由切換失敗
$rootScope.$on('$routeChangeError',function (event,msg) {
console.log([event,msg]);
});
//當$location.path發生變化或者$location.url發生變化時觸發
$rootScope.$on('$locationChangeStart',function (event,msg) {
console.log([event,msg]);
});
//當且僅當path或url變化成功後觸發
$rootScope.$on('$locationChangeSuccess',function (event,msg) {
console.log([event,msg]);
});
}])
.controller('HomeController',['$scope','$location',function ($scope,$location) {
$scope.toOtherView = function () {
$location.path('/other');
}
}])
.controller('OtherController',['$scope','$location',function ($scope,$location) {
$scope.toHomeView = function () {
$location.path('/home');
}
}]);