Angular JSでページネーションを実装する方法は？ 【実例あり】
公開: 2020-04-20Angular JSでページネーションがどのように機能し、そのフレームワークでどのように実装されるかを理解する前に、段階的にAngularJSとページネーション全般について説明することから始めましょう。
目次
Angular JSとは何ですか？
Angular JSは、動的Webアプリケーションを作成するための最も好ましい構造フレームワークの1つです。 これにより、開発者はHTMLをテンプレート言語として使用でき、Webアプリケーションのさまざまなコンポーネントを明確かつ簡潔に表現できるようにHTML構文を拡張することもできます。
開発者が作成する必要のあるコードの大部分を排除するために、依存性注入とデータバインディング機能が付属しています。 これらはすべてブラウザー内で行われるため、AngularJSはほとんどすべてのサーバーテクノロジーで便利に使用できるフレームワークになります。
Angular JSは、JavaScriptといくつかの類似点を共有するオープンソースフレームワークです。 これは主に、すべてのコンテンツ、テキスト、およびグラフィックを1つのページに表示する必要があるアプリケーションを開発するために開発者によって使用されます。 ただし、これは、複数ページのアプリケーションの作成に使用できないことを意味するものではありません。
この投稿では、ページネーションが、他の要因の中でも特にフローやナビゲーションに影響を与えることなく、コンテンツを複数のページに分割するのにどのように役立つかを説明します。 これは、2つの非常に重要な理由により、世界中で非常に人気のあるモデルビューコントローラーフレームワークです。Googleベースであり、常に最新の開発トレンドに対応しています。 ここで、焦点をページネーションに移しましょう。
読む： AngularJSインタビューの質問と回答
ページネーションとは何ですか？
少し前に触れたように、すべてのWebサイトがすべての情報を1つのページに表示できるわけではありません。 単一ページが確かに好ましい選択ですが、単一ページのWebサイトがオプションではない状況で複数ページを使用すると、簡単なサイトナビゲーション、ユーザーエクスペリエンスの向上など、いくつかの利点が得られます。
すべてのWebサイト、特にFlipkartなどのeコマースWebサイトでは、すべての製品を一覧表示したり、必要なすべての情報を1ページに表示したりすることはできません。 ここで、ページネーションが登場します。 必要に応じて、テキストや画像などの形式のコンテンツを複数のページに分割できます。 Web開発にAngularJSを使用する方法の詳細をご覧ください。
ページネーションが非常に役立つシナリオがいくつかあります。 Webサイトに、類似のカテゴリまたはデータセットに関連するブログ、グラフ、チャートなどの膨大な情報が含まれている場合は、ページネーションを使用してこの情報を分割し、ナビゲーションと読みやすさを向上させることができます。
AngularJSでのページネーション
Webサイトまたは任意のWebアプリケーションにデータを表示する方法はいくつかあります。 リストと表は、ほとんどの人が読みやすく理解しやすい情報を表示するために使用する最も一般的な要素です。 Angularアプリケーションでは、ng-repeat機能を使用してリストまたはテーブルに情報を表示します。 ただし、これは、表示されているデータが大きすぎない場合にのみ機能します。 大規模なデータセットの場合、並べ替え、検索、ページ付けなどの機能により、テーブルとリストがより管理しやすくなり、アプリケーションがより使いやすくなります。
Angular JSのページ付けは、Laravel、Code PHP、およびその他のフレームワークでのページ付けよりも、従う必要のある実装アプローチをあまりよく知らない人にとっては難しいように見えるかもしれません。 ページ付けと検索および並べ替え機能を使用して、ナビゲートしやすく読みやすい形式でレコードを一覧表示できます。
サードパーティのAngularライブラリを使用して、並べ替えと検索の機能を備えた単純なリストを複数のページにカバーできます。 この目的で最も好ましいサードパーティライブラリはdirPaginationです。 このライブラリは簡単にアクセスでき、非常に使いやすいです。 これは、Angular 2よりも低いAngularバージョンに使用できます。Angular2を使用している場合は、内部ライブラリ内で使用可能なコンポーネントを分離して、並べ替え、検索、およびページ付けを追加します。
200を超えるレコードを表示する必要があり、たとえば角度1.4を使用している場合、dirPaginationライブラリは他のそのようなライブラリよりも高速で、パフォーマンスも高いことがわかります。 これはプラグアンドプレイライブラリであり、ロジックを実行したりコマンドを設定したりするためにAngularJSコントローラーを必要としません。 さらに、Bootstrapでもうまく機能します。
例を使用したAngularJSのページネーション
AngularJSでページネーションを表示するコードは次のとおりです。
ソース：（ https://gist.github.com/kmaida/06d01f6b878777e2ea34 ）
<！DOCTYPE HTML>
<html lang =” en” ng-app =” myApp”>
<頭>
<meta charset =” utf-8”>
<title>フィルタリング付きの動的ページ付け</title>
<meta name =” viewport” content =” width = device-width、initial-scale = 1.0”>
<meta name =” description” content =””>
<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 Scripts –>
<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'”> West </a> </ li>
<li> <a href=”” ng-click=”search.branch='East'”> East </a> </ li>
</ ul>
<p> <strong> <a href=”” ng-click=”resetFilters()”>すべて表示</a> </ strong> </ p>
<h1>アイテム</h1>
<ul>
<li ng-repeat =”フィルタリングされたアイテム=アイテム| filter：search | 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>
</ body>
</ html>
app.js（ソース：https：//gist.github.com/kmaida/06d01f6b878777e2ea34）
var app = angle.module（'myApp'、['ui.bootstrap']）;
app.filter（'startFrom'、function（）{
関数を返す（入力、開始）{
if（入力）{
start = + start;
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卒業生のステータス、実践的な実践的なキャップストーンプロジェクト、トップ企業との仕事の支援。