Eu precisava carregar um grande conjunto de dados sem usar o clássico ajax-loader.gif com angularjs.
O problema é que o angularjs tem desempenho limitado quando se trata de renderizar a visualização usando $ rootScope. $ Digest ().
Portanto, quando você tenta renderizar um grande conjunto de dados, a visualização pode travar durante a renderização.
Acabei cortando o conjunto de dados com registros suficientes para preencher a parte visível na visualização e depois carregar tudo usando um tempo limite. Este tipo de simula o carregamento instantâneo.
Os dados podiam ser ordenados na visualização, então eu precisava carregar o máximo possível de uma vez, caso contrário, o usuário poderia ver a reordenação ao vivo do conjunto de dados.
//Variable to hold the deferred function
var loadAll;
$scope.loadAllData = function() {
//Give a max of 40 rows to the view
if ( $scope.bigdata.length > 40 ) {
$scope.dataView = $scope.bigdata.slice(0,39);
} else {
$scope.dataView = $scope.bigdata;
}
//Cancel previous deferred function
if(loadAll !== undefined) {
$timeout.cancel(loadAll);
}
//Will load all the rest of data after 1.5s
loadAll = $timeout(function() {
$scope.dataView = $scope.bigdata;
}, 1500);
};Se o seu conjunto de dados não precisa de pedido ou se você não se importa, prefira a solução com uma chamada recursiva:
//Variable to hold the deferred function
var start,end = 0;
var ls = 40; //Length of subset
$scope.loadAllData = function() {
end+= ls;
if ( end < $scope.bigdata.length ) {
$scope.dataView = $scope.bigdata.slice(start,end);
start+= ls;
$timeout(function() {
$scope.loadAllData();
}, 100);
} else if (end > $scope.bigdata.length
&& start < $scope.bigdata.length) { //last load
$scope.dataView = $scope.bigdata.slice(
start, $scope.bigdata.length - 1
);
}
};