Wie implementiert man Paginierung in Angular JS? [Mit praktischem Beispiel]
Veröffentlicht: 2020-04-20Bevor wir uns damit befassen, wie Paginierung in Angular JS funktioniert und wie sie in diesem Framework implementiert wird, gehen wir Schritt für Schritt vor und beginnen damit, Angular JS und Paginierung im Allgemeinen zu diskutieren.
Inhaltsverzeichnis
Was ist Angular JS?
Angular JS gehört zu den am meisten bevorzugten strukturellen Frameworks zum Erstellen dynamischer Webanwendungen. Es ermöglicht Entwicklern, HTML als Vorlagensprache zu verwenden, und ermöglicht sogar die Erweiterung der HTML-Syntax, um einen klaren und prägnanten Ausdruck der verschiedenen Komponenten einer Webanwendung zu ermöglichen.
Es verfügt über Abhängigkeitsinjektions- und Datenbindungsfunktionen, um einen größeren Teil des Codes zu beseitigen, der von den Entwicklern geschrieben werden muss. All dies findet innerhalb des Browsers statt, was Angular JS zu einem Framework macht, das bequem mit fast jeder Servertechnologie verwendet werden kann.
Angular JS ist ein Open-Source-Framework, das einige Ähnlichkeiten mit JavaScript aufweist. Es wird hauptsächlich von Entwicklern für die Entwicklung von Anwendungen verwendet, die alle ihre Inhalte, Texte und Grafiken auf einer einzigen Seite anzeigen müssen. Dies bedeutet jedoch keineswegs, dass es nicht zum Erstellen mehrseitiger Anwendungen verwendet werden kann.
Wir werden in diesem Beitrag erklären, wie die Paginierung dazu beiträgt, den Inhalt auf mehr als eine Seite aufzuteilen, ohne den Fluss und die Navigation unter anderen Faktoren zu beeinträchtigen. Es ist aus zwei sehr wichtigen Gründen weltweit ein so beliebtes Model-View-Controller-Framework – es basiert auf Google und wird immer über die neuesten Entwicklungstrends auf dem Laufenden gehalten. Lassen Sie uns nun unseren Fokus auf die Paginierung verlagern.
Lesen Sie: Fragen und Antworten zum AngularJS-Interview
Was ist Paginierung?
Wie wir etwas früher in diesem Artikel angedeutet haben, können nicht alle Websites alle ihre Informationen auf einer einzigen Seite anzeigen. Während eine einzelne Seite tatsächlich die bevorzugte Wahl ist, kann die Verwendung mehrerer Seiten in Situationen, in denen eine Website mit einer einzigen Seite keine Option ist, mehrere Vorteile bieten, darunter eine einfache Website-Navigation, eine verbesserte Benutzererfahrung und andere.
Alle Websites, insbesondere E-Commerce-Websites wie Flipkart, können nicht alle ihre Produkte auflisten und alle erforderlichen Informationen auf einer einzigen Seite anzeigen. Hier kommt die Paginierung ins Spiel. Inhalte in Form von Text, Bildern und mehr können bei Bedarf auf mehrere Seiten aufgeteilt werden. Erfahren Sie mehr über die Verwendung von AngularJS für die Webentwicklung.
Es gibt mehrere Szenarien, in denen die Paginierung wirklich praktisch ist. Wenn Ihre Website große Mengen an Informationen enthält, einschließlich Blogs, Grafiken oder Diagramme, die sich auf eine ähnliche Kategorie oder einen ähnlichen Datensatz beziehen, können Sie diese Informationen mithilfe von Paginierung aufteilen und die Navigation und Lesbarkeit verbessern.
Paginierung in Angular JS
Es gibt mehrere Möglichkeiten, Daten auf einer Website oder einer beliebigen Webanwendung anzuzeigen. Listen und Tabellen sind die häufigsten Elemente, die die meisten Menschen verwenden, um Informationen anzuzeigen, die leicht zu lesen und zu verstehen sind. In Angular-Anwendungen wird die Funktion ng-repeat verwendet, um Informationen in Listen oder Tabellen anzuzeigen. Dies funktioniert jedoch nur, wenn die angezeigten Daten nicht zu groß sind. Bei größeren Datensätzen machen Funktionen wie Sortieren, Suchen und Paginieren Tabellen und Listen übersichtlicher und Anwendungen benutzerfreundlicher.
Die Paginierung in Angular JS mag für Personen, die sich des zu befolgenden Implementierungsansatzes nicht sehr gut bewusst sind, schwieriger erscheinen als die Paginierung in Laravel, Code PHP und anderen Frameworks. Sie können Paginierung zusammen mit Such- und Sortierfunktionen verwenden, um Datensätze in einem einfach zu navigierenden und leicht lesbaren Format aufzulisten.
Sie können Winkelbibliotheken von Drittanbietern verwenden, um einfache Listen in mehrere Seiten mit Sortier- und Suchfunktionen zu überführen. Die am meisten bevorzugte Drittanbieter-Bibliothek für diesen Zweck ist dirPagination. Diese Bibliothek ist leicht zugänglich und sehr einfach zu bedienen. Es kann für Winkelversionen kleiner als Winkel 2 verwendet werden. Wenn Sie Winkel 2 verwenden, stehen Ihnen innerhalb der internen Bibliothek separate Komponenten zur Verfügung, um Sortierung, Suche und Paginierung hinzuzufügen.
Wenn Sie mehr als 200 Datensätze anzeigen möchten und beispielsweise Angular 1.4 verwenden, werden Sie feststellen, dass die dirPagination-Bibliothek schneller als andere derartige Bibliotheken ist und auch eine hohe Leistung aufweist. Es ist eine Plug-and-Play-Bibliothek, die den Angular JS Controller nicht benötigt, um Logik auszuführen oder Befehle einzurichten. Darüber hinaus funktioniert es auch gut mit Bootstrap.
Paginierung in Angular JS mit Beispiel
Hier ist ein Code zum Anzeigen der Paginierung in Angular JS.
Quelle : ( https://gist.github.com/kmaida/06d01f6b878777e2ea34 )
<!DOCTYPE HTML>
<html lang="de" ng-app="myApp">
<Kopf>
<meta charset="utf-8">
<title>Dynamische Paginierung mit Filterung</title>
<meta name=“viewport“ content=“width=device-width, initial-scale=1.0″>
<meta name=“description“ content=““>
<meta name=“Autor“ content=“Kim Maida“>
<!– JS-Bibliotheken –>
<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>
<!– Winkelskripte –>
<script src="script.js" type="text/javascript"></script>
<!– Bootstrap –>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
</head>
<Körper>
<div ng-controller="PageCtrl">
<div ng-controller="PageCtrl">
<label>Suche:</label> <input type="text" ng-model="search.name" placeholder="Search" />
<br />
<label>Nach Kategorie filtern:</label>
<ul>
<li><a href=”” ng-click=”search.category='engineering'”>Engineering</a></li>
<li><a href=”” ng-click=”search.category='management'”>Verwaltung</a></li>
<li><a href=”” ng-click=”search.category='business'”>Geschäft</a></li>
</ul>
<label>Nach Branche filtern:</label>
<ul>
<li><a href=”” ng-click=”search.branch='West'”>West</a></li>
<li><a href=““ ng-click=“search.branch='East'“>Ost</a></li>
</ul>
<p><strong><a href=”” ng-click=”resetFilters()”>Alle anzeigen</a></strong></p>
<h1>Artikel</h1>
<ul>
<li ng-repeat=”Artikel in gefiltert = Artikel | Filter:Suche | startFrom:(aktuelleSeite-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 (Quelle: https://gist.github.com/kmaida/06d01f6b878777e2ea34)
var app = angle.module('myApp', ['ui.bootstrap']);
app.filter('startFrom', function () {
Rückgabefunktion (Eingabe, Start) {
wenn (Eingabe) {
start = +start;
return input.slice (Start);
}
Rückkehr [];
};
});
app.controller('PageCtrl', ['$scope', 'filterFilter', function ($scope, filterFilter) {
$scope.items = [{
„Name“: „Name 1“,
"Kategorie": [{
"Kategorienverwaltung"
}, {
„Kategorie“: „Geschäft“
}],
„Zweig“: „Westen“
}, {
„Name“: „Name 2“,
"Kategorie": [{
„Kategorie“: „Ingenieurwesen“
}],
„Zweig“: „Westen“
}, {
„Name“: „Name 3“,
"Kategorie": [{
"Kategorienverwaltung"
}, {
„Kategorie“: „Ingenieurwesen“
}],
„Zweig“: „Westen“
}, {
„Name“: „Name 4“,
"Kategorie": [{
"Kategorienverwaltung"
}, {
„Kategorie“: „Geschäft“
}],
„Zweig“: „Westen“
}, {
„Name“: „Name 5“,
"Kategorie": [{
"Kategorienverwaltung"
}, {
„Kategorie“: „Geschäft“
}],
„Zweig“: „Osten“
}, {
„Name“: „Name 6“,
"Kategorie": [{
"Kategorienverwaltung"
}, {
„Kategorie“: „Geschäft“
}],
„Zweig“: „Osten“
}, {
„Name“: „Name 7“,
"Kategorie": [{
"Kategorienverwaltung"
}, {
„Kategorie“: „Geschäft“
}],
„Zweig“: „Osten“
}, {
„Name“: „Name 8“,
"Kategorie": [{
„Kategorie“: „Geschäft“
}],
„Zweig“: „Westen“
}, {
„Name“: „Name 9“,
"Kategorie": [{
"Kategorienverwaltung"
}, {
„Kategorie“: „Geschäft“
}],
„Zweig“: „Osten“
}, {
„Name“: „Name 10“,
"Kategorie": [{
"Kategorienverwaltung"
}],
„Zweig“: „Osten“
}, {
„Name“: „Name 11“,
"Kategorie": [{
"Kategorienverwaltung"
}, {
„Kategorie“: „Geschäft“
}],
„Zweig“: „Osten“
}, {
„Name“: „Name 12“,
"Kategorie": [{
„Kategorie“: „Ingenieurwesen“
}],
„Zweig“: „Westen“
}, {
„Name“: „Name 13“,
"Kategorie": [{
"Kategorienverwaltung"
}, {
„Kategorie“: „Geschäft“
}],
„Zweig“: „Westen“
}, {
„Name“: „Name 14“,
"Kategorie": [{
„Kategorie“: „Ingenieurwesen“
}],
„Zweig“: „Osten“
}, {
„Name“: „Name 15“,
"Kategorie": [{
"Kategorienverwaltung"
}, {
„Kategorie“: „Ingenieurwesen“
}],
„Zweig“: „Osten“
}, {
„Name“: „Name 16“,
"Kategorie": [{
"Kategorienverwaltung"
}],
„Zweig“: „Westen“
}, {
„Name“: „Name 17“,
"Kategorie": [{
"Kategorienverwaltung"
}],
„Zweig“: „Osten“
}, {
„Name“: „Name 18“,
"Kategorie": [{
„Kategorie“: „Geschäft“
}],
„Zweig“: „Westen“
}, {
„Name“: „Name 19“,
"Kategorie": [{
„Kategorie“: „Geschäft“
}],
„Zweig“: „Westen“
}, {
„Name“: „Name 20“,
"Kategorie": [{
„Kategorie“: „Ingenieurwesen“
}],
„Zweig“: „Osten“
}, {
„Name“: „Peter“,
"Kategorie": [{
„Kategorie“: „Geschäft“
}],
„Zweig“: „Osten“
}, {
„Name“: „Frank“,
"Kategorie": [{
"Kategorienverwaltung"
}],
„Zweig“: „Osten“
}, {
„Name“: „Joe“,
"Kategorie": [{
„Kategorie“: „Geschäft“
}],
„Zweig“: „Osten“
}, {
„Name“: „Ralf“,
"Kategorie": [{
"Kategorienverwaltung"
}, {
„Kategorie“: „Geschäft“
}],
„Zweig“: „Osten“
}, {
„Name“: „Gina“,
"Kategorie": [{
„Kategorie“: „Geschäft“
}],
„Zweig“: „Osten“
}, {
„Name“: „Sam“,
"Kategorie": [{
"Kategorienverwaltung"
}, {
„Kategorie“: „Ingenieurwesen“
}],
„Zweig“: „Osten“
}, {
„Name“: „Britney“,
"Kategorie": [{
„Kategorie“: „Geschäft“
}],
„Zweig“: „Westen“
}];
Erläuterung
Der oben verwendete Code zeigt die Namen der Schüler für ihre jeweilige Kategorie oder ihr Unterrichtsfach zusammen mit ihrer Geografie an. Die Paginierungsfunktion von Angular JS ermöglicht es, diese Details in tabellarischer Form auf mehreren Seiten zu erwähnen. So sortieren Sie Informationen und machen sie für den Benutzer anschaulicher. Dies ist wohl die einfachste Möglichkeit, die Benutzererfahrung für Ihre Webanwendungen zu verbessern.
Wenn Sie also ein Webentwickler sind, sollten Sie es nicht verzögern, es so effizient wie möglich zu lernen. Und mit den obigen Argumenten, warum AngularJS ein ideales Werkzeug in der heutigen Technologiewelt ist, haben Sie alle Erklärungen, um weiterzumachen!
Wenn Sie mehr über AngularJS, Full-Stack-Entwicklung erfahren möchten, schauen Sie sich das PG-Diplom in Full-Stack-Softwareentwicklung von upGrad & IIIT-B an, das für Berufstätige konzipiert ist und mehr als 500 Stunden strenges Training, 9+ Projekte und mehr bietet Aufgaben, IIIT-B-Alumni-Status, praktische praktische Schlusssteinprojekte und Arbeitsunterstützung bei Top-Unternehmen.