加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angularjs – 提供给routeProvider的调试路由

发布时间:2020-12-17 08:06:08 所属栏目:安全 来源:网络整理
导读:我是AngularJS的新手,我试图调试一些路由,但是我不知道如何显示/查看传递给路由器的路由。 例如,如果我当前的路由设置如下; reportFormsApp.config(function ($routeProvider) { $routeProvider .when("/Reporting",{ templateUrl: "ReportForm/rfTemplat
我是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”评估。

您可以聆听 $route service发射的多个事件。这些事件是:

> $ routeChangeStart
> $ routeChangeSuccess
> $ routeChangeError
和$ routeUpdate

(我鼓励阅读链接提供的文档,了解每个文档的描述。)

此时,您可以在一个控制器或指令的$范围内监听这些事件中的一个或所有事件,或者通过将$ rootScope注入到您的angular.module()。run()函数或其他服务/工厂中。

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

reportFormsApp.config(function ($routeProvider) {
  $routeProvider
    .when("/Reporting",controller: "rfController" })
    .when("/Dashboard",controller: "dfController" })
    .when("/Analysis",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的注意事项:
使用$路由服务事件有一个对象异常,当有重定向时。在这种情况下,next.originalPath将是未定义的,因为您将具有的所有属性都是在else()中定义的redirectTo属性。您将永远不会看到用户尝试访问的路由。

所以,你可以听$location service's $ locationChangeStart或$ locationChangeSuccess事件:

reportFormsApp.run([
  '$rootScope',function($rootScope) {
    // see what's going on when the route tries to change
    $rootScope.$on('$locationChangeStart',newUrl,oldUrl) {
      // both newUrl and oldUrl are strings
      console.log('Starting to leave %s to go to %s',oldUrl,newUrl);
    });
  }
]);

如果您使用HTML5Mode,那么$ locationChange *事件将提供另外两个参数。那些是newState和oldState。

总而言之,在$ routeProvider中调用$ route *事件可能是您调试对象和定义的最佳选择。但是,如果您需要查看所有尝试的URL,那么$ locationChange *事件将需要被收听。

当前截至AngularJS 1.3.9

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读