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

Question

我读过几篇关于$routeprovider解决功能的文章。主要想法来自我最喜欢的AngularJS开发者托德座右铭创建的回购。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);

我非常喜欢路由在加载控制器之前首先解决所有控制器依赖关系的方式。它保持代码非常干净。但是，如果解决过程花费了大量时间，那么页面将停留在没有视觉反馈的中，直到所有加载完成为止。

在切换到使用$routeprovider解析之前，我习惯于将所有内容放在控制器中，然后创建一个异步加载视图指令。当所有$http请求都在下载数据时，指令将显示一个加载进度条。我想知道是否有一种方法来保持视觉反馈，并把所有的解决步骤，在路由提供者。

谢谢!

Answer 1

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

再来点！