AngularJS 分页

Question

我用 spring mvc 进行了 AngularJS 分页，效果很好，但是应用程序从数据库中获取了大量数据，所以当我获取第一页时应用程序非常慢，因为它获取了所有内容记录，谁能帮我解决这个问题？我想根据 angularJS 分页

从数据库中获取数据子集

Spring mvc 控制器

@RequestMapping(value = "/rest/contacts",
        method = RequestMethod.GET,
        produces = MediaType.APPLICATION_JSON_VALUE)
@Timed
public List<Contact> getAll() {
    return contactRepository.findAll();
}

AngularJS 服务

pagingpocApp.factory('Contact', function ($resource) {
    return $resource('app/rest/contacts/:id', {}, {
        'query': { method: 'GET', isArray: true},
        'get': { method: 'GET'}
    });


});

AngularJS 控制器

  pagingpocApp.controller('ContactController', function ($scope,  $filter,resolvedContact, Contact, resolvedRole) {

    $scope.contacts = resolvedContact;

        var sortingOrder = 'firstName';
        $scope.sortingOrder = sortingOrder;
        $scope.reverse = false;
        $scope.filteredItems = [];
        $scope.groupedItems = [];
        $scope.itemsPerPage = 10;
        $scope.pagedItems = [];
        $scope.currentPage = 0;

        var searchMatch = function (haystack, needle) {
            if (!needle) {
                return true;
            }
            return haystack.toLowerCase().indexOf(needle.toLowerCase()) !== -1;
        };

        // init the filtered items
        $scope.search = function () {
            $scope.filteredItems = $filter('filter')($scope.contacts, function (item) {
                for(var attr in item) {
                    if (searchMatch(item[attr], $scope.query))
                        return true;
                }
                return false;
            });
            // take care of the sorting order
            if ($scope.sortingOrder !== '') {
                $scope.filteredItems = $filter('orderBy')($scope.filteredItems, $scope.sortingOrder, $scope.reverse);
            }
            $scope.currentPage = 0;
            // now group by pages
            $scope.groupToPages();
        };

        // calculate page in place
        $scope.groupToPages = function () {
            $scope.pagedItems = [];

            for (var i = 0; i < $scope.filteredItems.length; i++) {
                if (i % $scope.itemsPerPage === 0) {
                    $scope.pagedItems[Math.floor(i / $scope.itemsPerPage)] = [ $scope.filteredItems[i] ];
                } else {
                    $scope.pagedItems[Math.floor(i / $scope.itemsPerPage)].push($scope.filteredItems[i]);
                }
            }
        };

        $scope.range = function (start, end) {
            var ret = [];
            if (!end) {
                end = start;
                start = 0;
            }
            for (var i = start; i < end; i++) {
                ret.push(i);
            }
            return ret;
        };

        $scope.prevPage = function () {
            if ($scope.currentPage > 0) {
                $scope.currentPage--;
            }
        };

        $scope.nextPage = function () {
            if ($scope.currentPage < $scope.pagedItems.length - 1) {
                $scope.currentPage++;
            }
        };

        $scope.setPage = function () {
            $scope.currentPage = this.n;
        };

        // functions have been describe process the data for display
        $scope.search();

        // change sorting order
        $scope.sort_by = function(newSortingOrder) {
            if ($scope.sortingOrder == newSortingOrder)
                $scope.reverse = !$scope.reverse;

            $scope.sortingOrder = newSortingOrder;

            // icon setup
            $('th i').each(function(){
                // icon reset
                $(this).removeClass().addClass('icon-sort');
            });
            if ($scope.reverse)
                $('th.'+new_sorting_order+' i').removeClass().addClass('icon-chevron-up');
            else
                $('th.'+new_sorting_order+' i').removeClass().addClass('icon-chevron-down');
        };

});

Answer 1

一个快速的选择是在您的 API 上创建一个 get 方法，它只 returns 数据的一个子集，一次可能只有 25 个联系人，或者一两页数据。然后，您可以在 angular 中创建一项服务，每 3 秒左右进行一次 get 调用，以获取接下来的 25 个联系人。一种延迟加载技术。

Ben Nadel 出色地 in this article 概述了他的公司如何处理使用延迟加载技术加载到页面的大量图像。通读他的例子可以给你一个很好的起点。

编辑：我还建议您参考 this solution 以获得更接近您希望实现的目标的答案。他建议一旦找到数据就将其推送到您的控制器：

 function MyCtrl($scope, $timeout, $q) {
        var fetchOne = function() {
            var deferred = $q.defer();
            $timeout(function() {
                deferred.resolve([random(), random() + 100, random() + 200]);
            }, random() * 5000);
            return deferred.promise;
        };

        $scope.scans = [];
        for (var i = 0; i < 2; i++) {
            fetchOne().then(function(items) {
                angular.forEach(items, function(item) {
                    $scope.scans.push(item);
                });
            });
        };
    }

AngularJS 分页

AngularJS paging

spring

angularjs