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

18

Я новичок в 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».

    
задан Ray Brack 18.01.2015 в 22:31
источник

1 ответ

16

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

  • $routeChangeStart
  • $routeChangeSuccess
  • $routeChangeError
  • и, $routeUpdate

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

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

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

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

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

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

Итак, вы можете прослушать $location service's $locationChangeStart или $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);
    });
  }
]);

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

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

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

    
ответ дан Stephen J Barker 19.01.2015 в 03:06
  • Спасибо Стивену - это позволило мне решить мою проблему. –  Ray Brack 19.01.2015 в 05:42
  • Нет проблем, @RayBrack. Рад помочь. –  Stephen J Barker 19.01.2015 в 05:42