极客教程如何检测AngularJS中的路由变化
在这篇文章中，我们将看到如何检测AngularJS中的路由变化。为了检测AngularJS中任何时刻的路由变化，这可以通过使用$on()方法来实现。on()方法是一个事件处理程序，该事件将处理routeChangeSuccess，当路由/视图改变时，会被触发。
语法:
$rootScope.$on('$routeChangeSuccess', function () {
Content...
});
方法：这里，每当有任何路由变化时，我们都会在控制台窗口显示 “路由改变”。在on()方法中，我们在控制台显示路由变更。因此，在这种方式下，每当路由变化发生时，它会触发由on()事件处理程序处理的$routeChangeSuccess，然后 “路由变化 “显示在控制台窗口。
例子：这个例子描述了在AngularJS中检测路由变化的过程。
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Route Change</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js">
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Detecting the route change in AngularJS </h3>
<div>
<p>
<a href="#viewLink1">Link 1</a>
</p>
<p>
<a href="#viewLink2">Link 2</a>
</p>
<div ng-app="mainApp" ng-controller="GFGController">
<div ng-view></div>
</div>
</div>
<script>
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['routeProvider', function(routeProvider) {
routeProvider.when('/viewLink1', {
template: "<p> This is Link 1 </p>"
}).when('/viewLink2', {
template: "<p> This is Link 2 </p>"
}).otherwise({
redirectTo: '/viewLink1'
});
}]);
mainApp.controller('GFGController',
function(scope, location,rootScope) {
rootScope.on('$routeChangeSuccess', function() {
console.log("route changed");
});
});
</script>
</body>
</html>
输出：当我们改变链接时，$routeChangeSuccess事件被触发，从而在控制台窗口中显示路线变化。
