angularjs - 提供给 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 上监听一个或所有这些事件。您的 Controller 或指令之一，或通过注入(inject) $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 有一个对象异常(exception)。事件，那就是有重定向的时候。在这种情况下， 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