Come implementare l'impaginazione in Angular JS? [Con esempio pratico]
Pubblicato: 2020-04-20Prima di passare a capire come funziona l'impaginazione in Angular JS e come viene implementata in quel framework, procediamo passo dopo passo e iniziamo discutendo di Angular JS e dell'impaginazione in generale.
Sommario
Cos'è Angular JS?
Angular JS è tra i framework strutturali più preferiti per la creazione di applicazioni web dinamiche. Consente agli sviluppatori di utilizzare l'HTML come linguaggio modello e consente anche l'estensione della sintassi HTML per consentire un'espressione chiara e concisa dei vari componenti di un'applicazione web.
Viene fornito con funzionalità di inserimento delle dipendenze e di associazione dei dati per eliminare gran parte del codice che deve essere scritto dagli sviluppatori. Tutto ciò avviene all'interno del browser, rendendo Angular JS un framework che può essere comodamente utilizzato con quasi tutte le tecnologie server.
Angular JS è un framework open source che condivide diverse somiglianze con JavaScript. Viene utilizzato principalmente dagli sviluppatori per lo sviluppo di applicazioni che devono visualizzare tutto il contenuto, il testo e la grafica in un'unica pagina. Tuttavia, questo non significa, in alcun modo, che non possa essere utilizzato per creare applicazioni multipagina.
Spiegheremo in questo post come l'impaginazione aiuta a dividere il contenuto in più di una pagina senza influenzare il flusso e la navigazione tra altri fattori. È un framework di controller di visualizzazione modello così popolare in tutto il mondo per due motivi molto importanti: è basato su Google ed è sempre aggiornato con le ultime tendenze di sviluppo. Spostiamo ora la nostra attenzione sull'impaginazione.
Leggi: Domande e risposte sull'intervista ad AngularJS
Cos'è l'impaginazione?
Come accennato in precedenza nel pezzo, tutti i siti Web non possono visualizzare tutte le loro informazioni su una singola pagina. Sebbene una singola pagina sia effettivamente la scelta preferita, l'utilizzo di più pagine in situazioni in cui un sito Web a pagina singola non è un'opzione può offrire numerosi vantaggi, tra cui una facile navigazione del sito, una migliore esperienza utente e altri.
Tutti i siti Web, in particolare i siti di e-commerce come Flipkart, non possono elencare tutti i loro prodotti e visualizzare tutte le informazioni necessarie su un'unica pagina. È qui che entra in gioco l'impaginazione. Consente di dividere il contenuto, sotto forma di testo, immagini e altro, in più pagine, se necessario. Ulteriori informazioni sull'utilizzo di AngularJS per lo sviluppo web.
Esistono diversi scenari in cui l'impaginazione è davvero utile. Se il tuo sito Web contiene enormi quantità di informazioni, inclusi blog, grafici o grafici relativi a una categoria o set di dati simili, puoi dividere queste informazioni utilizzando l'impaginazione e migliorare la navigazione e la leggibilità.
Impaginazione in Angular JS
Esistono diversi modi per visualizzare i dati su un sito Web o qualsiasi applicazione Web. Gli elenchi e le tabelle sono gli elementi più comuni utilizzati dalla maggior parte delle persone per visualizzare informazioni di facile lettura e comprensione. Nelle applicazioni angolari, la funzione ng-repeat viene utilizzata per visualizzare le informazioni in elenchi o tabelle. Tuttavia, questo funziona solo quando i dati visualizzati non sono troppo grandi. Per set di dati più grandi, funzionalità come l'ordinamento, la ricerca e l'impaginazione rendono le tabelle e gli elenchi più gestibili e le applicazioni più facili da usare.
L'impaginazione angolare JS può sembrare più difficile dell'impaginazione in Laravel, Code PHP e altri framework per le persone che non sono molto consapevoli dell'approccio di implementazione che deve essere seguito. Puoi utilizzare l'impaginazione insieme alle funzioni di ricerca e ordinamento per elencare i record in un formato facile da navigare e di facile lettura.
Puoi utilizzare librerie angolari di terze parti per coprire semplici elenchi in più pagine con funzionalità di ordinamento e ricerca. La libreria di terze parti preferita per questo scopo è dirPagination. Questa libreria è facilmente accessibile e molto facile da usare. Può essere utilizzato per versioni angolari inferiori a angular 2. Se stai utilizzando angular 2, separerai i componenti disponibili all'interno della libreria interna per aggiungere ordinamento, ricerca e impaginazione.
Se desideri visualizzare più di 200 record e stai utilizzando, ad esempio, angular 1.4, scoprirai che la libreria dirPagination è più veloce di altre librerie simili e anche ad alte prestazioni. È una libreria plug-n-play che non necessita di Angular JS Controller per eseguire alcuna logica o impostare comandi. Inoltre, funziona bene anche con Bootstrap.
Impaginazione in Angular JS con esempio
Ecco un codice per mostrare l'impaginazione in Angular JS.
Fonte : ( https://gist.github.com/kmaida/06d01f6b878777e2ea34 )
<!DOCTYPE HTML>
<html lang="it" ng-app="miaApp">
<testa>
<meta charset="utf-8″>
<title>Impaginazione dinamica con filtro</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta name=”descrizione” contenuto=””>
<meta name=”autore” contenuto=”Kim Maida”>
<!– Librerie 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>
<!– Script angolari –>
<script src="script.js" type="testo/javascript"></script>
<!– Bootstrap –>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
</testa>
<corpo>
<div ng-controller="PageCtrl">
<div ng-controller="PageCtrl">
<label>Cerca:</label> <input type=”text” ng-model=”search.name” placeholder=”Cerca” />
<br />
<label>Filtra per categoria:</label>
<ul>
<li><a href="" ng-click="search.category='engineering'">Ingegneria</a></li>
<li><a href="" ng-click="search.category='management'">Gestione</a></li>
<li><a href="" ng-click="search.category='business'">Affari</a></li>
</ul>
<label>Filtra per ramo:</label>
<ul>
<li><a href="" ng-click="search.branch='Ovest'">Ovest</a></li>
<li><a href="" ng-click="search.branch='Est'">Est</a></li>
</ul>
<p><strong><a href="" ng-click="resetFilters()">Mostra tutto</a></strong></p>
<h1>Articoli</h1>
<ul>
<li ng-repeat=”elemento in filtrato = elementi | filtro:cerca | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit”>{{item.name}}</li>
</ul>
<pagination=”currentPage” max-size=”noOfPages” total-items=”totalItems” items-per-page=”entryLimit”></pagination>
</div>
</corpo>
</html>
app.js (Fonte: https://gist.github.com/kmaida/06d01f6b878777e2ea34)
var app = angular.module('myApp', ['ui.bootstrap']);
app.filter('startFrom', funzione () {
funzione di ritorno (input, inizio) {
se (input) {
inizio = +inizio;
ritorno input.slice(inizio);
}
Restituzione [];
};
});
app.controller('PageCtrl', ['$ scope', 'filterFilter', funzione ($ scope, filterFilter) {
$ ambito.items = [{
“nome”: “nome 1”,
"categoria": [{
"gestione delle categorie"
}, {
“categoria”: “attività”
}],
“ramo”: “Ovest”
}, {
“nome”: “nome 2”,
"categoria": [{
“categoria”: “ingegneria”
}],
“ramo”: “Ovest”
}, {
“nome”: “nome 3”,
"categoria": [{
"gestione delle categorie"
}, {
“categoria”: “ingegneria”
}],
“ramo”: “Ovest”
}, {
“nome”: “nome 4”,
"categoria": [{
"gestione delle categorie"
}, {
“categoria”: “attività”
}],
“ramo”: “Ovest”
}, {
“nome”: “nome 5”,
"categoria": [{
"gestione delle categorie"
}, {
“categoria”: “attività”
}],
“ramo”: “Est”
}, {
“nome”: “nome 6”,
"categoria": [{
"gestione delle categorie"
}, {
“categoria”: “attività”
}],
“ramo”: “Est”
}, {
“nome”: “nome 7”,
"categoria": [{
"gestione delle categorie"
}, {
“categoria”: “attività”
}],
“ramo”: “Est”
}, {
“nome”: “nome 8”,
"categoria": [{
“categoria”: “attività”
}],
“ramo”: “Ovest”
}, {
“nome”: “nome 9”,
"categoria": [{
"gestione delle categorie"
}, {
“categoria”: “attività”
}],
“ramo”: “Est”
}, {
“nome”: “nome 10”,
"categoria": [{
"gestione delle categorie"
}],
“ramo”: “Est”
}, {
“nome”: “nome 11”,
"categoria": [{
"gestione delle categorie"
}, {
“categoria”: “attività”
}],
“ramo”: “Est”
}, {
“nome”: “nome 12”,
"categoria": [{
“categoria”: “ingegneria”
}],
“ramo”: “Ovest”
}, {
“nome”: “nome 13”,
"categoria": [{
"gestione delle categorie"
}, {
“categoria”: “attività”
}],
“ramo”: “Ovest”
}, {
“nome”: “nome 14”,
"categoria": [{
“categoria”: “ingegneria”
}],
“ramo”: “Est”
}, {
“nome”: “nome 15”,
"categoria": [{
"gestione delle categorie"
}, {
“categoria”: “ingegneria”
}],
“ramo”: “Est”
}, {
“nome”: “nome 16”,
"categoria": [{
"gestione delle categorie"
}],
“ramo”: “Ovest”
}, {
“nome”: “nome 17”,
"categoria": [{
"gestione delle categorie"
}],
“ramo”: “Est”
}, {
“nome”: “nome 18”,
"categoria": [{
“categoria”: “attività”
}],
“ramo”: “Ovest”
}, {
“nome”: “nome 19”,
"categoria": [{
“categoria”: “attività”
}],
“ramo”: “Ovest”
}, {
“nome”: “nome 20”,
"categoria": [{
“categoria”: “ingegneria”
}],
“ramo”: “Est”
}, {
“nome”: “Pietro”,
"categoria": [{
“categoria”: “attività”
}],
“ramo”: “Est”
}, {
“nome”: “Frank”,
"categoria": [{
"gestione delle categorie"
}],
“ramo”: “Est”
}, {
“nome”: “Joe”,
"categoria": [{
“categoria”: “attività”
}],
“ramo”: “Est”
}, {
“nome”: “Ralph”,
"categoria": [{
"gestione delle categorie"
}, {
“categoria”: “attività”
}],
“ramo”: “Est”
}, {
“nome”: “Gina”,
"categoria": [{
“categoria”: “attività”
}],
“ramo”: “Est”
}, {
“nome”: “Sam”,
"categoria": [{
"gestione delle categorie"
}, {
“categoria”: “ingegneria”
}],
“ramo”: “Est”
}, {
“nome”: “Britney”,
"categoria": [{
“categoria”: “attività”
}],
“ramo”: “Ovest”
}];
Spiegazione
Il codice utilizzato sopra mostrerà i nomi degli studenti rispetto alla rispettiva categoria o materia di istruzione insieme alla loro geografia. La funzione di impaginazione JS angolare consentirà di menzionare questi dettagli in un formato tabellare, su più pagine. Questo è il modo in cui ordini le informazioni e le rendi più presentabili per l'utente. Questo è probabilmente il modo più semplice per migliorare l'esperienza utente per le tue applicazioni web.
Quindi, se sei uno sviluppatore web, non dovresti ritardare l'apprendimento nel modo più efficiente possibile. E con gli argomenti di cui sopra sul perché AngularJS è uno strumento ideale nel mondo tecnologico di oggi, hai tutte le spiegazioni per andare avanti!
Se sei interessato a saperne di più su AngularJS, lo sviluppo full-stack, dai un'occhiata al diploma PG di upGrad e IIIT-B in sviluppo software full-stack, progettato per i professionisti che lavorano e offre oltre 500 ore di formazione rigorosa, oltre 9 progetti e incarichi, status di Alumni IIIT-B, progetti pratici pratici e assistenza sul lavoro con le migliori aziende.