Cum se implementează paginarea în Angular JS? [Cu exemplu practic]
Publicat: 2020-04-20Înainte de a trece la înțelegerea modului în care funcționează paginarea în Angular JS și cum este implementată în acel cadru, să o luăm pas cu pas și să începem prin a discuta despre Angular JS și paginarea în general.
Cuprins
Ce este Angular JS?
Angular JS este printre cele mai preferate cadre structurale pentru crearea de aplicații web dinamice. Permite dezvoltatorilor să folosească HTML ca limbaj de șablon și chiar permite extinderea sintaxei HTML pentru a permite exprimarea clară și concisă a diferitelor componente ale unei aplicații web.
Vine cu injecție de dependență și capabilități de legare a datelor pentru a elimina o mare parte a codului care trebuie scris de dezvoltatori. Toate acestea au loc în interiorul browserului, făcând din Angular JS un cadru care poate fi utilizat convenabil cu aproape orice tehnologie de server.
Angular JS este un cadru open-source care are mai multe asemănări cu JavaScript. Este folosit mai ales de dezvoltatori pentru dezvoltarea de aplicații care trebuie să-și afișeze tot conținutul, textul și grafica într-o singură pagină. Cu toate acestea, acest lucru nu înseamnă, în niciun fel, că nu poate fi folosit pentru a crea aplicații cu mai multe pagini.
Vom explica în această postare cum paginarea ajută la împărțirea conținutului în mai multe pagini, fără a afecta fluxul și navigarea printre alți factori. Este un cadru de controler pentru vizualizarea modelului atât de popular pe tot globul din două motive foarte importante - este bazat pe Google și este întotdeauna ținut la curent cu cele mai recente tendințe de dezvoltare. Să ne concentrăm acum pe paginare.
Citiți: Întrebări și răspunsuri la interviu AngularJS
Ce este paginarea?
După cum am făcut aluzie puțin mai devreme în articol, toate site-urile web nu își pot afișa toate informațiile pe o singură pagină. În timp ce o singură pagină este într-adevăr alegerea preferată, utilizarea mai multor pagini în situațiile în care un site web cu o singură pagină nu este o opțiune poate oferi mai multe beneficii, inclusiv navigare ușoară pe site, experiență îmbunătățită a utilizatorului și altele.
Toate site-urile web, în special site-urile de comerț electronic precum Flipkart, nu își pot lista toate produsele și nu pot afișa toate informațiile necesare pe o singură pagină. Aici intervine paginarea. Permite ca conținutul, sub formă de text, imagini și multe altele, să fie împărțit în mai multe pagini, dacă este necesar. Aflați mai multe despre utilizarea AngularJS pentru dezvoltarea web.
Există mai multe scenarii în care paginarea este foarte utilă. Dacă site-ul dvs. web conține cantități uriașe de informații, inclusiv bloguri, grafice sau diagrame referitoare la o categorie similară sau la un set de date similar, puteți împărți aceste informații utilizând paginarea și îmbunătățiți navigarea și lizibilitatea.
Paginare în Angular JS
Există mai multe moduri de afișare a datelor pe un site web sau pe orice aplicație web. Listele și tabelele sunt cele mai comune elemente pe care majoritatea oamenilor le folosesc pentru a afișa informații care sunt ușor de citit și de înțeles. În aplicațiile Angular, caracteristica ng-repeat este utilizată pentru a afișa informații în liste sau tabele. Cu toate acestea, acest lucru funcționează numai atunci când datele afișate nu sunt prea mari. Pentru seturi de date mai mari, funcții precum sortarea, căutarea și paginarea fac tabelele și listele mai ușor de gestionat, iar aplicațiile mai ușor de utilizat.
Paginarea JS unghiulară poate părea mai dificilă decât paginarea în Laravel, Code PHP și alte cadre pentru persoanele care nu cunosc foarte bine abordarea de implementare care trebuie urmată. Puteți utiliza paginarea împreună cu funcțiile de căutare și sortare pentru listarea înregistrărilor într-un format ușor de navigat și ușor de citit.
Puteți utiliza biblioteci unghiulare terță parte pentru a acoperi liste simple în mai multe pagini cu funcții de sortare și căutare. Cea mai preferată bibliotecă terță parte în acest scop este dirPagination. Această bibliotecă este ușor accesibilă și foarte ușor de utilizat. Poate fi folosit pentru versiunile unghiulare mai mici decât unghiul 2. Dacă utilizați unghiul 2, veți separa componentele disponibile în biblioteca internă pentru a adăuga sortare, căutare și paginare.
Dacă doriți să afișați mai mult de 200 de înregistrări și utilizați, de exemplu, angular 1.4, veți găsi că biblioteca dirPagination este mai rapidă decât alte astfel de biblioteci și, de asemenea, cu performanță ridicată. Este o bibliotecă plug-n-play care nu are nevoie de controlerul Angular JS pentru a rula nicio logică sau a configura o comandă. În plus, funcționează bine și cu Bootstrap.
Paginare în Angular JS cu Exemplu
Iată un cod pentru a afișa paginarea în Angular JS.
Sursa : ( https://gist.github.com/kmaida/06d01f6b878777e2ea34 )
<!DOCTYPE HTML>
<html lang="en” ng-app="myApp”>
<cap>
<meta charset="utf-8″>
<title>Paginare dinamică cu filtrare</title>
<meta name="viewport” content="width=device-width, initial-scale=1.0″>
<meta name="description” content="”>
<meta name="author” content="Kim Maida”>
<!– JS Libraries –>
<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>
<!– Scripturi unghiulare –>
<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” />
</cap>
<corp>
<div ng-controller="PageCtrl">
<div ng-controller="PageCtrl">
<label>Căutare:</label> <input type=”text” ng-model=”search.name” placeholder=”Căutare” />
<br />
<label>Filtrați după categorie:</label>
<ul>
<li><a href="” ng-click="search.category='engineering'”>Inginerie</a></li>
<li><a href="” ng-click="search.category='management'”>Management</a></li>
<li><a href="” ng-click="search.category='business'”>Afaceri</a></li>
</ul>
<label>Filtrați după ramură:</label>
<ul>
<li><a href="” ng-click="search.branch='West'”>Vest</a></li>
<li><a href="” ng-click="search.branch='East'”>Est</a></li>
</ul>
<p><strong><a href="” ng-click="resetFilters()”>Afișați toate</a></strong></p>
<h1>Articole</h1>
<ul>
<li ng-repeat="articol în filtrat = articole | filtru:căutare | 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>
</corp>
</html>
app.js (Sursa: https://gist.github.com/kmaida/06d01f6b878777e2ea34)
var app = angular.module('myApp', ['ui.bootstrap']);
app.filter('startFrom', function () {
funcția return (input, start) {
dacă (intrare) {
start = +start;
return input.slice(start);
}
întoarcere [];
};
});
app.controller('PageCtrl', ['$scope', 'filterFilter', function ($scope, filterFilter) {
$scope.items = [{
„nume”: „nume 1”,
„categorie”: [{
„categorie”: „management”
}, {
„categorie”: „afacere”
}],
„ramură”: „Vest”
}, {
„nume”: „nume 2”,
„categorie”: [{
„categorie”: „inginerie”
}],
„ramură”: „Vest”
}, {
„nume”: „nume 3”,
„categorie”: [{
„categorie”: „management”
}, {
„categorie”: „inginerie”
}],
„ramură”: „Vest”
}, {
„nume”: „nume 4”,
„categorie”: [{
„categorie”: „management”
}, {
„categorie”: „afacere”
}],
„ramură”: „Vest”
}, {
„nume”: „nume 5”,
„categorie”: [{
„categorie”: „management”
}, {
„categorie”: „afacere”
}],
„ramură”: „Est”
}, {
„nume”: „nume 6”,
„categorie”: [{
„categorie”: „management”
}, {
„categorie”: „afacere”
}],
„ramură”: „Est”
}, {
„nume”: „nume 7”,
„categorie”: [{
„categorie”: „management”
}, {
„categorie”: „afacere”
}],
„ramură”: „Est”
}, {
„nume”: „nume 8”,
„categorie”: [{
„categorie”: „afacere”
}],
„ramură”: „Vest”
}, {
„nume”: „nume 9”,
„categorie”: [{
„categorie”: „management”
}, {
„categorie”: „afacere”
}],
„ramură”: „Est”
}, {
„nume”: „nume 10”,
„categorie”: [{
„categorie”: „management”
}],
„ramură”: „Est”
}, {
„nume”: „nume 11”,
„categorie”: [{
„categorie”: „management”
}, {
„categorie”: „afacere”
}],
„ramură”: „Est”
}, {
„nume”: „nume 12”,
„categorie”: [{
„categorie”: „inginerie”
}],
„ramură”: „Vest”
}, {
„nume”: „nume 13”,
„categorie”: [{
„categorie”: „management”
}, {
„categorie”: „afacere”
}],
„ramură”: „Vest”
}, {
„nume”: „nume 14”,
„categorie”: [{
„categorie”: „inginerie”
}],
„ramură”: „Est”
}, {
„nume”: „nume 15”,
„categorie”: [{
„categorie”: „management”
}, {
„categorie”: „inginerie”
}],
„ramură”: „Est”
}, {
„nume”: „nume 16”,
„categorie”: [{
„categorie”: „management”
}],
„ramură”: „Vest”
}, {
„nume”: „nume 17”,
„categorie”: [{
„categorie”: „management”
}],
„ramură”: „Est”
}, {
„nume”: „nume 18”,
„categorie”: [{
„categorie”: „afacere”
}],
„ramură”: „Vest”
}, {
„nume”: „nume 19”,
„categorie”: [{
„categorie”: „afacere”
}],
„ramură”: „Vest”
}, {
„nume”: „nume 20”,
„categorie”: [{
„categorie”: „inginerie”
}],
„ramură”: „Est”
}, {
„nume”: „Petru”,
„categorie”: [{
„categorie”: „afacere”
}],
„ramură”: „Est”
}, {
„nume”: „Frank”,
„categorie”: [{
„categorie”: „management”
}],
„ramură”: „Est”
}, {
„nume”: „Joe”,
„categorie”: [{
„categorie”: „afacere”
}],
„ramură”: „Est”
}, {
„nume”: „Ralph”,
„categorie”: [{
„categorie”: „management”
}, {
„categorie”: „afacere”
}],
„ramură”: „Est”
}, {
„nume”: „Gina”,
„categorie”: [{
„categorie”: „afacere”
}],
„ramură”: „Est”
}, {
„nume”: „Sam”,
„categorie”: [{
„categorie”: „management”
}, {
„categorie”: „inginerie”
}],
„ramură”: „Est”
}, {
„nume”: „Britney”,
„categorie”: [{
„categorie”: „afacere”
}],
„ramură”: „Vest”
}];
Explicaţie
Codul folosit mai sus va afișa numele elevilor în raport cu categoria sau materia respectivă de educație, împreună cu geografia lor. Caracteristica de paginare Angular JS va permite ca aceste detalii să fie menționate într-un format tabelar, pe mai multe pagini. Acesta este modul în care sortați informațiile și le faceți mai prezentabile pentru utilizator. Acesta este probabil cel mai simplu mod de a îmbunătăți experiența utilizatorului pentru aplicațiile dvs. web.
Deci, dacă sunteți un dezvoltator web, nu ar trebui să întârziați învățarea acestuia cât de eficient poate. Și cu argumentele de mai sus prezentate mai sus cu privire la motivul pentru care AngularJS este un instrument ideal în lumea tehnologiei de astăzi, aveți toate explicațiile pentru a merge mai departe!
Dacă sunteți interesat să aflați mai multe despre AngularJS, dezvoltare full-stack, consultați UpGrad & IIIT-B PG Diploma în Full-stack Software Development, care este concepută pentru profesioniști care lucrează și oferă peste 500 de ore de formare riguroasă, peste 9 proiecte și misiuni, statutul de absolvenți IIIT-B, proiecte practice practice și asistență pentru locuri de muncă cu firme de top.