Question

我有一个非常简单的应用程序，它使用控制器内的$ http.get加载JSON数组。它将结果数据分配给范围，并通过结果重复显示HTML以显示列表。这是一个非常简单的angularjs例子。

function ViewListCtrl($scope, $http) {

$scope.shoppinglist = [];

$scope.loadList = function () {

    var httpRequest = $http({
        method: 'POST',
        url: 'viewList_service.asp',
        data: ''

    }).success(function (data, status) {
        $scope.shoppinglist = data;
    });

};

$scope.loadList();

}

在慢速服务器上进行测试时，我意识到在重复区域时有3秒的阻塞延迟。调试显示我的控制器在页面加载之前不会尝试获取数据。我的页面加载需要3秒钟。然后我必须等待另外3秒才能加载json数据。

我想尽快加载数据，以便在我的控制器就绪时准备就绪。简单地说，我想预先加载数据，以便与我的模块并行加载。

我已经搜遍了所有，我发现最接近的是“解决”，但我没有使用路线。这是一个非常简单的列表，没有路由或模板。

如何在页面开始渲染时立即加载JSON，以便在控制器准备好并且没有阻塞时准备就绪......然后将数据放入范围？

Answer 1

您可以使用module.run方法。在配置阶段完成后执行。要使用它，您需要创建一个服务工厂来执行实际查询并缓存结果

module("myapp",[]).factory('listService', function($q,$http) {
    var listData;
    var defer = $q.defer();
    return  {
       loadList: function() {
          if(listData) {
               defer.resolve(listData);
          }
          else {

              var httpRequest = $http({
                 method: 'POST',
                 url: 'viewList_service.asp',
                 data: ''
             })
             .success(function(data) { 
                 listData=data;
                 defer.resolve(listData);
             }
        }
        return defer.promise;
   }
}
});

在你的控制器中，你仍然使用工厂来获取带有promise的包装数据。

listService.loadList().then(function(data) {
   $scope.shoppinglist=data;

});

这样，即使在任何与控制器相关的代码执行之前，您也可以进行异步调用。

Answer 2

听起来你的延迟来自慢速网络+服务器，而不是大量数据。

因此，您可以在页面中呈现标记，以便将数据与页面HTML响应一起发送。缺点是您将数据硬编码到页面中。此标记基本上会为您的数据预先设置$ http缓存。

var listJson = {...json data here, rendered server-side...};

mod.run(function($cacheFactory) {
  var cache = $cacheFactory('yourListCacheId');
  cache.put('list-cache-id', listJson);
  // store "cache" somewhere you can retrieve it, such as a service or value.
});

然后使用$ http缓存属性，或者在检查缓存的自定义服务中包装$ http。

当然，问题的根源在于，当您通常希望至少在亚秒范围内时，您的服务器每个请求需要3秒。

Answer 3

您可以通过在单独的文件中编写代码（类似于Chandermani的listService）来加载数据，但不使用angular。您可以使用jquery ajax加载数据。

然后以角度编写服务以读取该数据并将其传递给您的控制器。

如何预加载JSON数据，以便在Angularjs模块准备就绪时可用

3 个答案: