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

在调试我想打破code和在控制台日志中输入类似;

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

$routeProvider.path

显示，因为它会被。当进行评估的路线。

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

推荐答案

您可以收听由 $航线的 。这些事件是：

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

• $ routeChangeStart


• $ routeChangeSuccess


• $ routeChangeError


• 和 $ routeUpdate

• $routeChangeStart
• $routeChangeSuccess
• $routeChangeError
• and, $routeUpdate

（我会鼓励阅读的链接，每一个描述所提供的文档。）

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

在这一点上，你可以听一个或所有你的控制器或指令之一的 $范围这些事件，或通过注入 $ rootScope 到 angular.module（）。运行（）函数或其他服务/工厂。

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.

例如，作为附录您提供的code：

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 或<$其余C $ C> next.controller 。

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

有关注意redirectTo：
有一个例外对象使用 $航线的事件，那就是当有一个重定向。在这种情况下， next.originalPath 将是不确定的，因为所有你必须​​是你<$定义的 redirectTo 属性C $ C>否则（）。你永远不会看到的路线，用户尝试访问。

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.

所以，你可以听 $位置服务的 $ 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.

总之，听着 $路线* 事件很可能是用于调试的对象和你在你的 $ routeProvider <提供定义你最好的选择/ code>。但是，如果你需要看到所有的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屋！