调试路由提供给routeProvider

Question

我是AngularJS的新手,我正在尝试调试我的一些路线,但我不知道如何显示/查看传递给routeprovider的路线.

例如,如果我当前的路由设置如下;

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"评估的路线.

Answer 1

您可以收听由此发出的多个事件$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的当前版本