Optimizing large datasets using pagination

Handling large datasets in AngularJS can slow down your application due to excessive DOM rendering. Pagination helps by loading only a subset of data at a time, reducing memory usage and improving performance.

---

1. Types of Pagination in AngularJS

1. Client-side Pagination → Data is loaded once and split into pages on the frontend.
2. Server-side Pagination → Data is fetched in chunks from the backend as needed.

---

2. Implementing Client-Side Pagination

Step 1: Install angularUtils-pagination (Optional)

The angularUtils-pagination module simplifies pagination in AngularJS.

npm install angular-utils-pagination

or include via CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-utils-pagination/0.11.1/dirPagination.min.js"></script>

Step 2: Set Up the Controller

app.controller("PaginationController", function ($scope) {
    $scope.items = [];
    
    // Generate a large dataset (e.g., 1000 items)
    for (let i = 1; i <= 1000; i++) {
        $scope.items.push({ id: i, name: "Item " + i });
    }

    $scope.currentPage = 1;
    $scope.itemsPerPage = 10;
});

Step 3: Add Pagination in HTML

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

    <button ng-disabled="currentPage == 1" ng-click="currentPage = currentPage - 1">Prev</button>
    Page {{ currentPage }}
    <button ng-disabled="currentPage >= (items.length / itemsPerPage)" ng-click="currentPage = currentPage + 1">Next</button>
</div>

---

3. Implementing Server-Side Pagination

For large datasets, fetching only a portion from the backend is more efficient.

Step 1: Backend API Example (Node.js/Express)

app.get("/api/items", (req, res) => {
    const page = parseInt(req.query.page) || 1;
    const limit = parseInt(req.query.limit) || 10;
    const startIndex = (page - 1) * limit;
    const endIndex = page * limit;

    const data = [];
    for (let i = 1; i <= 1000; i++) {
        data.push({ id: i, name: `Item ${i}` });
    }

    res.json({
        totalItems: data.length,
        totalPages: Math.ceil(data.length / limit),
        currentPage: page,
        data: data.slice(startIndex, endIndex)
    });
});

Step 2: AngularJS Controller to Fetch Paginated Data

app.controller("ServerPaginationController", function ($scope, $http) {
    $scope.currentPage = 1;
    $scope.itemsPerPage = 10;

    $scope.loadData = function () {
        $http.get("/api/items?page=" + $scope.currentPage + "&limit=" + $scope.itemsPerPage)
            .then(function (response) {
                $scope.items = response.data.data;
                $scope.totalPages = response.data.totalPages;
            });
    };

    $scope.nextPage = function () {
        if ($scope.currentPage < $scope.totalPages) {
            $scope.currentPage++;
            $scope.loadData();
        }
    };

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

    $scope.loadData();
});

Step 3: HTML for Server-Side Pagination

<div ng-controller="ServerPaginationController">
    <ul>
        <li ng-repeat="item in items">{{ item.name }}</li>
    </ul>

    <button ng-disabled="currentPage == 1" ng-click="prevPage()">Prev</button>
    Page {{ currentPage }} of {{ totalPages }}
    <button ng-disabled="currentPage >= totalPages" ng-click="nextPage()">Next</button>
</div>