Come ben sappiamo, AngularJS ci fornisce un gran numero di utilità interessanti quando si lavora sullo sviluppo web e mobile, ci sono così tanti vantaggi che ci aiuta a generare grande dinamismo nei nostri progetti web.
Oggi imparerai a creare una tabella dinamica con questo framework con cui puoi manipolare qualsiasi tipo di record che hai nel tuo sviluppo, basta lavorare con moduli separati a seconda delle informazioni che stai gestendo, puoi lavorare tutto questo da qualcosa che è codificato una sola volta. Con esso potrai elencare, filtrare, impaginare, ordinare, creare, modificare ed eliminare le informazioni che hai salvato nel sistema. In questa prima parte ci occuperemo di tutto ciò che riguarda le query (lista, filtro, impaginazione, ordinamento), nella seconda parte ci occuperemo della creazione, modifica ed eliminazione dei record.
Ai suoi tempi abbiamo già fatto un tutorial per creare route inamiche con AngularJS Ngroute. Oggi lo approfondiamo in altri modi. Va inoltre chiarito che è consigliabile avere Conoscenza di AngularJSPoiché alcuni dettagli di questo framework non saranno completamente spiegati, è anche consigliato (non obbligatorio) avere GIT, NPM installato sul nostro sistema poiché lavoreremo con loro in questo tutorial.
Creazione del progetto
Organizziamo prima il nostro progetto con npm, git e bower. Crea la directory del progetto chiamata table-angular, quindi all'interno del progetto usa il comando `git init` per creare il repository e quindi usa il comando `npm init` per creare il file package.json.
Installiamo il nostro server web con il comando `npm install --save-dev express`. Dopo l'installazione creiamo un file chiamato server.js
var express = require('express'); var app = express (); var porta = Numero (process.env.PORT || 3000); app.use (express.static (__ dirname + '/ public')); app.listen (port, function () {console.log ('App avviata da http: // localhost:' + port);}); Ora eseguiamo il comando (Per installare bower):
npm install --save-dev bowerAll'interno della directory root ne creiamo un'altra denominata public, in public creiamo un file index.html. Quindi creiamo una directory all'interno di public chiamata assets, all'interno di questa directory ne creiamo un'altra chiamata js, e in essa creeremo i file app.js, controller.js, servizi.js sì filtri.js. Quindi creiamo una directory chiamata css e all'interno di questa creiamo un file chiamato main.css
Finora il nostro progetto è stato il seguente:
Continuiamo con le nostre librerie da utilizzare. Useremo bower per questo caso, useremo le librerie angular e foundation per dare un po' di stile alla nostra vista. Aggiungeremo anche una libreria chiamata angular-utils-pagination, che ci darà funzionalità con l'impaginazione nel nostro progetto. Prima di installare queste librerie creeremo un file nella nostra directory principale chiamato .bowerrc che ha il compito di dire a bower dove salvare queste librerie.
Maggiori informazioni su ciascuna delle librerie che utilizzeremo:
.Codice Bowerrc
{"directory": "public/asset/bower_components"}Per installare le librerie utilizzeremo i comandi:
- `bower install --save angular`
- `bower install --save Foundation`
- `bower install --save angular-utils-pagination`
Va chiarito che le fondamenta funzionano con jquery e vengono scaricate quando usiamo bower, ma per il nostro progetto non le useremo, cosa che possiamo omettere, nel mio caso le rimuoverò dalla directory bower_components.
Questo è ciò che abbiamo creato finora:
Passiamo ora alla codifica della tabella pivot 😁, iniziamo con index.html, aggiungiamo tutte le librerie di cui abbiamo bisogno.
Tavolo Pivot con JS . AngolareIn controller.js creiamo un controller chiamato TableController che verrà chiamato da index.html
Codice controller.js
angular.module ('table.controller', []) .controller ('TableController', function() {console.log ('Table Controller');}); Per filter.js creiamo solo l'istanza del modulo, per ora:
angular.module ("table.filters", []);Facciamo lo stesso con services.js, creiamo solo l'istanza:
angular.module ("table.services", []);Infine chiamiamo tutti i moduli da app.js.
angular.module ('table', ['angularUtils.directives.dirPagination', 'table.controller', 'table.services', 'table.filters']);E con questo possiamo effettuare la prima esecuzione della nostra applicazione utilizzando il comando:
`nodo server.js`Se utilizziamo lo strumento di sviluppo del browser nella scheda della console possiamo verificare che sia stata stampata la parola Table Controller per indicare che tutto ciò che abbiamo creato finora funziona correttamente.
Aggiunta di servizi
Inizieremo creando i nostri servizi che utilizzeremo. Per il tutorial non ci collegheremo a nessun server remoto, quindi sceglieremo di salvare i record nei nostri file javascript. Useremo tre tipi di registri. Giochi, Articoli e Utenti che non condividono gli stessi campi, ognuno simulerà un servizio indipendente come se provenisse da un API REST, tutto in formato JSON. Se vuoi puoi aggiungere altri campi a questi tre tipi o aggiungerne uno nuovo.
Codice Services.js
.factory ('Users', function () {return {get: function () {var data = [{id: 1, nome:' Juan ', cognome:' Perez '}, {id: 5, nome :' Ana María ', cognome:' Garcia '}, {id: 15, nome:' Alejandro ', cognome:' Magno '}, {id: 18, nome:' Andrea ', cognome:' L '}, {id: 19 , nome: 'Pablo', cognome: 'Gutierrez'}, {id: 8, nome: 'Ana', cognome: 'H'},]; return data;} }}) .factory ('Articoli', function ( ) {return {get: function () {var data = [{id: 20, title: 'Il mio primo articolo', sommario: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'}, {id: 21, titolo: 'Il mio secondo articolo', sommario: 'Lorem ipsum pain sit amet, consectetur adipisicing elit.'}, {Id: 22, titolo: 'Il mio terzo articolo', sommario: ' Lorem ipsum pain sit amet, consectetur adipisicing elit.'} ]; return data;}}}) .factory ('Games', function () {return {get: function () {var data = [{id: 1, title : 'Metroid', genere: 'Azione'}, {id: 2, titolo: 'Zelda', genere: 'Avventura'}, {id: 3, titolo: 'Golden Eye', genere: 'S hooter '}, {id: 4, titolo:' Fifa 2016 ', genere:' Sports'},]; restituire i dati; }}}) Allegheremo anche un altro servizio chiamato Call che si occuperà di chiamare i diversi dati (Utenti, Giochi e Articoli).
.factory ('Call', function ($ injector) {return {get: function (type) {var service = $ injector.get (type); return service.get ();}};}) E infine creeremo un servizio chiamato Persistenza chi sarà incaricato di fare il CRUD delle nostre informazioni. Come avevo già detto all'inizio, in questa prima parte del tutorial faremo solo funzioni di query, quindi verrà utilizzata solo la funzione di elenco, nella seconda parte utilizzeremo il resto.
.factory ('Persistence', function (Call) {return {add: function (type, data) {var Obj = Call.get (type); Obj.push (data);}, list: function (type) {return Call.get (tipo);}, update: funzione (tipo, indice, dati) {var Obj = Call.get (tipo); return Obj [indice] = dati;}, get: funzione (tipo, indice) {var Obj = Call.get (tipo); return Obj [indice];}, destroy: function (tipo, indice) {var Obj = Call.get (tipo); return Obj.splice (indice, 1);}};} ) Dobbiamo aggiungere un servizio che gestirà tutti gli oggetti nella tabella pivot.
.factory ('ObjectService', function () {return {getPropertiesObject: funzione (oggetto) {proprietà var = []; for (proprietà var nell'oggetto) {properties.push (proprietà);} proprietà di ritorno;}, cloneObject: funzione (obj) {if (null === obj || "oggetto"! == typeof obj) {return obj;} var copy = obj.constructor (); for (var attr in obj) {if (obj.hasOwnProperty ( attr)) copy [attr] = obj [attr];} return copy;}, createParamObject: function (obj, parametro, value) {return Object.defineProperty (obj, parametro, {value: value, writable: true, configurable: vero, enumerabile: vero});},}}) Aggiunta di servizi
Creazione del controller
angular.module ('table.controller', []) .controller ('TableController', function ($ scope, $ filter, ObjectService, Persistence) {ITEM_PER_PAGE = 5; $ scope.types = [{value: 'Users', etichetta: 'Utenti'}, {valore: 'Articoli', etichetta: 'Articoli'}, {valore: 'Giochi', etichetta: 'Giochi'}]; $ scope.data = []; $ scope.head = [ ]; // Tipo di dati $ scope.changeData = function () {$ scope.uri = $ scope.type.value; $ scope.data = Persistence.list ($ scope.type.value); $ scope.head = ObjectService .getPropertiesObject ($ scope.data [0]); $ scope.propertiesHead = $ scope.head; $ scope.filter = $ filter ('fieldsSelectFilter') ([ObjectService.cloneObject ($ scope.propertiesHead), ObjectService.cloneObject ( $ scope.head)]);; $ scope.selectFilter = '$'; $ scope.changeFilterTo ();}; // Filtro $ scope.changeFilterTo = function () {$ scope.search = ObjectService.createParamObject ({} , $ scope.selectFilter, '');}; // ***** by $ scope.orderBy = {pedicate: 'nome', reverse: false}; $ scope. ***** = funzione (predicato) {$ scope.orderBy.reverse =! $ scope.orderB y.retromarcia; $ scope.orderBy.predicate = predicato; }; // Impaginazione $ scope.limit = {per_page: ITEM_PER_PAGE}; // Predefinito $ scope.type = $ scope.types [0]; $ scope.changeData (); });Spieghiamo il codice che abbiamo appena aggiunto:- ITEM_PER_PAGE: Si occuperà di gestire il limite dei record da visualizzare per pagina, in questo caso abbiamo indicato che ce ne sono 5 per pagina, quando ci sono più di 5 record apparirà un pager per spostarci, è alto a te per inserire quanti vuoi visualizzare contemporaneamente.
- $ scope.types: Contiene un array con i dati di ogni tipo di dati che manipoleremo nella tabella, funziona in combinazione con changeData.
- $ scope.data: Sarà incaricato di manipolare le informazioni assegnategli in quel momento e di renderle nella tabella dinamica.
- $ scope.head: Sarà l'intestazione della tabella.
Funzioni:
- $ scope.changeData: Sarà incaricato di modificare i dati che abbiamo al momento nella tabella.
- $ scope.changeFilterTo: La sua funzionalità sarà quella di inserire un tipo specifico di filtro durante il filtraggio delle informazioni. Ad esempio: i tipi di filtro dei record utente sarebbero nome e cognome.
- $ ambito *****: Utilizzato per organizzare i dati in base alle colonne delle tabelle. Questa funzione sarà assegnata alla testata delle colonne.
Codice Index.html
DatiFiltroFiltra per {{filtro [1] [$ index]}}
| Modifica Elimina | {{articolo}} |
Codice Filters.js
.filter ('fieldsSelectFilter', function () {return function (data) {data [0] [0] = '$'; data [1] [0] = 'All'; return data;};}) Aggiungiamo il nostro codice CSS per dare alcuni stili alle colonne delle tabelle e al pager. Dobbiamo evidenziare qualcosa di interessante nel CSS, nascondiamo la colonna id dei record poiché questo non è importante visualizzarlo all'utente. Aggiungeremo "icone" alle colonne che indicheranno quando la colonna sta ordinando le informazioni in ordine crescente o decrescente.
Codice principale.css
select option {text-transform: capitalize; } ul.paginazione {larghezza: 25%; margine: 0 automatico; } tabella {larghezza: 100%; } table tr th {text-transform: capitalize; } table tr th: nth-child (1) {width: 150px; } table tr th: nth-child (2), table td: nth-child (2) {display: none; } Th.***** {cursore: puntatore; } i.up: prima, i.down: prima {content: ''; } i.up {top: -5px; trasformare: ruotare (90 gradi); display: blocco in linea; posizione: relativa; } i.down {trasformare: ruotare (90deg); display: blocco in linea; in alto: -5px; posizione: relativa; } tr> td a {margine sinistro: 5px; }Aggiorniamo nuovamente il nostro browser e ora vediamo quanto segue:
INGRANDIRE
[color = # a9a9a9] Clicca sull'immagine per ingrandire [/ color]
Spieghiamo un po' cosa c'è nell'interfaccia. Abbiamo un selettore chiamato dati. Questo sarà ordinato da cambiaDati estrarre le informazioni che abbiamo salvato in servizi.js. Il campo filtro ha il compito di mostrare le informazioni specifiche che indichiamo quando scriviamo in detto campo, e "filtro per" si occupa di dettagliare in base a quale colonna vogliamo filtrare, per impostazione predefinita filtra per TUTTI i campi, puoi clicca anche sulle colonne per organizzarle in ordine decrescente e crescente. Fai le varie prove da parte tua. I campi di modifica ed eliminazione per ora non sono funzionali.
INGRANDIRE
[color = # a9a9a9] Clicca sull'immagine per ingrandire [/ color]
Regole da tenere a mente
Come ogni cosa, devono essere seguite regole rigorose affinché il nostro modulo di tabella dinamica possa funzionare nel modo migliore. Dobbiamo sempre avere un campo id, anche se questo è quasi ovvio quando manipoliamo i record dal nostro database, ma non manca che questa pratica a volte possa passarci. Inoltre, questo campo viene posizionato per primo in ogni record JSON.
Per ora è in attesa come manipolare i dati che provengono da una lista. Ad esempio, il campo del genere nei dati dei Giochi sarebbe in realtà un ID estraneo da un'altra tabella (quando usiamo il concetto di relazione tra entità), formattiamo i campi numerici e le date, creiamo anche intestazioni separate e non dipendono dal nome del campo che proviene direttamente dal registro. Vedremo tutto questo nella parte 2 del tutorial quando avremo bisogno di registrare e aggiornare i dati. Sii attento alle notizie.
Abbiamo terminato la nostra prima parte della tabella pivot. Vedrai quanto ti servirà nei tuoi progetti Angular e non dovrai creare tabelle diverse per manipolare dati diversi, se non che puoi centralizzare tutto con un unico modulo.
Scarica la demo programmata
table-angular.zip 6.63MB 1472 download
