Question

这个问题已被提出，但我无法弄清楚在我的情况下该做什么。

使用 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;
      }
    });
  };
 }
]);

Answer 1

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

您的视图应该使用ng-hide，ng-show来检查控制器的范围，以便在更新范围中的数据时，将显示视图。您还可以显示微调器，以便用户不会觉得网站已崩溃。

Answer 2

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

请参阅John Pappa's blog中的示例，在使用angular的默认路由器解析路由之前加载一些数据：

<div class="boxes-parent">
    <div class="left-box">
        <div class="blue-boxes">
            <h1 class="blue-box-header-text">About</h1>
            <p class="blue-box-text">I used to be better at CSS and HTML. Sorry!</p>
        </div>
    </div>
    <div class="center-box">
        <div class="blue-boxes">
            <h1 class="blue-box-header-text">Info</h1>
            <p class="blue-box-text">Info info info.</p>
        </div>
    </div>
    <div class="right-box">
        <div class="blue-boxes">
            <h1 class="blue-box-header-text">Contact</h1>
            <p class="blue-box-text">Phone: (888) 888-8888</p>
        </div>
    </div>
</div>

您基本上使用路由上的// 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; }参数，以便routeProvider在实例化控制器之前等待解析所有promise。有关其他信息，请参阅docs。

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

2 个答案: