前幾天，項目在做一個功能時需要在頁面切換之前關(guān)閉正在執(zhí)行的函數(shù)。嘗試了幾種方式都不行，最后想到既然angularjs是通過理由切換頁面，那就在路由上面做文章吧。AngularJS在路由發(fā)生改變時，可以通過路由事件來監(jiān)聽路由是否發(fā)生了改變。常用的是狀態(tài)包括?$stateChangeStart，$stateChangeSuccess，$stateChangeError，測試代碼以及注釋如下：

var app = angular.module("app", []); //定義app app.run(['$rootScope', '$location', function ($rootScope, $location) { //需要注入服務(wù)$rootScope；$location在這可要可不要，這里用來查看獲取新的路由鏈接//路由監(jiān)聽事件$rootScope.$on('$stateChangeStart',function (event, toState, toParams, fromState, fromParams) {alert("路由的狀態(tài)變化開始!");console.log('route begin change');});// stateChangeSuccess 當(dāng)模板解析完成后觸發(fā)$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {alert("路由的狀態(tài)變化成功!");console.log('route have already changed ：' + $location.path());});// $stateChangeError 當(dāng)模板解析過程中發(fā)生錯誤時觸發(fā)$rootScope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams, error) {alert("路由的狀態(tài)變化失敗!");console.log('route changed failed：');}) }]);

　　在測試時順手截了幾張圖，直觀判斷：

　　　　從China路由切換到Today：點擊Today -> 路由的狀態(tài)變化開始 -> 路由的狀態(tài)變化成功 -> 新頁面Today渲染；而且可以看到新獲取到的路由新鏈接

　　　　

　　　　

　　　　

　　　　

　　　　Today路由切換到China路由，方式和步驟相同。

　　　　

　　　　

　　　　

?

?　　注意：在測試的過程中，我先用的狀態(tài)字段是$routeStartChange和$routeChangeSuccess，但是代碼沒有執(zhí)行，度娘了下才發(fā)現(xiàn)，這兩個關(guān)鍵字是ng1在1.5版本之前的，測試時用的1.5以后的版本，所以代碼不執(zhí)行。

　　　　如果有用到1.5之前版本的，可以試試下面代碼：

var app = angular.module("app", []); //定義app app.run(['$rootScope', '$location', function($rootScope, $location) { //需要注入服務(wù)$rootScope；$location在這可要可不要，這里用來查看獲取新的路由鏈接/* 監(jiān)聽路由的狀態(tài)變化 */$rootScope.$on('$routeChangeStart', function(evt, next, current){alert("路由的狀態(tài)變化開始!");console.log('route begin change');});/* 路由的狀態(tài)變化成功 */$rootScope.$on('$routeChangeSuccess', function(evt, current, previous) {alert("路由的狀態(tài)變化成功!");console.log('route have already changed ：'+$location.path());}); }]);

?

　　頁面的加載渲染監(jiān)聽：路由的切換可以監(jiān)聽了，那么順便記一下頁面的加載渲染監(jiān)聽：

　　// 在頁面渲染中可通過$viewContentLoading和$viewContentLoaded監(jiān)聽頁面渲染狀態(tài)：$viewContentLoading(渲染開始)和$viewContentLoaded(渲染結(jié)束)。（在控制器中添加以下代碼實現(xiàn)監(jiān)聽）

　　// $viewContentLoading：當(dāng)頁面視圖開始加載時，DOM渲染完成之前觸發(fā)，該事件將在$scope鏈上廣播此事件。$scope.$watch('$viewContentLoading', function (event, viewConfig) {alert('模板加載完成之前!');});//$viewContentLoaded：當(dāng)頁面視圖加載完成，DOM渲染完成之后觸發(fā)，視圖所在的$scope發(fā)出該事件。$scope.$watch('$viewContentLoaded', function (event) {alert('模板已經(jīng)加載完成!');});

轉(zhuǎn)載于:https://www.cnblogs.com/donghuang/p/8378666.html

總結(jié)

以上是生活随笔為你收集整理的angularjs -- 路由监听的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。