json - 如何预加载 JSON 数据以便在 Angularjs 模块准备好时可用

Question

我有一个非常简单的应用程序，它使用 Controller 内部的 $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 秒的阻塞延迟。调试告诉我，我的 Controller 在页面加载之前不会尝试获取数据。我的页面需要 3 秒才能加载。然后我必须再等待 3 秒才能加载 json 数据。

我想尽快加载数据，以便在我的 Controller 准备好时准备好。简单地说，我想预加载数据，以便它与我的模块并行加载。

我到处搜索，发现最接近的是“解决”，但我没有使用路线。这是一个非常简单的列表，没有路线或模板。

如何在页面开始呈现后立即加载 JSON，以便在 Controller 准备好并且没有阻塞时准备好......然后将该数据放入范围？

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;
   }
}
});

在您的 Controller 中，您仍然使用工厂通过 promise 然后包装来获取数据。

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

});

这样，您甚至可以在任何与 Controller 相关的代码执行之前进行异步调用。