如何在 Angular JS 中實現分頁？ 【附實例】
已發表: 2020-04-20在我們繼續了解分頁在 Angular JS 中是如何工作的以及它是如何在該框架中實現的之前，讓我們一步一步地開始討論 Angular JS 和分頁。
目錄
什麼是 Angular JS？
Angular JS 是用於創建動態 Web 應用程序的最受青睞的結構框架之一。 它允許開發人員使用 HTML 作為模板語言，甚至允許擴展 HTML 語法以清晰簡潔地表達 Web 應用程序的各種組件。
它帶有依賴注入和數據綁定功能，可以消除大部分必須由開發人員編寫的代碼。 所有這些都發生在瀏覽器中，使 Angular JS 成為一個可以方便地與幾乎任何服務器技術一起使用的框架。
Angular JS 是一個開源框架，與 JavaScript 有幾個相似之處。 它主要由開發人員用於開發需要在單個頁面中顯示其所有內容、文本和圖形的應用程序。 但是，這並不意味著它不能用於創建多頁應用程序。
我們將在這篇文章中解釋分頁如何幫助將內容分成多個頁面，而不會影響其他因素的流程和導航。 由於兩個非常重要的原因，它在全球如此流行的模型視圖控制器框架 - 它基於 Google，並且始終與最新的發展趨勢保持同步。 現在讓我們將注意力轉移到分頁上。
閱讀： AngularJS 面試問答
什麼是分頁？
正如我們在文章前面提到的那樣，所有網站都不能在一個頁面上顯示所有信息。 雖然單頁確實是首選，但在無法選擇單頁網站的情況下使用多頁可以帶來多種好處，包括輕鬆的網站導航、改進的用戶體驗等。
所有網站，尤其是 Flipkart 等電子商務網站，都無法在一個頁面上列出所有產品並顯示所有必要信息。 這就是分頁出現的地方。 如果需要，它允許將文本、圖像等形式的內容拆分為多個頁面。 了解更多關於使用 AngularJS 進行 Web 開發的信息。
在幾種情況下，分頁非常方便。 如果您的網站包含大量信息，包括與類似類別或數據集相關的博客、圖表或圖表，您可以使用分頁來拆分這些信息並提高導航和可讀性。
Angular JS 中的分頁
有幾種方法可以在網站或任何 Web 應用程序上顯示數據。 列表和表格是大多數人用來顯示易於閱讀和理解的信息的最常見元素。 在 Angular 應用程序中，ng-repeat 功能用於在列表或表格中顯示信息。 但是，這僅在顯示的數據不太大時才有效。 對於更大的數據集，排序、搜索和分頁等功能使表格和列表更易於管理，應用程序對用戶更友好。
對於不太了解需要遵循的實現方法的人來說，Angular JS 分頁可能比 Laravel、Code PHP 和其他框架中的分頁更困難。 您可以使用分頁以及搜索和排序功能以易於導航和易於閱讀的格式列出記錄。
您可以使用第三方 Angular 庫將簡單列表包含在具有排序和搜索功能的多個頁面中。 為此目的，最首選的第三方庫是 dirPagination。 該庫易於訪問且非常易於使用。 它可用於低於 Angular 2 的 Angular 版本。如果您使用 Angular 2，您將在內部庫中分離可用的組件以添加排序、搜索和分頁。
如果您想顯示超過 200 條記錄並使用例如 angular 1.4，您會發現 dirPagination 庫比其他此類庫更快並且性能也很高。 它是一個即插即用的庫，不需要 Angular JS 控制器來運行任何邏輯或設置命令。 此外，它也適用於 Bootstrap。
Angular JS 中的分頁示例
這是在 Angular JS 中顯示分頁的代碼。
來源：（ https://gist.github.com/kmaida/06d01f6b878777e2ea34 ）
<!DOCTYPE HTML>
<html lang=”en” ng-app=”myApp”>
<頭部>
<元字符集=”utf-8″>
<title>帶過濾的動態分頁</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<元名稱=”描述”內容=””>
<meta name=”author” content=”Kim Maida”>
<!– JS 庫 –>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js” type=”text/javascript”></script>
<script src=”http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js” type=”text/javascript”></script>
<!– Angular 腳本 –>
<script src=”script.js” type=”text/javascript”></script>
<!– 引導程序–>
<link rel=”stylesheet” type=”text/css” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css” />
</head>
<正文>
<div ng-controller=”PageCtrl”>
<div ng-controller=”PageCtrl”>
<label>搜索：</label> <input type=”text” ng-model=”search.name” placeholder=”Search” />
<br />
<label>按類別過濾：</label>
<ul>
<li><a href=”” ng-click=”search.category='engineering'”>工程</a></li>
<li><a href=”” ng-click=”search.category='management'”>管理</a></li>
<li><a href=”” ng-click=”search.category='business'”>商業</a></li>
</ul>
<label>按分支過濾：</label>
<ul>
<li><a href=”” ng-click=”search.branch='West'”>西</a></li>
<li><a href=”” ng-click=”search.branch='East'”>東</a></li>
</ul>
<p><strong><a href=”” ng-click=”resetFilters()”>全部顯示</a></strong></p>
<h1>項目</h1>
<ul>
<li ng-repeat=”過濾後的項目=項目| 過濾器：搜索 | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit”>{{item.name}}</li>
</ul>
<pagination page=”currentPage” max-size=”noOfPages” total-items=”totalItems” items-per-page=”entryLimit”></pagination>
</div>
</正文>
</html>
app.js（來源：https://gist.github.com/kmaida/06d01f6b878777e2ea34）
var app = angular.module('myApp', ['ui.bootstrap']);
app.filter('startFrom', function () {
返回函數（輸入，開始）{
如果（輸入）{
開始 = +開始；
返回 input.slice(start);
}
返回 [];
};
});
app.controller('PageCtrl', ['$scope', 'filterFilter', function ($scope, filterFilter) {
$scope.items = [{
“名稱”：“名稱 1”，
“類別”： [{
“分類管理”
}, {
“類別”：“業務”
}],
“分支”：“西部”
}, {
“名稱”：“名稱 2”，
“類別”： [{
“類別”：“工程”
}],
“分支”：“西部”
}, {
“名稱”：“名稱 3”，
“類別”： [{
“分類管理”
}, {
“類別”：“工程”
}],
“分支”：“西部”
}, {
“名稱”：“名稱 4”，
“類別”： [{
“分類管理”
}, {
“類別”：“業務”
}],
“分支”：“西部”
}, {
“名稱”：“名稱 5”，
“類別”： [{
“分類管理”
}, {
“類別”：“業務”
}],
“分支”：“東”
}, {
“名稱”：“名稱 6”，
“類別”： [{
“分類管理”
}, {
“類別”：“業務”
}],
“分支”：“東”
}, {
“名稱”：“名稱 7”，
“類別”： [{
“分類管理”
}, {
“類別”：“業務”
}],
“分支”：“東”
}, {
“名稱”：“名稱 8”，
“類別”： [{
“類別”：“業務”
}],
“分支”：“西部”
}, {
“名稱”：“名稱 9”，
“類別”： [{
“分類管理”
}, {
“類別”：“業務”
}],
“分支”：“東”
}, {
“名稱”：“名稱 10”，
“類別”： [{
“分類管理”
}],
“分支”：“東”
}, {
“名稱”：“名稱 11”，
“類別”： [{
“分類管理”
}, {
“類別”：“業務”
}],
“分支”：“東”
}, {
“名稱”：“名稱 12”，
“類別”： [{
“類別”：“工程”
}],
“分支”：“西部”
}, {
“名稱”：“名稱 13”，
“類別”： [{
“分類管理”
}, {
“類別”：“業務”
}],
“分支”：“西部”
}, {
“名稱”：“名稱 14”，
“類別”： [{
“類別”：“工程”
}],
“分支”：“東”
}, {
“名稱”：“名稱 15”，
“類別”： [{
“分類管理”
}, {
“類別”：“工程”
}],
“分支”：“東”
}, {
“名稱”：“名稱 16”，
“類別”： [{
“分類管理”
}],
“分支”：“西部”
}, {
“名稱”：“名稱 17”，
“類別”： [{
“分類管理”
}],
“分支”：“東”
}, {
“名稱”：“名稱 18”，
“類別”： [{
“類別”：“業務”
}],
“分支”：“西部”
}, {
“名稱”：“名稱 19”，
“類別”： [{
“類別”：“業務”
}],
“分支”：“西部”
}, {
“名稱”：“名稱 20”，
“類別”： [{
“類別”：“工程”
}],
“分支”：“東”
}, {
“名字”：“彼得”，
“類別”： [{
“類別”：“業務”
}],
“分支”：“東”
}, {
“姓名”：“弗蘭克”，
“類別”： [{
“分類管理”
}],
“分支”：“東”
}, {
“名字”：“喬”，
“類別”： [{
“類別”：“業務”
}],
“分支”：“東”
}, {
“名字”：“拉爾夫”，
“類別”： [{
“分類管理”
}, {
“類別”：“業務”
}],
“分支”：“東”
}, {
“名字”：“吉娜”，
“類別”： [{
“類別”：“業務”
}],
“分支”：“東”
}, {
“姓名”：“山姆”，
“類別”： [{
“分類管理”
}, {
“類別”：“工程”
}],
“分支”：“東”
}, {
“名稱”：“布蘭妮”，
“類別”： [{
“類別”：“業務”
}],
“分支”：“西部”
}];
解釋
上面使用的代碼將根據他們各自的教育類別或學科以及他們的地理位置顯示學生的姓名。 Angular JS 分頁功能將允許在多個頁面上以表格格式提及這些細節。 這是您對信息進行排序並使其對用戶更具表現力的方式。 這可以說是改善 Web 應用程序用戶體驗的最簡單方法。
因此，如果您是 Web 開發人員，則不應盡可能有效地延遲學習它。 上面給出了關於為什麼 AngularJS 是當今科技界的理想工具的上述論點，你有所有的解釋可以繼續前進！
如果您有興趣了解有關 AngularJS、全棧開發的更多信息，請查看 upGrad 和 IIIT-B 的全棧軟件開發 PG 文憑，該文憑專為在職專業人士設計，提供 500 多個小時的嚴格培訓、9 個以上的項目和任務、IIIT-B 校友身份、實用的實踐頂點項目和頂級公司的工作協助。