¿Cómo detectar un cambio de ruta en AngularJS?

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *