AngularJs视图花费的时间太长，无法加载1300多个项目

Question

我开发了Node Express Angular（1.2）MariaDb Web应用程序。

在html视图中，我必须加载1300多个项目（它引用了一些作者的名言），但是整个视图在6/7秒后才加载....太多了。这里performace waterfall这里的服务代码：

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

这里是api：

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

我插入了微调器，但是大约2秒钟后，它冻结，直到加载所有数据。

我用PostMan Postman_result测试了由控制器调用的Restful API来填充视图，结果大约需要1秒钟（我认为是个好时机）。 1300个项目是由以下“从all_testi_view中选择*”生成的。...查看源代码：

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`)

据我说，angularjs程序出了点问题。有什么减少加载时间的建议吗？提前thnks

Answer 1

好家伙，感谢此thread我找到了解决方案。我想与您分享我的实现

在ng-repeat中，我插入了“ limitTo”过滤器：

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

因此，项目数限制为totalDisplayed值。在控制器中，我设置为：

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

在第一页加载时仅显示50个项目：加载过程更快...不到2秒!!

此外，我创建了两个按钮loadMore（用于加载其他50个项目）和loadRest（用于加载列表的其余部分）；因此在html视图中：

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

当然，vm.loading用于在加载过程中显示微调器...发展顺利！