Som vi godt ved, AngularJS giver os et stort antal interessante værktøjer, når vi arbejder med web- og mobiludvikling, der er så mange fordele, at det hjælper os med at generere stor dynamik i vores webprojekter.
I dag lærer du at oprette en dynamisk tabel med denne ramme, hvormed du kan manipulere enhver form for poster, du har i din udvikling, nok med at arbejde med separate moduler afhængigt af de oplysninger, du håndterer, du kan arbejde alt dette ud fra noget, der er kodet kun én gang. Med det vil du være i stand til at liste, filtrere, paginere, sortere, oprette, redigere og slette de oplysninger, du har gemt i systemet. Til denne første del vil vi arbejde med alt vedrørende forespørgsler (liste, filtrere, paginere, sortere), i den anden del vil vi arbejde med oprettelse, redigering og eliminering af poster.
I sin tid lavede vi allerede en vejledning til at oprette inamiske ruter med AngularJS Ngroute. I dag går vi fuldt ud ind på det på andre måder. Det bør også præciseres, at det er tilrådeligt at have AngularJS videnDa nogle detaljer om denne ramme ikke vil blive forklaret fuldt ud, anbefales det også (ikke obligatorisk) at have GIT, NPM installeret på vores system, da vi vil arbejde med dem i denne vejledning.
Oprettelse af projekt
Lad os først organisere vores projekt med npm, git og bower. Opret projektmappen kaldet table-angular, og brug derefter kommandoen 'git init' til at oprette depotet i projektet, og brug derefter kommandoen 'npm init' til at oprette filen package.json.
Vi installerer vores webserver med kommandoen 'npm install --save-dev express'. Efter installationen opretter vi en fil kaldet server.js
var express = require ('express'); var app = express (); var port = Antal (proces.env.PORT || 3000); app.use (express.static (__ dirname + '/ public')); app.listen (port, funktion () {console.log ('App startede på http: // localhost:' + port);}); Nu udfører vi kommandoen (For at installere bower):
npm install-save-dev bowerInde i rodmappen opretter vi en anden kaldet public, offentligt opretter vi en index.html -fil. Derefter opretter vi en mappe inde i offentligheden kaldet aktiver, inde i denne mappe opretter vi en anden kaldet js, og i den opretter vi app.js -filerne, controller.js, services.js Y filtre.js. Derefter opretter vi et bibliotek kaldet css og inden for dette opretter vi en fil kaldet main.css
Indtil videre går vores projekt som følger:
Vi fortsætter med vores biblioteker at bruge. Vi vil bruge bower til denne sag, vi vil bruge vinkel- og fundamentbibliotekerne til at give vores syn lidt stil. Vi vil også tilføje et bibliotek kaldet angular-utils-pagination, som vil give os funktionalitet med pagination i vores projekt. Inden vi installerer disse biblioteker, vil vi oprette en fil i vores rodmappe kaldet .bowerrc, som er ansvarlig for at fortælle bower, hvor disse biblioteker skal gemmes.
Flere oplysninger om hver af de biblioteker, vi skal bruge:
.Bowerrc -kode
{"directory": "public / assets / bower_components"}For at installere bibliotekerne bruger vi kommandoerne:
- `installer bower -gem vinklet`
- `installer bower -gem fundament '
- `bower installer-gem angular-utils-pagination`
Det skal præciseres, at foundation fungerer med jquery, og de downloades, når vi bruger bower, men til vores projekt vil vi ikke bruge dem, hvilket vi kan udelade dem, i mit tilfælde vil jeg fjerne dem fra bower_components biblioteket.
Dette er, hvad vi har skabt indtil nu:
Vi passerer nu kodning af pivottabellen 😁, vi starter med index.html, vi tilføjer alle de biblioteker, vi har brug for.
Drejebord med kantet JSI controller.js opretter vi en controller kaldet TableController, der vil blive kaldt fra index.html
Controller.js -kode
angular.module ('table.controller', []) .controller ('TableController', funktion () {console.log ('Table Controller');}); For filter.js opretter vi kun modulinstansen for nu:
angular.module ('tabel.filtre', []);Vi gør det samme med services.js, vi opretter bare forekomsten:
angular.module ('tabel.services', []);Endelig kalder vi alle modulerne fra app.js.
angular.module ('table', ['angularUtils.directives.dirPagination', 'table.controller', 'table.services', 'table.filters']);Og med dette kan vi foretage den første udførelse af vores applikation ved hjælp af kommandoen:
`node server.js`Hvis vi bruger browserudviklerværktøjet i konsolfanen, kan vi kontrollere, at ordet Table Controller er blevet udskrevet for at angive, at alt, hvad vi har oprettet indtil videre, fungerer korrekt.
Tilføjelse af tjenester
Vi starter med at oprette vores tjenester, som vi skal bruge. Til selvstudiet vil vi ikke oprette forbindelse til nogen fjernserver, så vi vælger at gemme posterne i vores javascript -filer. Vi vil bruge tre typer registre. Spil, artikler og brugere, der ikke deler de samme felter, vil hver simulere en uafhængig tjeneste, som om den kom fra en REST API, alt i JSON -format. Hvis du vil, kan du tilføje andre felter til disse tre typer eller tilføje en ny.
Services.js -kode
.factory ('Brugere', funktion () {return {get: function () {var data = [{id: 1, fornavn: 'Juan', efternavn: 'Perez'}, {id: 5, fornavn : 'Ana María', efternavn: 'Garcia'}, {id: 15, fornavn: 'Alejandro', efternavn: 'Magno'}, {id: 18, fornavn: 'Andrea', efternavn: ' L '}, {id: 19, fornavn:' Pablo ', efternavn:' Gutierrez '}, {id: 8, fornavn:' Ana ', efternavn:' H '},]; returnér data;} }}) .factory ('artikler', funktion () {return {get: function () {var data = [{id: 20, titel: 'Min første artikel', opsummering: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. '}, {id: 21, title:' My second article ', opsummering:' Lorem ipsum pain sit amet, consectetur adipisicing elit. '}, {Id: 22, title:' My third article ', opsummering:' Lorem ipsum pain sit amet, consectetur adipisicing elit. '}]; Return data;}}}) .factory (' Games ', function () {return {get: function () {var data = [{id: 1, title : 'Metroid', genre: 'Action'}, {id: 2, titel: 'Zelda', genre: 'Adventure'}, {id: 3, titel: 'Golden Eye', genre: 'S hooter '}, {id: 4, title:' Fifa 2016 ', genre:' Sports '},]; returnere data; }}}) Vi vil også vedhæfte en anden service kaldet Call, som skal varetage opkaldet til de forskellige data (brugere, spil og artikler).
.factory ('Call', function ($ injector) {return {get: function (type) {var service = $ injector.get (type); return service.get ();}};}) Og endelig vil vi oprette en service kaldet Persistence hvem der skal stå for URIGT af vores oplysninger. Som jeg allerede havde sagt i begyndelsen, vil vi kun udføre forespørgselsfunktioner i denne første del af selvstudiet, så kun listefunktionen vil blive brugt, i den anden del vil vi bruge 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);}, opdatering: funktion (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 skal tilføje en service, der håndterer alle objekterne 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 || "objekt"! == typeof obj) {return obj;} var copy = obj.constructor (); for (var attr in obj) {if (obj.hasOwnProperty ( attr)) kopi [attr] = obj [attr];} return kopi;}, createParamObject: funktion (obj, parameter, værdi) {return Object.defineProperty (obj, parameter, {værdi: værdi, skrivbar: sand, konfigurerbar: sand, talbar: sand});},}}) Tilføjelse af service
Oprettelse af controller
angular.module ('table.controller', []) .controller ('TableController', funktion ($ scope, $ filter, ObjectService, Persistence) {ITEM_PER_PAGE = 5; $ scope.types = [{værdi: 'Brugere', label: 'Brugere'}, {værdi: 'Artikler', etiket: 'Artikler'}, {værdi: 'Spil', etiket: 'Spil'}]; $ 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 ();}; // Filtrer $ scope.changeFilterTo = funktion () {$ scope.search = ObjectService.createParamObject ({}} , $ scope.selectFilter, '');}; // ***** efter $ scope.orderBy = {pedicate: 'name', reverse: false}; $ scope. ***** = function (predicate) {$ scope.orderBy.reverse =! $ scope.orderB y.revers; $ scope.orderBy.predicate = prædikat; }; // Pagination $ scope.limit = {per_page: ITEM_PER_PAGE}; // Standard $ scope.type = $ scope.types [0]; $ scope.changeData (); });Lad os forklare koden, vi lige tilføjede lidt:- ITEM_PER_PAGE: Det har ansvaret for at styre grænsen for de poster, der skal vises pr. Side, i dette tilfælde har vi angivet, at der er 5 pr. Side, når der er mere end 5 poster, vil en personsøger vise sig at flytte os rundt, det er op til dig for at placere, hvor mange du vil se på samme tid.
- $ scope. typer: Den indeholder en matrix med dataene for hver datatype, som vi vil manipulere i tabellen, den fungerer sammen med changeData.
- $ scope.data: Det vil være ansvarligt for at manipulere de oplysninger, der blev tildelt det på det tidspunkt og blive gengivet i den dynamiske tabel.
- $ scope.head: Det vil være overskriften på tabellen.
Funktioner:
- $ scope.changeData: Det vil være ansvarligt for at ændre de data, vi har i øjeblikket i tabellen.
- $ scope.changeFilterTo: Dens funktionalitet vil være at sætte en bestemt type filter, når informationen filtreres. For eksempel: Brugerposters filtertyper ville være for- og efternavn.
- $ omfang. *****: Bruges til at organisere dataene efter kolonnerne i tabellerne. Denne funktion tildeles kolonnenes hoved.
Index.html kode
DataFilterFiltrer efter {{filter [1] [$ index]}}
| Rediger Slet | {{vare}} |
Filters.js -kode
.filter ('fieldsSelectFilter', function () {return function (data) {data [0] [0] = '$'; data [1] [0] = 'Alle'; return data;};}) Vi tilføjer vores CSS -kode for at give nogle stilarter til kolonnerne i tabellerne og til personsøgeren. Vi skal fremhæve noget interessant i CSS, lad os skjule id -kolonnen i posterne da det ikke er vigtigt at visualisere det for brugeren. Vi tilføjer "ikoner" til kolonnerne, der angiver, hvornår kolonnen sorterer oplysningerne i stigende eller faldende rækkefølge.
Main.css -kode
vælg indstilling {tekst-transform: store bogstaver; } ul.pagination {bredde: 25%; margen: 0 auto; } tabel {bredde: 100%; } tabel tr th {tekst-transform: store bogstaver; } tabel tr th: nth-barn (1) {bredde: 150px; } tabel tr th: nth-barn (2), tabel td: nth-child (2) {display: none; } th. ***** {cursor: pointer; } i.up: før, i.down: før {indhold: ''; } i.up {top: -5px; transformer: roter (90deg); display: inline-blok; position: relativ; } i.down {transform: roter (90deg); display: inline-blok; top: -5px; position: relativ; } tr> td a {margin-venstre: 5px; }Vi opdaterer vores browser igen og ser nu følgende:
FORSTØRRE
[color = # a9a9a9] Klik på billedet for at forstørre [/ color]
Lad os forklare lidt, hvad der er i grænsefladen. Vi har en vælger kaldet data. Dette vil blive bestilt af changeData udtræk de oplysninger, vi har gemt i services.js. Filterfeltet har ansvaret for at vise de specifikke oplysninger, som vi angiver, når vi skriver i feltet, og "filtrer efter" er ansvarlig for at specificere, hvilken kolonne vi vil filtrere, som standard filtreres det efter ALLE felterne, du kan klik også på kolonnerne for at organisere dem faldende og stigende. Lav de forskellige tests fra din side. Redigerings- og sletningsfelterne er i øjeblikket ikke funktionelle.
FORSTØRRE
[color = # a9a9a9] Klik på billedet for at forstørre [/ color]
Regler at huske på
Som alt andet skal strenge regler følges, så vores dynamiske bordmodul kan fungere bedst muligt. Vi skal altid have et id -felt, selvom dette næsten er indlysende, når vi manipulerer poster fra vores database, men det mangler ikke, at denne praksis nogle gange kan gå forbi os. Dette felt placeres også først i hver JSON -post.
For nu venter det hvordan man manipulerer de data, der kommer fra en liste. For eksempel ville kønsfeltet i Spildata faktisk være et fremmed id fra en anden tabel (når vi bruger konceptet enhedsforhold), formatere de numeriske felter og datoer, også oprette separate overskrifter og ikke afhænge af navnet på det felt, kommer direkte fra registreringsdatabasen. Vi ser alt dette i del 2 af selvstudiet, når vi skal registrere og opdatere data. Vær opmærksom på nyhederne.
Vi har afsluttet vores første del af drejebordet. Du vil se, hvor meget det vil tjene dig i dine Angular -projekter og ikke behøver at oprette forskellige tabeller for at manipulere forskellige data, hvis ikke at du kan centralisere alt med et enkelt modul.
Download planlagt demo
table-angular.zip 6,63 MB 1472 Downloads
