AngularJS - 改善服务调用和数据绑定性能

时间:2014-09-09 13:34:02

标签: javascript angularjs angularjs-scope angular-services angular-http

我有一个Angular服务,可以检索一个非常大的JSON文件(近10,000行)。

我面临的问题是,需要一些时间将数据绑定到前端(如预期的那样)。

样本控制器:

$scope.dataLoaded = false;

serviceReport.getData( function (data) {
    $scope.data1 = data.data1;
    $scope.data2 = data.data2;
    $scope.data3 = data.data3;
    $scope.data4 = data.data4;
    $scope.data5 = data.data5;
    $scope.data6 = data.data6;
    $scope.data7 = data.data7;
    $scope.data8 = data.data8;
    $scope.data9 = data.data9;
    $scope.data10 = data.data10;
    $scope.data11 = data.data11;
    $scope.data12 = data.data12;
    $scope.data13 = data.data13;
    $scope.data14 = data.data14;
    $scope.data15 = data.data15;
    $scope.data16 = data.data16;
    $scope.data17 = data.data17;

    $scope.dataLoaded = true;
});

服务:

app.factory('serviceReport', function($http) {
    return {
        getData: function(value,done) {
            $http.get('data.json', {
                })
            .success(function(data) { 
                done(data);
            })
            .error(function(error) {
                alert('An error occured');
            });
        }
    }
});

我的HTML元素上有ng-cloak,当dataLoaded = true时,会删除它,因为它表示数据可以显示。

如何改善服务调用/数据绑定?拆分电话有帮助吗?

1 个答案:

答案 0 :(得分:1)

服务器端解决方案是减少响应的大小,并使用较小的响应发出更多请求。你真的需要一开始的整个回应吗?您必须意识到绑定整个响应将产生许多观察者,这将减慢所有后续摘要。

客户端解决方案是将响应部分按循环中的一部分绑定为$ scope。$ apply()或甚至$ timeout()的回调参数。