Jak zaimplementować paginację w Angular JS? [Z praktycznym przykładem]
Opublikowany: 2020-04-20Zanim przejdziemy do zrozumienia, jak działa paginacja w Angular JS i jak jest zaimplementowana w tym frameworku, zróbmy to krok po kroku i zacznijmy od omówienia Angular JS i ogólnie paginacji.
Spis treści
Co to jest Angular JS?
Angular JS jest jednym z najbardziej preferowanych frameworków strukturalnych do tworzenia dynamicznych aplikacji internetowych. Pozwala programistom na używanie HTML jako języka szablonów, a nawet pozwala na rozszerzenie składni HTML w celu umożliwienia jasnego i zwięzłego wyrażania różnych składników aplikacji internetowej.
Jest wyposażony w funkcje wstrzykiwania zależności i wiązania danych, aby pozbyć się większej części kodu, który musi zostać napisany przez programistów. Wszystko to odbywa się wewnątrz przeglądarki, dzięki czemu Angular JS jest frameworkiem, którego można wygodnie używać z niemal każdą technologią serwerową.
Angular JS to framework o otwartym kodzie źródłowym, który ma kilka podobieństw z JavaScriptem. Jest używany głównie przez programistów do tworzenia aplikacji, które muszą wyświetlać całą zawartość, tekst i grafikę na jednej stronie. Jednak w żaden sposób nie oznacza to, że nie można go używać do tworzenia aplikacji wielostronicowych.
W tym poście wyjaśnimy, w jaki sposób paginacja pomaga podzielić treść na więcej niż jedną stronę bez wpływu na przepływ i nawigację między innymi. Jest to tak popularny na całym świecie framework model-view controller z dwóch bardzo ważnych powodów – jest oparty na Google i zawsze jest na bieżąco z najnowszymi trendami rozwojowymi. Skupmy się teraz na paginacji.
Przeczytaj: Pytania i odpowiedzi na wywiad z AngularJS
Co to jest paginacja?
Jak wspomnieliśmy nieco wcześniej w artykule, wszystkie strony internetowe nie mogą wyświetlać wszystkich swoich informacji na jednej stronie. Chociaż pojedyncza strona jest rzeczywiście preferowanym wyborem, korzystanie z wielu stron w sytuacjach, w których pojedyncza strona internetowa nie jest opcją, może przynieść wiele korzyści, w tym łatwą nawigację w witrynie, lepsze wrażenia użytkownika i inne.
Wszystkie witryny, zwłaszcza witryny eCommerce, takie jak Flipkart, nie mogą wyświetlać wszystkich swoich produktów i wyświetlać wszystkich niezbędnych informacji na jednej stronie. W tym miejscu pojawia się paginacja. W razie potrzeby umożliwia podzielenie treści w postaci tekstu, obrazów i nie tylko na wiele stron. Dowiedz się więcej o używaniu AngularJS do tworzenia stron internetowych.
Istnieje kilka scenariuszy, w których paginacja jest bardzo przydatna. Jeśli Twoja witryna zawiera ogromne ilości informacji, w tym blogi, wykresy lub wykresy związane z podobną kategorią lub zestawem danych, możesz podzielić te informacje za pomocą paginacji i poprawić nawigację oraz czytelność.
Paginacja w Angular JS
Istnieje kilka sposobów wyświetlania danych na stronie internetowej lub dowolnej aplikacji internetowej. Listy i tabele to najczęstsze elementy używane przez większość ludzi do wyświetlania informacji, które są łatwe do odczytania i zrozumienia. W aplikacjach Angular funkcja ng-repeat służy do wyświetlania informacji w listach lub tabelach. Działa to jednak tylko wtedy, gdy wyświetlane dane nie są zbyt duże. W przypadku większych zestawów danych funkcje, takie jak sortowanie, wyszukiwanie i podział na strony, ułatwiają zarządzanie tabelami i listami, a aplikacje są bardziej przyjazne dla użytkownika.
Paginacja Angular JS może wydawać się trudniejsza niż paginacja w Laravel, Code PHP i innych frameworkach dla osób, które nie są zbyt świadome podejścia do implementacji, którego należy przestrzegać. Możesz używać paginacji wraz z funkcjami wyszukiwania i sortowania do wyświetlania rekordów w łatwym w nawigacji i łatwym do odczytania formacie.
Możesz użyć bibliotek kątowych innych firm, aby pokryć proste listy na wielu stronach z funkcjami sortowania i wyszukiwania. Najbardziej preferowaną biblioteką innej firmy do tego celu jest dirPagination. Ta biblioteka jest łatwo dostępna i bardzo łatwa w użyciu. Może być używany dla wersji Angular niższych niż Angular 2. Jeśli używasz Angular 2, oddzielisz dostępne komponenty w wewnętrznej bibliotece, aby dodać sortowanie, wyszukiwanie i paginację.
Jeśli chcesz wyświetlić więcej niż 200 rekordów i używasz na przykład Angular 1.4, biblioteka dirPagination jest szybsza niż inne tego typu biblioteki i zapewnia wysoką wydajność. Jest to biblioteka typu plug-n-play, która nie wymaga kontrolera Angular JS do uruchamiania jakiejkolwiek logiki lub polecenia konfiguracyjnego. Ponadto działa dobrze również z Bootstrapem.
Paginacja w Angular JS z przykładem
Oto kod pokazujący paginację w Angular JS.
Źródło : ( https://gist.github.com/kmaida/06d01f6b878777e2ea34 )
<!DOCTYPE HTML>
<html lang="pl" ng-app="myApp">
<głowa>
<meta charset=”utf-8″>
<title>Dynamiczna paginacja z filtrowaniem</title>
<nazwa meta=”viewport” content=”width=szerokość-urządzenia, początkowa skala=1.0″>
<nazwa meta=”opis” treść=””>
<meta name=”autor” content=”Kim Maida”>
<!– Biblioteki 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>
<!– Skrypty Angular –>
<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>
<ciało>
<div ng-controller="PageCtrl">
<div ng-controller="PageCtrl">
<label>Wyszukaj:</label> <input type=”text” ng-model=”search.name” placeholder=”Search” />
<br />
<label>Filtruj według kategorii:</label>
<ul>
<li><a href=”” ng-click=”search.category='engineering'”>Inżynieria</a></li>
<li><a href=”” ng-click=”search.category='management'”>Zarządzanie</a></li>
<li><a href=”” ng-click=”search.category='business'”>Biznes</a></li>
</ul>
<label>Filtruj według gałęzi:</label>
<ul>
<li><a href=”” ng-click=”search.branch='Zachód'”>Zachód</a></li>
<li><a href=”” ng-click=”search.branch='Wschód'”>Wschód</a></li>
</ul>
<p><strong><a href=”” ng-click=”resetFilters()”>Pokaż wszystko</a></strong></p>
<h1>Przedmioty</h1>
<ul>
<li ng-repeat=”element w przefiltrowanych = elementy | filtr:szukaj | startFrom:(bieżąca strona-1)*entryLimit | limitTo:entryLimit”>{{nazwa.elementu}}</li>
</ul>
<pagination page=”bieżącaStrona” max-size=”noOfPages” total-items=”totalItems” items-per-page=”entryLimit”></pagination>
</div>
</body>
</html>
app.js (źródło: https://gist.github.com/kmaida/06d01f6b878777e2ea34)
var app = angular.module('myApp', ['ui.bootstrap']);
app.filter('startFrom', function () {
funkcja powrotu (wejście, start) {
jeśli (wejście) {
początek = +start;
return input.slice(start);
}
powrót [];
};
});
app.controller('PageCtrl', ['$scope', 'filterFilter', function ($scope, filterFilter) {
$zakres.elementy = [{
„nazwisko”: „nazwisko 1”,
"Kategoria": [{
"zarządzanie kategoriami"
}, {
„kategoria”: „biznes”
}],
„oddział”: „Zachód”
}, {
„nazwisko”: „nazwisko 2”,
"Kategoria": [{
„kategoria”: „inżynieria”
}],
„oddział”: „Zachód”
}, {
„nazwisko”: „nazwisko 3”,
"Kategoria": [{
"zarządzanie kategoriami"
}, {
„kategoria”: „inżynieria”
}],
„oddział”: „Zachód”
}, {
„nazwisko”: „nazwisko 4”,
"Kategoria": [{
"zarządzanie kategoriami"
}, {
„kategoria”: „biznes”
}],
„oddział”: „Zachód”
}, {
„nazwisko”: „nazwisko 5”,
"Kategoria": [{
"zarządzanie kategoriami"
}, {
„kategoria”: „biznes”
}],
„oddział”: „Wschód”
}, {
„nazwisko”: „nazwisko 6”,
"Kategoria": [{
"zarządzanie kategoriami"
}, {
„kategoria”: „biznes”
}],
„oddział”: „Wschód”
}, {
„nazwisko”: „nazwisko 7”,
"Kategoria": [{
"zarządzanie kategoriami"
}, {
„kategoria”: „biznes”
}],
„oddział”: „Wschód”
}, {
„nazwisko”: „nazwisko 8”,
"Kategoria": [{
„kategoria”: „biznes”
}],
„oddział”: „Zachód”
}, {
„nazwisko”: „nazwisko 9”,
"Kategoria": [{
"zarządzanie kategoriami"
}, {
„kategoria”: „biznes”
}],
„oddział”: „Wschód”
}, {
„nazwisko”: „nazwisko 10”,
"Kategoria": [{
"zarządzanie kategoriami"
}],
„oddział”: „Wschód”
}, {
„nazwisko”: „nazwisko 11”,
"Kategoria": [{
"zarządzanie kategoriami"
}, {
„kategoria”: „biznes”
}],
„oddział”: „Wschód”
}, {
„nazwisko”: „nazwisko 12”,
"Kategoria": [{
„kategoria”: „inżynieria”
}],
„oddział”: „Zachód”
}, {
„nazwisko”: „nazwisko 13”,
"Kategoria": [{
"zarządzanie kategoriami"
}, {
„kategoria”: „biznes”
}],
„oddział”: „Zachód”
}, {
„nazwisko”: „nazwisko 14”,
"Kategoria": [{
„kategoria”: „inżynieria”
}],
„oddział”: „Wschód”
}, {
„nazwisko”: „nazwisko 15”,
"Kategoria": [{
"zarządzanie kategoriami"
}, {
„kategoria”: „inżynieria”
}],
„oddział”: „Wschód”
}, {
„nazwisko”: „nazwisko 16”,
"Kategoria": [{
"zarządzanie kategoriami"
}],
„oddział”: „Zachód”
}, {
„nazwisko”: „nazwisko 17”,
"Kategoria": [{
"zarządzanie kategoriami"
}],
„oddział”: „Wschód”
}, {
„nazwisko”: „nazwisko 18”,
"Kategoria": [{
„kategoria”: „biznes”
}],
„oddział”: „Zachód”
}, {
„nazwisko”: „nazwisko 19”,
"Kategoria": [{
„kategoria”: „biznes”
}],
„oddział”: „Zachód”
}, {
„nazwisko”: „nazwisko 20”,
"Kategoria": [{
„kategoria”: „inżynieria”
}],
„oddział”: „Wschód”
}, {
„imię”: „Piotr”,
"Kategoria": [{
„kategoria”: „biznes”
}],
„oddział”: „Wschód”
}, {
„imię”: „Frank”,
"Kategoria": [{
"zarządzanie kategoriami"
}],
„oddział”: „Wschód”
}, {
„imię”: „Joe”,
"Kategoria": [{
„kategoria”: „biznes”
}],
„oddział”: „Wschód”
}, {
„imię”: „Ralph”,
"Kategoria": [{
"zarządzanie kategoriami"
}, {
„kategoria”: „biznes”
}],
„oddział”: „Wschód”
}, {
„imię”: „Gina”,
"Kategoria": [{
„kategoria”: „biznes”
}],
„oddział”: „Wschód”
}, {
„imię”: „Sam”,
"Kategoria": [{
"zarządzanie kategoriami"
}, {
„kategoria”: „inżynieria”
}],
„oddział”: „Wschód”
}, {
„imię”: „Britney”,
"Kategoria": [{
„kategoria”: „biznes”
}],
„oddział”: „Zachód”
}];
Wyjaśnienie
Użyty powyżej kod wyświetli nazwiska uczniów w odniesieniu do ich odpowiedniej kategorii lub przedmiotu kształcenia wraz z ich geografią. Funkcja stronicowania Angular JS pozwoli na wymienienie tych szczegółów w formacie tabelarycznym na wielu stronach. W ten sposób sortujesz informacje i sprawiasz, że są bardziej widoczne dla użytkownika. Jest to prawdopodobnie najłatwiejszy sposób na poprawę komfortu użytkowania aplikacji internetowych.
Tak więc, jeśli jesteś programistą internetowym, nie powinieneś opóźniać nauki tego tak skutecznie, jak to możliwe. A z powyższymi argumentami podanymi powyżej, dlaczego AngularJS jest idealnym narzędziem w dzisiejszym świecie technologii, masz wszystkie wyjaśnienia, aby iść dalej!
Jeśli chcesz dowiedzieć się więcej o AngularJS, programowaniu Full-stack, sprawdź Dyplom PG upGrad i IIIT-B w tworzeniu oprogramowania Full-stack, który jest przeznaczony dla pracujących profesjonalistów i oferuje ponad 500 godzin rygorystycznych szkoleń, ponad 9 projektów i zadania, status absolwentów IIIT-B, praktyczne praktyczne projekty zwieńczenia i pomoc w pracy z najlepszymi firmami.