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

Question

ICSM Computer · Answer

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:
and 
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 -and 
andlt;div ng-repeat="item in items | limitTo: itemsPerPage : (currentPage - 1) * itemsPerPage"andgt;
  {{ item.name }}
andlt;/divandgt;
andlt;!-- Pagination Controls --andgt;
andlt;button ng-disabled="currentPage == 1" ng-click="prevPage()"andgt;Previousandlt;/buttonandgt;
andlt;spanandgt;Page {{currentPage}} of {{totalPages}}andlt;/spanandgt;
andlt;button ng-disabled="currentPage == totalPages" ng-click="nextPage()"andgt;Nextandlt;/buttonandgt;
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 andlt; $scope.totalPages) {
            $scope.currentPage++;
        }
    };
    $scope.prevPage = function() {
        if ($scope.currentPage andgt; 1) {
            $scope.currentPage--;
        }
    };
});
and 
Method 2: Using ui.bootstrap Pagination Component
If you are using Angular UI Bootstrap, you can use its pagination directive:
HTML Code -
andlt;div ng-repeat="item in pagedItems[currentPage]"andgt;
    {{ item.name }}
andlt;/divandgt;
andlt;uib-pagination total-items="items.length" ng-model="currentPage" items-per-page="itemsPerPage"andgt;andlt;/uib-paginationandgt;
Controller :
app.controller('PaginationController', function($scope) {
    $scope.items = []; // Assume this contains a large dataset
    $scope.itemsPerPage = 10;
    $scope.currentPage = 1;
});
and 
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.
and 
Method 1: Using ngInfiniteScroll
ngInfiniteScroll is a third-party library that helps in implementing infinite scrolling.
Installation:
andlt;script src="https://cdnjs.cloudflare.com/ajax/libs/ngInfiniteScroll/1.3.0/ng-infinite-scroll.min.js"andgt;andlt;/scriptandgt;
HTML:
andlt;div ng-repeat="item in items" infinite-scroll="loadMore()" infinite-scroll-distance="2"andgt;
    {{ item.name }}
andlt;/divandgt;
Controller:
app.controller('LazyLoadController', function($scope, $timeout) {
    $scope.items = [];
    $scope.limit = 10;
    function generateItems(start, end) {
        for (let i = start; i andlt; 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
    };
});
and 
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 + 'andsize=' + $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.
and

interview

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

ICSM Computer

Can you answer this question?

1 Answers

1. Pagination in AngularJS

2. Lazy Loading Large Lists

Conclusion

Liked By