Comment implémenter la pagination dans Angular JS ? [Avec exemple pratique]
Publié: 2020-04-20Avant de passer à la compréhension du fonctionnement de la pagination dans Angular JS et de son implémentation dans ce cadre, prenons-le étape par étape et commençons par discuter de Angular JS et de la pagination en général.
Table des matières
Qu'est-ce qu'Angular JS ?
Angular JS fait partie des frameworks structurels les plus appréciés pour créer des applications Web dynamiques. Il permet aux développeurs d'utiliser HTML comme langage de modèle et permet même l'extension de la syntaxe HTML pour permettre une expression claire et concise des différents composants d'une application Web.
Il est livré avec des capacités d'injection de dépendances et de liaison de données pour supprimer une plus grande partie du code qui doit être écrit par les développeurs. Tout cela se déroule à l'intérieur du navigateur, faisant d'Angular JS un framework qui peut être utilisé de manière pratique avec presque toutes les technologies de serveur.
Angular JS est un framework open source qui partage plusieurs similitudes avec JavaScript. Il est principalement utilisé par les développeurs pour développer des applications qui doivent afficher tout leur contenu, texte et graphiques sur une seule page. Cependant, cela ne signifie en aucun cas qu'il ne peut pas être utilisé pour créer des applications multi-pages.
Nous expliquerons dans cet article comment la pagination permet de diviser le contenu en plusieurs pages sans affecter le flux et la navigation, entre autres facteurs. Il s'agit d'un cadre de contrôleur de vue de modèle si populaire à travers le monde pour deux raisons très importantes : il est basé sur Google et il est toujours tenu à jour avec les dernières tendances de développement. Passons maintenant à la pagination.
Lire : Questions et réponses de l'entretien avec AngularJS
Qu'est-ce que la pagination ?
Comme nous l'avons mentionné un peu plus tôt dans l'article, tous les sites Web ne peuvent pas afficher toutes leurs informations sur une seule page. Bien qu'une seule page soit en effet le choix préféré, l'utilisation de plusieurs pages dans des situations où un site Web à une seule page n'est pas une option peut offrir plusieurs avantages, notamment une navigation facile sur le site, une expérience utilisateur améliorée, etc.
Tous les sites Web, en particulier les sites de commerce électronique comme Flipkart, ne peuvent pas répertorier tous leurs produits et afficher toutes les informations nécessaires sur une seule page. C'est là que la pagination entre en scène. Il permet au contenu, sous forme de texte, d'images, etc., d'être divisé en plusieurs pages si nécessaire. En savoir plus sur l'utilisation d'AngularJS pour le développement Web.
Il existe plusieurs scénarios où la pagination est très pratique. Si votre site Web contient d'énormes quantités d'informations, y compris des blogs, des graphiques ou des tableaux relatifs à une catégorie ou à un ensemble de données similaire, vous pouvez diviser ces informations à l'aide de la pagination et améliorer la navigation et la lisibilité.
Pagination en Angular JS
Il existe plusieurs façons d'afficher des données sur un site Web ou une application Web. Les listes et les tableaux sont les éléments les plus courants que la plupart des gens utilisent pour afficher des informations faciles à lire et à comprendre. Dans les applications angulaires, la fonctionnalité ng-repeat est utilisée pour afficher des informations dans des listes ou des tableaux. Cependant, cela ne fonctionne que lorsque les données affichées ne sont pas trop volumineuses. Pour les ensembles de données plus volumineux, des fonctionnalités telles que le tri, la recherche et la pagination rendent les tableaux et les listes plus faciles à gérer et les applications plus conviviales.
La pagination angulaire JS peut sembler plus difficile que la pagination dans Laravel, Code PHP et d'autres frameworks pour les personnes qui ne connaissent pas très bien l'approche de mise en œuvre à suivre. Vous pouvez utiliser la pagination ainsi que les fonctionnalités de recherche et de tri pour répertorier les enregistrements dans un format facile à naviguer et à lire.
Vous pouvez utiliser des bibliothèques angulaires tierces pour couvrir des listes simples en plusieurs pages avec des fonctionnalités de tri et de recherche. La bibliothèque tierce préférée à cet effet est dirPagination. Cette bibliothèque est facilement accessible et très facile à utiliser. Il peut être utilisé pour les versions angulaires inférieures à angular 2. Si vous utilisez angular 2, vous séparerez les composants disponibles dans la bibliothèque interne pour ajouter le tri, la recherche et la pagination.
Si vous souhaitez afficher plus de 200 enregistrements et que vous utilisez, par exemple, angular 1.4, vous constaterez que la bibliothèque dirPagination est plus rapide que d'autres bibliothèques de ce type et également performante. Il s'agit d'une bibliothèque plug-n-play qui n'a pas besoin du contrôleur Angular JS pour exécuter une logique ou une commande de configuration. De plus, cela fonctionne également bien avec Bootstrap.
Pagination dans Angular JS avec exemple
Voici un code pour afficher la pagination dans Angular JS.
Source : ( https://gist.github.com/kmaida/06d01f6b878777e2ea34 )
<!DOCTYPE HTML>
<html lang=”fr” ng-app=”monApp”>
<tête>
<meta charset= »utf-8″>
<title>Pagination dynamique avec filtrage</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta name=”description” content=””>
<meta name=”author” content=”Kim Maida”>
<!– Bibliothèques 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>
<!– Scripts angulaires –>
<script src= »script.js » type= »text/javascript »></script>
<!– Amorçage –>
<link rel=”stylesheet” type=”text/css” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css” />
</head>
<corps>
<div ng-controller=”PageCtrl”>
<div ng-controller=”PageCtrl”>
<label>Rechercher :</label> <input type=”text” ng-model=”search.name” placeholder=”Rechercher” />
<br />
<label>Filtrer par catégorie :</label>
<ul>
<li><a href=”” ng-click=”search.category='engineering'”>Ingénierie</a></li>
<li><a href=”” ng-click=”search.category='management'”>Gestion</a></li>
<li><a href=”” ng-click=”search.category='business'”>Entreprise</a></li>
</ul>
<label>Filtrer par succursale :</label>
<ul>
<li><a href=”” ng-click=”search.branch='Ouest'”>Ouest</a></li>
<li><a href=”” ng-click=”search.branch='Est'”>Est</a></li>
</ul>
<p><strong><a href="" ng-click="resetFilters()">Afficher tout</a></strong></p>
<h1>Articles</h1>
<ul>
<li ng-repeat=”item in filtered = items | filtre:rechercher | 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 (Source : https://gist.github.com/kmaida/06d01f6b878777e2ea34)
var app = angular.module('myApp', ['ui.bootstrap']);
app.filter('startFrom', function () {
fonction de retour (entrée, début) {
si (entrée) {
début = + début ;
return input.slice(start);
}
retourner [];
} ;
});
app.controller('PageCtrl', ['$scope', 'filterFilter', function ($scope, filterFilter) {
$scope.items = [{
"nom": "nom 1",
"Catégorie": [{
"la gestion par catégorie"
}, {
"catégorie": "entreprise"
}],
"succursale": "Ouest"
}, {
"nom": "nom 2",
"Catégorie": [{
"catégorie": "ingénierie"
}],
"succursale": "Ouest"
}, {
"nom": "nom 3",
"Catégorie": [{
"la gestion par catégorie"
}, {
"catégorie": "ingénierie"
}],
"succursale": "Ouest"
}, {
"nom": "nom 4",
"Catégorie": [{
"la gestion par catégorie"
}, {
"catégorie": "entreprise"
}],
"succursale": "Ouest"
}, {
"nom": "nom 5",
"Catégorie": [{
"la gestion par catégorie"
}, {
"catégorie": "entreprise"
}],
"branche": "Est"
}, {
"nom": "nom 6",
"Catégorie": [{
"la gestion par catégorie"
}, {
"catégorie": "entreprise"
}],
"branche": "Est"
}, {
"nom": "nom 7",
"Catégorie": [{
"la gestion par catégorie"
}, {
"catégorie": "entreprise"
}],
"branche": "Est"
}, {
"nom": "nom 8",
"Catégorie": [{
"catégorie": "entreprise"
}],
"succursale": "Ouest"
}, {
"nom": "nom 9",
"Catégorie": [{
"la gestion par catégorie"
}, {
"catégorie": "entreprise"
}],
"branche": "Est"
}, {
"nom": "nom 10",
"Catégorie": [{
"la gestion par catégorie"
}],
"branche": "Est"
}, {
"nom": "nom 11",
"Catégorie": [{
"la gestion par catégorie"
}, {
"catégorie": "entreprise"
}],
"branche": "Est"
}, {
"nom": "nom 12",
"Catégorie": [{
"catégorie": "ingénierie"
}],
"succursale": "Ouest"
}, {
"nom": "nom 13",
"Catégorie": [{
"la gestion par catégorie"
}, {
"catégorie": "entreprise"
}],
"succursale": "Ouest"
}, {
"nom": "nom 14",
"Catégorie": [{
"catégorie": "ingénierie"
}],
"branche": "Est"
}, {
"nom": "nom 15",
"Catégorie": [{
"la gestion par catégorie"
}, {
"catégorie": "ingénierie"
}],
"branche": "Est"
}, {
"nom": "nom 16",
"Catégorie": [{
"la gestion par catégorie"
}],
"succursale": "Ouest"
}, {
"nom": "nom 17",
"Catégorie": [{
"la gestion par catégorie"
}],
"branche": "Est"
}, {
"nom": "nom 18",
"Catégorie": [{
"catégorie": "entreprise"
}],
"succursale": "Ouest"
}, {
"nom": "nom 19",
"Catégorie": [{
"catégorie": "entreprise"
}],
"succursale": "Ouest"
}, {
"nom": "nom 20",
"Catégorie": [{
"catégorie": "ingénierie"
}],
"branche": "Est"
}, {
"nom": "Pierre",
"Catégorie": [{
"catégorie": "entreprise"
}],
"branche": "Est"
}, {
"nom": "Franck",
"Catégorie": [{
"la gestion par catégorie"
}],
"branche": "Est"
}, {
"nom": "Joe",
"Catégorie": [{
"catégorie": "entreprise"
}],
"branche": "Est"
}, {
"nom": "Ralph",
"Catégorie": [{
"la gestion par catégorie"
}, {
"catégorie": "entreprise"
}],
"branche": "Est"
}, {
"nom": "Gina",
"Catégorie": [{
"catégorie": "entreprise"
}],
"branche": "Est"
}, {
"nom": "Sam",
"Catégorie": [{
"la gestion par catégorie"
}, {
"catégorie": "ingénierie"
}],
"branche": "Est"
}, {
"nom": "Britney",
"Catégorie": [{
"catégorie": "entreprise"
}],
"succursale": "Ouest"
}] ;
Explication
Le code utilisé ci-dessus affichera les noms des étudiants par rapport à leur catégorie ou sujet d'éducation respectif ainsi que leur géographie. La fonctionnalité de pagination Angular JS permettra de mentionner ces détails sous forme de tableau, sur plusieurs pages. C'est ainsi que vous triez les informations et les rendez plus présentables pour l'utilisateur. C'est sans doute le moyen le plus simple d'améliorer l'expérience utilisateur de vos applications Web.
Donc, si vous êtes un développeur Web, vous ne devriez pas tarder à l'apprendre aussi efficacement que possible. Et avec les arguments ci-dessus donnés ci-dessus sur les raisons pour lesquelles AngularJS est un outil idéal dans le monde technologique actuel, vous avez toutes les explications pour aller de l'avant !
Si vous souhaitez en savoir plus sur AngularJS, le développement Full-stack, consultez le diplôme PG upGrad & IIIT-B en développement de logiciels Full-stack, conçu pour les professionnels en activité et offrant plus de 500 heures de formation rigoureuse, plus de 9 projets et affectations, statut d'anciens élèves de l'IIIT-B, projets de synthèse pratiques et aide à l'emploi avec les meilleures entreprises.