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

这个问题已经被问过了，但我不知道该怎么办

使用AngularJS 1.0.5

在显示视图“login”之前，我想获取一些数据，并在数据不是从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;
      }
    });
  };
 }
]);

---

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

---

视图应使用ng hide、ng show检查控制器的作用域，以便在更新作用域中的数据时显示视图。您还可以显示微调器，这样用户就不会觉得网站崩溃了。

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

请参见中的示例，以便在使用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在实例化控制器之前等待所有承诺被解析。有关更多信息，请参阅。

AngularJS创建者的回答可能会对您有所帮助：您还可以将AJAX请求的结果分配给$scope中的某个内容，只需在HTML中使用ng show即可。这是一种非常可靠的方法。这比使用ng show或ng hide要好得多，因为在控制器中，您已经有了数据，并且可以编写更多的同步代码。也就是说，这更适合代码审阅站点，因为您没有问题，但希望代码有所改进。@L42y很有趣，Misko也提出了这个问题。当您加载数据以显示在视图上时，我明白您的观点可能重复，但在使用UI Router时，您可能需要取消基于异步加载的路由，声明状态时，请查看文档的

resolve

属性：