Som vi godt vet, AngularJS gir oss et stort antall interessante verktøy når vi jobber med web- og mobilutvikling, det er så mange fordeler at det hjelper oss å generere stor dynamikk i våre webprosjekter.
I dag vil du lære å lage et dynamisk bord med dette rammeverket som du kan manipulere alle typer poster du har i utviklingen din, nok til å jobbe med separate moduler avhengig av informasjonen du håndterer, du kan jobbe alt dette fra noe som er kodet bare en gang. Med den vil du kunne liste, filtrere, paginere, sortere, opprette, redigere og slette informasjonen du har lagret i systemet. For denne første delen vil vi jobbe med alt som angår spørringer (liste, filtrere, paginere, sortere), i den andre delen skal vi jobbe med oppretting, redigering og eliminering av poster.
I sin tid gjorde vi allerede en opplæring for å lage inamiske ruter med AngularJS Ngroute. I dag går vi helt inn på det på andre måter. Det bør også presiseres at det er lurt å ha AngularJS kunnskapSiden noen detaljer om dette rammeverket ikke vil bli fullstendig forklart, anbefales det også (ikke obligatorisk) å ha GIT, NPM installert på systemet vårt, siden vi vil jobbe med dem i denne opplæringen.
Oppretter prosjekt
La oss først organisere prosjektet vårt med npm, git og bower. Lag prosjektkatalogen kalt table-angular, deretter bruker du kommandoen 'git init' for å opprette depotet, og deretter bruke kommandoen 'npm init' til å lage filen package.json.
Vi installerer vår webserver med kommandoen `npm install --save-dev express`. Etter installasjonen lager vi en fil som heter server.js
var express = require ('express'); var app = express (); var port = Number (prosess.env.PORT || 3000); app.use (express.static (__ dirname + '/ public')); app.listen (port, function () {console.log ('App startet på http: // localhost:' + port);}); Nå utfører vi kommandoen (For å installere bower):
npm install-save-dev bowerInne i rotkatalogen oppretter vi en annen som kalles public, offentlig lager vi en index.html -fil. Deretter oppretter vi en katalog inne i publikum kalt eiendeler, inne i denne katalogen lager vi en annen som heter js, og i den vil vi lage app.js -filene, controller.js, services.js Y filtre.js. Deretter oppretter vi en katalog som heter css, og i denne oppretter vi en fil som heter main.css
Så langt går vårt prosjekt som følger:
Vi fortsetter med bibliotekene våre å bruke. Vi vil bruke bower for denne saken, vi vil bruke vinkel- og fundamentbibliotekene for å gi vårt syn litt stil. Vi vil også legge til et bibliotek kalt angular-utils-pagination, som vil gi oss funksjonalitet med paginering i prosjektet vårt. Før du installerer disse bibliotekene, vil vi lage en fil i rotkatalogen vår som heter .bowerrc som har ansvaret for å fortelle bower hvor de skal lagre disse bibliotekene.
Mer informasjon om hvert av bibliotekene vi skal bruke:
.Bowerrc -kode
{"directory": "public / assets / bower_components"}For å installere bibliotekene bruker vi kommandoene:
- `installere bower -lagre vinkel`
- `installere bower -lagre fundament`
- `bower install-lagre vinkel-utils-paginering`
Det bør presiseres at foundation fungerer med jquery og de lastes ned når vi bruker bower, men for prosjektet vårt vil vi ikke bruke dem, som vi kan utelate dem, i mitt tilfelle vil jeg fjerne dem fra bower_components -katalogen.
Dette er det vi har laget så langt:
Vi passerer nå koding av pivottabellen 😁, vi starter med index.html, vi legger til alle bibliotekene vi trenger.
Pivottabell med kantet JSI controller.js lager vi en kontroller kalt TableController som vil bli kalt fra index.html
Controller.js -kode
angular.module ('table.controller', []) .controller ('TableController', function () {console.log ('Table Controller');}); For filter.js oppretter vi bare modulinstansen, foreløpig:
angular.module ('tabell.filtre', []);Vi gjør det samme med services.js, vi lager bare forekomsten:
angular.module ('tabell.tjenester', []);Til slutt kaller vi alle modulene fra app.js.
angular.module ('table', ['angularUtils.directives.dirPagination', 'table.controller', 'table.services', 'table.filters']);Og med dette kan vi gjøre den første kjøringen av applikasjonen vår ved å bruke kommandoen:
`node server.js`Hvis vi bruker nettleserutviklerverktøyet i konsollfanen, kan vi bekrefte at ordet Table Controller er skrevet ut for å indikere at alt vi har opprettet så langt fungerer som det skal.
Legger til tjenester
Vi starter med å lage våre tjenester som vi skal bruke. For opplæringen kommer vi ikke til å koble til noen ekstern server, så vi vil velge å lagre postene i våre javascript -filer. Vi vil bruke tre typer registre. Spill, artikler og brukere som ikke deler de samme feltene, vil alle simulere en uavhengig tjeneste som om den kom fra en REST API, alt i JSON -format. Hvis du vil, kan du legge til andre felt i disse tre typene eller legge til en ny.
Services.js -kode
.factory ('Users', function () {return {get: function () {var data = [{id: 1, fornavn: 'Juan', etternavn: 'Perez'}, {id: 5, fornavn : 'Ana María', etternavn: 'Garcia'}, {id: 15, fornavn: 'Alejandro', etternavn: 'Magno'}, {id: 18, fornavn: 'Andrea', etternavn: ' L '}, {id: 19, fornavn:' Pablo ', etternavn:' Gutierrez '}, {id: 8, fornavn:' Ana ', etternavn:' H '},]; returnere data;} }}) .factory ('Artikler', funksjon () {return {get: function () {var data = [{id: 20, tittel: 'Min første artikkel', sammendrag: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. '}, {id: 21, tittel:' Min andre artikkel ', sammendrag:' Lorem ipsum pain sit amet, consectetur adipisicing elit. '}, {Id: 22, title:' Min tredje artikkel ', sammendrag:' Lorem ipsum pain sit amet, consectetur adipisicing elit. '}]; Return data;}}}) .factory (' Games ', function () {return {get: function () {var data = [{id: 1, title : 'Metroid', sjanger: 'Action'}, {id: 2, tittel: 'Zelda', sjanger: 'Adventure'}, {id: 3, tittel: 'Golden Eye', sjanger: 'S hooter '}, {id: 4, title:' Fifa 2016 ', sjanger:' Sports '},]; returnere data; }}}) Vi vil også legge ved en annen tjeneste som heter Call, som har ansvaret for å ringe de forskjellige dataene (brukere, spill og artikler).
.factory ('Call', function ($ injector) {return {get: function (type) {var service = $ injector.get (type); return service.get ();}};}) Og til slutt vil vi lage en tjeneste som heter Persistence hvem som skal stå for ULIK av vår informasjon. Som jeg allerede hadde sagt i begynnelsen, vil vi bare gjøre spørringsfunksjoner i denne første delen av opplæringen, så bare listefunksjonen vil bli brukt, i den andre delen vil vi bruke resten.
.factory ('Persistence', function (Call) {return {add: function (type, data) {var Obj = Call.get (type); Obj.push (data);}, list: function (type) {return Call.get (type);}, oppdatering: function (type, indeks, data) {var Obj = Call.get (type); returner Obj [index] = data;}, get: function (type, indeks) {var Obj = Call.get (type); return Obj [index];}, destroy: function (type, index) {var Obj = Call.get (type); return Obj.splice (index, 1);}};} ) Vi må legge til en tjeneste som håndterer alle objektene i pivottabellen.
.factory ('ObjectService', function () {return {getPropertiesObject: function (object) {var properties = []; for (var property in object) {properties.push (property);} return properties;}, cloneObject: function (obj) {if (null === obj || "object"! == 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, parameter, value) {return Object.defineProperty (obj, parameter, {value: value, writable: true, configable: true, enumerable: true});},}}) Legger til tjeneste
Oppretter kontroller
angular.module ('table.controller', []) .controller ('TableController', funksjon ($ scope, $ filter, ObjectService, Persistence) {ITEM_PER_PAGE = 5; $ scope.types = [{value: 'Users', label: 'Users'}, {value: 'Articles', label: 'Articles'}, {value: 'Games', label: 'Games'}]; $ scope.data = []; $ scope.head = [ ]; // Datatype $ 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 ();}; // Filtrere $ scope.changeFilterTo = function () {$ scope.search = ObjectService.createParamObject ({}} , $ scope.selectFilter, '');}; // ***** etter $ scope.orderBy = {pedicate: 'name', reverse: false}; $ scope. ***** = function (predicate) {$ scope.orderBy.reverse =! $ scope.orderB y.revers; $ scope.orderBy.predicate = predikat; }; // Paginering $ scope.limit = {per_page: ITEM_PER_PAGE}; // Standard $ scope.type = $ scope.types [0]; $ scope.changeData (); });La oss forklare koden vi nettopp la til litt:- ITEM_PER_PAGE: Det vil være ansvarlig for å administrere grensen for postene som skal vises per side, i dette tilfellet har vi angitt at det er 5 per side, når det er mer enn 5 poster en personsøker vil vises for å flytte oss rundt, er det opp til deg for å plassere hvor mange du vil se samtidig.
- $ scope. typer: Den inneholder en matrise med dataene for hver type data som vi vil manipulere i tabellen, den fungerer i forbindelse med changeData.
- $ scope.data: Den vil være ansvarlig for å manipulere informasjonen som ble tildelt den den gang og gjengis i den dynamiske tabellen.
- $ scope.head: Det blir overskriften på tabellen.
Funksjoner:
- $ scope.changeData: Det vil være ansvarlig for å endre dataene vi har for øyeblikket i tabellen.
- $ scope.changeFilterTo: Dens funksjonalitet vil være å sette en bestemt type filter når du filtrerer informasjonen. For eksempel: Brukeroppføringer filtertyper vil være for- og etternavn.
- $ omfang. *****: Brukes til å organisere dataene etter kolonnene i tabellene. Denne funksjonen vil bli tilordnet hodet til kolonnene.
Index.html -kode
DataFilterFiltrer etter {{filter [1] [$ index]}}
| Rediger Slett | {{punkt}} |
Filters.js -kode
.filter ('fieldsSelectFilter', function () {return function (data) {data [0] [0] = '$'; data [1] [0] = 'All'; return data;};}) Vi legger til vår CSS -kode for å gi noen stiler til kolonnene i tabellene og til personsøkeren. Vi må markere noe interessant i CSS, la oss skjule ID -kolonnen i postene siden dette ikke er viktig å visualisere det for brukeren. Vi vil legge til "ikoner" i kolonnene som angir når kolonnen sorterer informasjonen i stigende eller synkende rekkefølge.
Main.css -kode
velg alternativet {text-transform: capitalize; } ul.pagination {bredde: 25%; margin: 0 auto; } tabell {bredde: 100%; } tabell tr {tekst-transform: store bokstaver; } tabell tr th: nth-child (1) {bredde: 150px; } tabell tr th: nth-barn (2), tabell td: nth-child (2) {display: none; } th. ***** {markør: peker; } i.up: før, i.down: før {content: ''; } i.up {topp: -5px; transform: roter (90deg); display: inline-block; posisjon: slektning; } i.down {transform: roter (90deg); display: inline-block; topp: -5px; posisjon: slektning; } tr> td a {margin-venstre: 5px; }Vi oppdaterer nettleseren vår igjen og ser nå følgende:
FORSTØRRE
[color = # a9a9a9] Klikk på bildet for å forstørre [/ color]
La oss forklare litt hva som er i grensesnittet. Vi har en velger som heter data. Dette vil bli bestilt av changeData trekk ut informasjonen vi har lagret i services.js. Filterfeltet har ansvaret for å vise den spesifikke informasjonen som vi angir når vi skriver i feltet, og "filtrer etter" er ansvarlig for å detaljere etter hvilken kolonne vi vil filtrere, som standard filtreres den etter ALLE feltene, du kan klikk også på kolonnene for å organisere dem synkende og stigende. Gjør de forskjellige testene fra din side. Redigerings- og slettingsfeltene er foreløpig ikke funksjonelle.
FORSTØRRE
[color = # a9a9a9] Klikk på bildet for å forstørre [/ color]
Regler å huske på
Som alt må strenge regler følges slik at vår dynamiske bordmodul kan fungere på den beste måten. Vi må alltid ha et id -felt, selv om dette er nesten åpenbart når vi manipulerer poster fra databasen vår, men det mangler ikke at denne praksisen noen ganger kan gå forbi oss. Dette feltet er også plassert først i hver JSON -post.
For nå venter det hvordan man manipulerer dataene som kommer fra en liste. For eksempel vil kjønnsfeltet i spilldata faktisk være fremmed ID fra en annen tabell (når vi bruker konseptet enhet-forhold), formatere de numeriske feltene og datoene, også opprette separate overskrifter og ikke avhenge av navnet på feltet som kommer direkte fra registret. Vi vil se alt dette i del 2 av opplæringen når vi trenger å registrere og oppdatere data. Vær oppmerksom på nyhetene.
Vi har fullført vår første del av svingbordet. Du vil se hvor mye det vil tjene deg i dine Angular -prosjekter og slippe å lage forskjellige tabeller for å manipulere forskjellige data, hvis ikke at du kan sentralisere alt med en enkelt modul.
Last ned planlagt demo
table-angular.zip 6,63 MB 1472 Nedlastinger
