angularjs - Ruta de depuración proporcionada a routeProvider

ngroute angular 1

Question

Soy nuevo en AngularJS y estoy intentando depurar algunas de mis rutas pero no sé cómo mostrar / ver la ruta que se pasa al proveedor de rutas.

Por ejemplo, si mi enrutamiento actual está configurado de la siguiente manera;

reportFormsApp.config(function ($routeProvider) {
    $routeProvider
        .when("/Reporting", { templateUrl: "ReportForm/rfTemplate.html", controller: "rfController" })
        .when("/Dashboard", { templateUrl: "DashboardForm/dfTemplate.html", controller: "dfController" })
        .when("/Analysis",  { templateUrl: "AnalysisForm/afTemplate.html", controller: "afController" })
        .otherwise({ redirectTo: "/Reporting" })
});

Al depurar quiero romper el código y, en el registro de la consola, ingrese algo como;

$routeProvider.path

para visualizar la ruta como sería evaluada por el ".when".

Answer 1

Puede escuchar múltiples eventos emitidos por el $route service . Estos eventos son:

• $routeChangeStart
• $routeChangeSuccess
• $routeChangeError
• y, $routeUpdate

(Recomendaría leer los documentos proporcionados por el enlace para las descripciones de cada uno).

En este punto, puede escuchar uno o todos estos eventos en el $scope de uno de sus controladores o directivas, o inyectando $rootScope en su función angular.module().run() u otro servicio / fábrica.

Por ejemplo, como un anexo a su código provisto:

reportFormsApp.config(function ($routeProvider) {
  $routeProvider
    .when("/Reporting", { templateUrl: "ReportForm/rfTemplate.html", controller: "rfController" })
    .when("/Dashboard", { templateUrl: "DashboardForm/dfTemplate.html", controller: "dfController" })
    .when("/Analysis",  { templateUrl: "AnalysisForm/afTemplate.html", controller: "afController" })
    .otherwise({ redirectTo: "/Reporting" })
});

reportFormsApp.run([
  ''$rootScope'',
  function($rootScope) {
    // see what''s going on when the route tries to change
    $rootScope.$on(''$routeChangeStart'', function(event, next, current) {
      // next is an object that is the route that we are starting to go to
      // current is an object that is the route where we are currently
      var currentPath = current.originalPath;
      var nextPath = next.originalPath;

      console.log(''Starting to leave %s to go to %s'', currentPath, nextPath);
    });
  }
]);

También puede acceder al resto de sus objetos $routeProvider , como next.controller o next.controller .

Nota sobre redirectTo: hay una excepción de objeto para usar los eventos del $route service y es cuando hay una redirección. En este caso, next.originalPath no estará definido porque todo lo que tendrá será la propiedad redirectTo que definió de otherwise() . Nunca verás la ruta a la que el usuario intentó acceder.

Por lo tanto, puede escuchar los eventos $locationChangeStart o $locationChangeSuccess $location service''s $locationChangeSuccess :

reportFormsApp.run([
  ''$rootScope'',
  function($rootScope) {
    // see what''s going on when the route tries to change
    $rootScope.$on(''$locationChangeStart'', function(event, newUrl, oldUrl) {
      // both newUrl and oldUrl are strings
      console.log(''Starting to leave %s to go to %s'', oldUrl, newUrl);
    });
  }
]);

Si usa HTML5Mode, habrá otros dos argumentos proporcionados por los eventos $locationChange* . Esos son newState y oldState .

En conclusión, escuchar los eventos $route* probablemente sea su mejor apuesta para depurar los objetos y definiciones que proporcione en su $routeProvider . Sin embargo, si necesita ver todos los intentos de url, los eventos $locationChange* deberán ser escuchados.

Corriente a partir de AngularJS 1.3.9