Enfoque: Para detectar cambios de ruta en cualquier momento en AngularJS, esto se puede lograr usando el método $on(). El método $on() es un controlador de eventos, el evento que manejará $routeChangeSuccess que se activa cuando se realiza el cambio de ruta/vista.
Sintaxis:
$rootScope.$on('$routeChangeSuccess', function () {
Content...
});
Ejemplo: aquí, estamos mostrando «ruta cambiada» en la ventana de la consola cada vez que hay un cambio de ruta. Dentro del método $on(), cambiamos la ruta de la consola. Por lo tanto, de esta manera, cada vez que se produce un cambio de ruta, se activa $routeChangeSuccess manejado por el controlador de eventos $on() y luego se muestra «ruta cambiada» en la ventana de la consola.
A continuación se muestra la implementación del enfoque anterior:
<!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>
<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>
<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>
Salida:
a medida que cambiamos el enlace, el evento $routeChangeSuccess se activa y, por lo tanto, muestra la ruta modificada en la ventana de la consola.
Publicación traducida automáticamente
Artículo escrito por pratyushranjan14 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA