如何利用 AngularJS 的 $routeprovider 解析功能并保持良好的加载用户体验答案

【问题标题】：How to take advantage of AngularJS $routeprovider resolve feature and keeps a good loading user experience如何利用 AngularJS 的 $routeprovider 解析功能并保持良好的加载用户体验
【发布时间】：2014-09-15 20:36:50
【问题描述】：

我已经阅读了几篇关于 $routeprovider 解析功能的文章。主要思想来自我最喜欢的 AngularJS 开发人员 Todd Motto 创建的这个 repo。 https://github.com/toddmotto/angularjs-styleguide#controllers

// avoid
function MainCtrl (SomeService) {
  var _this = this;
  // unresolved
  _this.something;
  // resolved asynchronously
  SomeService.doSomething().then(function (response) {
    _this.something = response;
  });
}
angular
  .module('app')
  .controller('MainCtrl', MainCtrl);

// recommended
function config ($routeProvider) {
  $routeProvider
  .when('/', {
    templateUrl: 'views/main.html',
    resolve: {
      // resolve here
    }
  });
}
angular
  .module('app')
  .config(config);

我真的很喜欢 route 在加载控制器之前首先解决所有控制器依赖项的方式。它使代码非常干净。但是，如果解析过程需要大量时间，则页面将卡在此处，没有视觉反馈，直到所有内容加载完毕。

在我切换到使用 $routeprovider 解析之前，我曾经将所有内容都放在控制器中，然后创建一个异步加载视图指令。该指令将在所有 $http 请求正在下载数据时显示加载进度条。我想知道是否有办法保留视觉反馈并将所有解决步骤放在路由提供程序中。

谢谢！

【问题讨论】：

请注意，它与静态网站没有什么不同，在从服务器返回响应之前什么都不会发生。唯一的区别是本机浏览器微调器反馈。如果 AJAX 请求超过 500 毫秒，我使用 HTTP 拦截器使微调器图标可见。 code.angularjs.org/1.2.20/docs/api/ng/service/…
你也可以使用路由器事件来做同样的事情。
嗨，JB Nizet，虽然使用 HTTP 拦截器可以解决问题，但我可能不想跟踪所有的 http 请求。 Todd 的回答更直接，因为它直接攻击路由更改。真的谢谢！

标签： angularjs route-provider

【解决方案1】：

当解析开始时，您可以连接到 $routeChangeStart 和 $routeChangeSuccess 事件。您侦听的这些事件可以根据事件类型显示或隐藏 ajax 微调器/加载消息。

More here!

【讨论】：

@zeroliu :P heyyyyyyyyyy！希望这对您有所帮助，祝您编码愉快。