How can you optimize large lists in AngularJS using pagination or lazy loading?

When dealing with large lists in AngularJS, using pagination or lazy loading can significantly improve performance by reducing the number of items rendered at a time. Here’s how to implement both approaches:

1. Pagination in AngularJS

Method 1: Using limitTo and Custom Pagination

You can use AngularJS’s built-in limitTo filter along with a pagination mechanism.

Example:

Html Code -

<div ng-repeat="item in items | limitTo: itemsPerPage : (currentPage - 1) * itemsPerPage">
  {{ item.name }}
</div>

<!-- Pagination Controls -->
<button ng-disabled="currentPage == 1" ng-click="prevPage()">Previous</button>
<span>Page {{currentPage}} of {{totalPages}}</span>
<button ng-disabled="currentPage == totalPages" ng-click="nextPage()">Next</button>

Controller:

app.controller('PaginationController', function($scope) {
    $scope.items = []; // Assume this contains a large dataset
    $scope.itemsPerPage = 10;
    $scope.currentPage = 1;
    
    $scope.totalPages = Math.ceil($scope.items.length / $scope.itemsPerPage);
    
    $scope.nextPage = function() {
        if ($scope.currentPage < $scope.totalPages) {
            $scope.currentPage++;
        }
    };
    
    $scope.prevPage = function() {
        if ($scope.currentPage > 1) {
            $scope.currentPage--;
        }
    };
});

Method 2: Using ui.bootstrap Pagination Component

If you are using Angular UI Bootstrap, you can use its pagination directive:

HTML Code -

<div ng-repeat="item in pagedItems[currentPage]">
    {{ item.name }}
</div>

<uib-pagination total-items="items.length" ng-model="currentPage" items-per-page="itemsPerPage"></uib-pagination>

Controller :

app.controller('PaginationController', function($scope) {
    $scope.items = []; // Assume this contains a large dataset
    $scope.itemsPerPage = 10;
    $scope.currentPage = 1;
});

2. Lazy Loading Large Lists

Lazy loading ensures that only a portion of the data is loaded initially, and more data is fetched as the user scrolls.

Method 1: Using ngInfiniteScroll

ngInfiniteScroll is a third-party library that helps in implementing infinite scrolling.

Installation:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ngInfiniteScroll/1.3.0/ng-infinite-scroll.min.js"></script>

HTML:

<div ng-repeat="item in items" infinite-scroll="loadMore()" infinite-scroll-distance="2">
    {{ item.name }}
</div>

Controller:

app.controller('LazyLoadController', function($scope, $timeout) {
    $scope.items = [];
    $scope.limit = 10;

    function generateItems(start, end) {
        for (let i = start; i < end; i++) {
            $scope.items.push({ name: "Item " + (i + 1) });
        }
    }

    // Load initial data
    generateItems(0, $scope.limit);

    $scope.loadMore = function() {
        $timeout(function() {
            generateItems($scope.items.length, $scope.items.length + 10);
        }, 1000); // Simulating an API delay
    };
});

Method 2: Server-Side Pagination (API-Based)

If data is fetched from a server, it's best to load data on-demand instead of loading everything at once.

Controller:

app.controller('ServerPaginationController', function($scope, $http) {
    $scope.items = [];
    $scope.page = 1;
    $scope.pageSize = 10;
    $scope.loading = false;

    $scope.loadMore = function() {
        if ($scope.loading) return;
        $scope.loading = true;

        $http.get('/api/items?page=' + $scope.page + '&size=' + $scope.pageSize)
            .then(function(response) {
                $scope.items = $scope.items.concat(response.data);
                $scope.page++;
                $scope.loading = false;
            });
    };

    // Initial Load
    $scope.loadMore();
});

Conclusion

Use Pagination when users need to navigate structured data efficiently.
Use Lazy Loading for infinite scrolling when a user is expected to load more content dynamically.
Use Server-Side Pagination for large datasets to reduce the initial load time and improve performance.

interview

How can you optimize large lists in AngularJS using pagination or lazy loading?

Can you answer this question?

1 Answers

1. Pagination in AngularJS

2. Lazy Loading Large Lists

Conclusion