AngularJS - Improving service call and data binding performance

Question

I have an Angular service that goes away to retrieve a pretty big JSON file (nearly 10,000 lines).

The problem i am facing, is that it is taking some time to bind the data to the front-end (as expected).

Sample controller:

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

Service:

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

I have ng-cloak on my HTML element, when dataLoaded = true, this is removed as it indicates the data is available to be displayed.

How can i improve the service call/data bind? Would splitting the call help?

@ExpertSystem - i currently am showing a loader.. I guess what i am asking is, can i display data1,2,3,4 ASAP as they are at the top of the page and then load the rest? — Oam Psy
– Oam Psy, Commented Sep 9, 2014 at 14:04
You can, but the delay is probably due to fetching the data, so other than splitting up the request, there doesn't seem to be much more you can do. — gkalpak
– gkalpak, Commented Sep 9, 2014 at 14:06
I am thinking of a server-side fix, and a client-side fix, you are trying to fix this entirely on browser-side?, or a solution involving the server is acceptable too ? — dseminara
– dseminara, Commented Sep 9, 2014 at 15:51

Jure Vizjak · Accepted Answer · 2014-10-13 14:59:12Z

1

Server-side solution would be to reduce the size of the response and make more requests with smaller responses. Do you actually need the whole response at start? You have to be aware that binding the whole response will generate many watchers, which will slow down all subsequent digests.

Client-side solution would be to bind the response part by part in a loop as a callback parameter for $scope.$apply() or even $timeout().

answered Oct 13, 2014 at 14:59

Jure Vizjak

6,7482 gold badges19 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS - Improving service call and data binding performance

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related