Отладочный маршрут, предоставленный routeProvider

Я новичок в AngularJS и пытаюсь отлаживать некоторые из моих маршрутов, но я не знаю, как отображать/просматривать маршрут, переданный маршрутизатору.

Например, если моя текущая маршрутизация настроена следующим образом:

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" })
});

При отладке я хочу разбить код и в журнале консоли введите что-то вроде:

$routeProvider.path

чтобы отобразить маршрут, поскольку он будет оцениваться с помощью ".when".

Ответ 1

Вы можете прослушивать несколько событий, испущенных $route service. Эти события:

$routeChangeStart
$routeChangeSuccess
$routeChangeError
и $routeUpdate

(Я бы рекомендовал прочитать документы, предоставленные ссылкой, для описания каждого из них.)

В этот момент вы можете прослушивать одно или все из этих событий на $scope одного из ваших контроллеров или директив или путем ввода $rootScope в вашу функцию angular.module().run() или другую службу /factory.

Например, в качестве дополнения к предоставленному вами коду:

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 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);
    });
  }
]);

Вы также можете получить доступ к остальным вашим объектам $routeProvider, таким как current.templateUrl или next.controller.

Примечание относительно redirectTo: Существует одно исключение объекта для использования событий $route service, а именно при переадресации. В этом случае next.originalPath будет undefined, потому что все, что у вас есть, это свойство redirectTo, которое вы определили в otherwise(). Вы никогда не увидите маршрут, к которому пользователь пытался получить доступ.

Итак, вы можете прослушивать события $location service's $locationChangeStart или $locationChangeSuccess:

reportFormsApp.run([
  '$rootScope',
  function($rootScope) {
    // see what 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);
    });
  }
]);

Если вы используете HTML5Mode, тогда будут два других аргумента, предоставленных событиями $locationChange*. Это newState и oldState.

В заключение, прослушивание событий $route*, вероятно, будет лучшим выбором для отладки объектов и определений, которые вы предоставляете в своем $routeProvider. Однако, если вам нужно увидеть все попытки URL-адреса, необходимо прослушать события $locationChange*.

Текущее значение AngularJS 1.3.9