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

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

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

因此，您可以将标签呈现到页面中，以便数据将与页面 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 秒，而您通常希望至少在亚秒范围内。