Question

我使用spring mvc制作了AngularJS分页它运行良好，但是应用程序从数据库中获取大量数据，因此当我获得第一页时应用程序非常慢，因为它获得了所有记录，任何人都可以帮我解决这个问题？我希望根据angularJS分页获取数据库的子集

Spring mvc Controlller

@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方法，该方法仅返回数据的子集，一次只能返回25个联系人，或者一页或两个数据。然后你可以创建一个角度服务，每隔3秒左右就可以调用一次，以获得接下来的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分页

1 个答案: