AngularJS，在显示视图之前解析数据

Question

这个主题已经被问过了，但我不知道在我的情况下该怎么做。

使用 AngularJS 1.0.5：

在显示“登录”视图之前，我想在未从 AJAX 请求加载数据时获取一些数据并延迟视图呈现。

这里是主要代码。这是好方法吗？

angular.module('tfc', ['tfc.config', 'tfc.services', 'tfc.controllers']).config([
 '$routeProvider', '$locationProvider', '$httpProvider',
 function($routeProvider, $locationProvider, $httpProvider) {
  $routeProvider.when('/login', {
    templateUrl: 'views/login.html',
    controller: "RouteController",
    resolve: {
      data: function(DataResolver) {
        return DataResolver();
      }
    }
  });
}
]);

module_services = angular.module("tfc.services", []);

module_services.factory("DataResolver", [
 "$route", function($route) {
  console.log("init");
  return function() {
    // Tabletop is a lib to get data from google spreadsheets
    // basically this is an ajax request
    return Tabletop.init({
      key: "xxxxx",
      callback: function(data, tabletop) {
        console.log("[Debug][DataResolver] Data received!");
        return data;
      }
    });
  };
 }
]);

Answer 1

AngularJS 的重点是您可以加载模板和所有内容，然后等待数据加载，这意味着是异步的。

你的视图应该使用 ng-hide, ng-show 来检查控制器的范围，这样当范围内的数据更新时，视图就会显示出来。您还可以显示一个微调器，这样用户就不会觉得网站崩溃了。

Answer 2

回答这个问题，在呈现视图之前显式加载数据的方式似乎是正确的。请记住，它可能不会提供最佳体验，因为需要一些时间来解决这个问题，可能会给人一种您的应用停止了一段时间的印象。

查看John Pappa's blog 的示例，在使用 Angular 的默认路由器解析路由之前加载一些数据：

// route-config.js
angular
    .module('app')
    .config(config);

function config($routeProvider) {
    $routeProvider
        .when('/avengers', {
            templateUrl: 'avengers.html',
            controller: 'Avengers',
            controllerAs: 'vm',
            resolve: {
                moviesPrepService: function(movieService) {
                    return movieService.getMovies();
                }
            }
        });
}

// avengers.js
angular
    .module('app')
    .controller('Avengers', Avengers);

Avengers.$inject = ['moviesPrepService'];
function Avengers(moviesPrepService) {
    var vm = this;
    vm.movies = moviesPrepService.movies;
}

您基本上在路由上使用resolve 参数，以便 routeProvider 在实例化控制器之前等待所有承诺得到解决。请参阅docs 了解更多信息。