提供给 routeProvider 的调试路由 [英] Debug route provided to routeProvider

问题描述

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

I am new to AngularJS and am attempting to debug some of my routes but I don't know how to display/view the route passed to the routeprovider.

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

For example if my current routing is set up as follows;

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

调试时我想破坏代码并在控制台日志中输入类似的内容；

When debugging I want to break the code and in the console log enter something like;

$routeProvider.path

以.when"评估的方式显示路线.

to display the route as it would be evaluated by the ".when".

推荐答案

您可以收听由 $route 服务.这些事件是:

You can listen to multiple events emitted by the $route service. These events are:

• $routeChangeStart
• $routeChangeSuccess
• $routeChangeError
• 和，$routeUpdate

(我鼓励阅读链接提供的文档以获取每个文档的描述.)

(I would encourage reading the docs provided by the link for descriptions of each.)

此时，您可以在您的控制器或指令之一的 $scope 上监听一个或所有这些事件，或者通过将 $rootScope 注入您的 $rootScopecode>angular.module().run() 函数或其他服务/工厂.

At this point you can listen for one or all of these events on the $scope of one of your controllers or directives, or by injecting $rootScope into your angular.module().run() function or another service/factory.

例如，作为您提供的代码的附录:

For example, as an addendum to your provided code:

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.

You can also access the rest of your $routeProvider objects as well such as current.templateUrl or next.controller.

关于redirectTo的注意事项:使用 $route service 事件有一个对象例外，那就是重定向.在这种情况下，next.originalPath 将是未定义的，因为您将拥有的只是您在 otherwise() 中定义的 redirectTo 属性.您永远不会看到用户尝试访问的路线.

Note concerning redirectTo: There is one object exception to using the $route service events and that is when there is a redirect. In this case, next.originalPath will be undefined because all you will have is the redirectTo property you defined in otherwise(). You will never see the route that the user tried to access.

因此，您可以收听 $location 服务的 $locationChangeStart 或 $locationChangeSuccess 事件:

So, you can listen to the $location service's $locationChangeStart or $locationChangeSuccess events:

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.

If you use HTML5Mode then there will be two other arguments provided by the $locationChange* events. Those are newState and oldState.

总而言之，侦听 $route* 事件可能是调试您在 $routeProvider 中提供的对象和定义的最佳选择.但是，如果您需要查看正在尝试的所有 url，则需要监听 $locationChange* 事件.

In conclusion, listening to the $route* events will likely be your best bet for debugging objects and definitions you provide in your $routeProvider. However, if you need to see all url's being attempted, the $locationChange* events will need to be listened to.

当前为 AngularJS 1.3.9

这篇关于提供给 routeProvider 的调试路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！