AngularJs view takes too long to load more than 1300 items

Question

I developed a Node Express Angular (1.2) MariaDb web app.

In a html view I have to load more than 1300 items (it deals famous quotations of some authors) but the whole view is loaded after 6 / 7 sec .... there's too much. Here performace waterfall Here the service code:

 AllTesti = function() {
                return $http.get(__env.apiOptions.server +'rapi_testi/')
                .then(function(response) {
                    return response;
                });
            }  

Here the api:

getAllTesti:function(callback){ 
        return db.query("select * from all_testi_view",callback);
    }

I inserted a spinner but after about 2 sec it freezes until all data are loaded.

I test with PostMan Postman_result the Restful API invoked by controller to populate the view and the result is get in about 1 sec (I think a good time). The 1300 items are generated by the following "select * from all_testi_view" ....here the view source code :

create or replace
algorithm = UNDEFINED view `all_testi_view` as (
select
    `all_testi_with_sub_typ`.`TEXT_ID` as `TEXT_ID`,
    `all_testi_with_sub_typ`.`NOME_AUTORE` as `NOME_AUTORE`,
    `all_testi_with_sub_typ`.`TIPOLOGIA` as `TIPOLOGIA`,
    `all_testi_with_sub_typ`.`SUB_TIPOLOGIA` as `SUB_TIPOLOGIA`,
    `all_testi_with_sub_typ`.`TESTO` as `TESTO`,
    `all_testi_with_sub_typ`.`COMMENTO` as `COMMENTO`,
    `all_testi_with_sub_typ`.`DATA_EVENTO` as `DATA_EVENTO`,
    `all_testi_with_sub_typ`.`COUNTER` as `COUNTER`
from
    `all_testi_with_sub_typ`)
union (
select
`all_testi_without_sub_typ`.`TEXT_ID` as `TEXT_ID`,
`all_testi_without_sub_typ`.`NOME_AUTORE` as `NOME_AUTORE`,
`all_testi_without_sub_typ`.`TIPOLOGIA` as `TIPOLOGIA`,
`all_testi_without_sub_typ`.`SUB_TIPOLOGIA` as `SUB_TIPOLOGIA`,
`all_testi_without_sub_typ`.`TESTO` as `TESTO`,
`all_testi_without_sub_typ`.`COMMENTO` as `COMMENTO`,
`all_testi_without_sub_typ`.`DATA_EVENTO` as `DATA_EVENTO`,
`all_testi_without_sub_typ`.`COUNTER` as `COUNTER`
from
`all_testi_without_sub_typ`)

According to me there is something wrong in the angularjs process. Any suggestions to reduce loading time? thnks in advance

Answer 1

Ok guys Thanks to this thread I found a solution. I want to share with you my implementation

In ng-repeat I inserted "limitTo" filter:

<div ng-repeat="txt in filtered = (vm.datatxts.txts | limitTo:vm.totalDisplayed | filter: textFilter)">

So that, the number of items is limited to totalDisplayed value. In the controller I set:

vm.loading = true;
var tobeDisplayed = 50;
vm.totalDisplayed = tobeDisplayed;

At first page loading only 50 items are showed: the loading process is faster ...less than 2 sec !!

Moreover, I made two button loadMore (to load other 50 items) and loadRest (to load the rest of the list); so in the html view:

<a ng-click="vm.loadMore()" id="btnLoadMore" class="btn btn-default pull-center" style="margin:5px;">LoadMore</a>
<a ng-click=" vm.loadRest()" id="btnLoadRest" class="btn btn-default pull-center" style="margin:5px;">LoadRest</a>

vm.loadRest = function () {
            //alert("Il numero di messaggi è: " + vm.datatxts.txts.length)   
            vm.loading = true;
            $timeout(function() {
                var tobeDisplayed = vm.datatxts.txts.length - vm.totalDisplayed
                vm.totalDisplayed += tobeDisplayed;  
                vm.loading = false;
            }, 250);
            
        }; 
        vm.loadMore = function () {
            vm.loading = true;
            $timeout(function() {
                vm.totalDisplayed += tobeDisplayed;  
                vm.loading = false;
            }, 250);
        };

Of course vm.loading is used to show spinner during loading process ... Have a nice developing !