Kao što dobro znamo, AngularJS pruža nam veliki broj zanimljivih pomoćnih programa pri radu na web i mobilnom razvoju, ima toliko prednosti da nam pomaže u stvaranju velike dinamike u našim web projektima.
Danas ćete naučiti stvarati dinamičku tablicu s ovim okvirom s kojom možete manipulirati bilo kojom vrstom zapisa koje imate u svom razvoju, dovoljno rada s zasebnim modulima ovisno o podacima kojima rukujete, sve to možete raditi iz nečega što kodira se samo jednom. Pomoću njega moći ćete popisati, filtrirati, paginirati, sortirati, stvarati, uređivati i brisati podatke koje ste spremili u sustav. U ovom prvom dijelu radit ćemo sa svime što se tiče upita (popis, filtriranje, paginiranje, sortiranje), u drugom dijelu ćemo raditi na stvaranju, uređivanju i uklanjanju zapisa.
U svoje vrijeme već smo radili vodič za stvaranje inamičkih ruta s AngularJS Ngroute. Danas u potpunosti ulazimo u to na druge načine. Također treba pojasniti da je poželjno imati AngularJS znanjeBudući da neki detalji ovog okvira neće biti u potpunosti objašnjeni, također se preporučuje (nije obavezno) imati GIT, NPM instaliran na našem sustavu jer ćemo s njima raditi u ovom vodiču.
Izrada projekta
Prvo organiziramo naš projekt s npm, git i bower. Izradite direktorij projekta pod nazivom table-angular, a zatim unutar projekta pomoću naredbe `git init` stvorite spremište, a zatim pomoću naredbe` npm init` stvorite datoteku package.json.
Naš web poslužitelj instaliramo naredbom `npm install --save-dev express`. Nakon instalacije stvaramo datoteku pod nazivom server.js
var express = require ('express'); var app = express (); var port = Broj (process.env.PORT || 3000); app.use (express.static (__ dirname + '/ javno')); app.listen (port, function () {console.log ('Aplikacija je pokrenuta na http: // localhost:' + port);}); Sada izvršavamo naredbu (Za instaliranje bower -a):
npm install --save-dev bowerUnutar korijenskog direktorija stvaramo drugi koji se zove javni, u javnosti stvaramo datoteku index.html. Zatim stvaramo direktorij unutar javnog naziva imovina, unutar ovog direktorija stvaramo drugi koji se zove js, a u njemu ćemo stvoriti datoteke app.js, controller.js, services.js Y filters.js. Zatim stvaramo direktorij pod nazivom css i unutar njega stvaramo datoteku pod nazivom main.css
Do sada se naš projekt odvija ovako:
Nastavljamo koristiti naše knjižnice. U ovom slučaju koristit ćemo bower, upotrijebit ćemo kutne i temeljne knjižnice kako bismo našem pogledu dali malo stila. Također ćemo dodati knjižnicu pod nazivom angular-utils-pagination, koja će nam dati funkcionalnost s paginacijom u našem projektu. Prije instaliranja ovih knjižnica stvorit ćemo datoteku u našem korijenskom direktoriju pod nazivom .bowerrc koja je zadužena reći boweru gdje spremiti te knjižnice.
Više informacija o svakoj od knjižnica koje ćemo koristiti:
.Bowerrc kod
{"directory": "public / assets / bower_components"}Za instaliranje knjižnica koristit ćemo naredbe:
- `bower install --save angular`
- `bower install --save foundation`
- `bower install --save angular-utils-pagination`
Treba pojasniti da temelj radi s jqueryjem i preuzimaju se kad koristimo bower, ali za naš projekt ih nećemo koristiti, što možemo izostaviti, u mom slučaju uklonit ću ih iz direktorija bower_components.
Ovo smo do sada stvorili:
Sada prolazimo kodiranje zaokretne tablice 😁, počinjemo s index.html, dodajemo sve potrebne knjižnice.
Zaokretna tablica s kutnim JSU controller.js stvaramo kontroler zvan TableController koji će se pozivati iz index.html
Controller.js kod
angular.module ('table.controller', []) .controller ('TableController', function () {console.log ('Table Controller');}); Za filter.js za sada stvaramo samo instancu modula:
angular.module ('table.filters', []);Isto radimo s services.js, samo stvaramo instancu:
angular.module ('table.services', []);Na kraju pozivamo sve module iz app.js.
angular.module ('table', ['angularUtils.directives.dirPagination', 'table.controller', 'table.services', 'table.filters']);I s ovim možemo izvršiti prvo izvršavanje naše aplikacije pomoću naredbe:
`čvor server.js`Ako upotrijebimo alat za razvoj programera preglednika na kartici konzole, možemo provjeriti je li riječ Kontroler tablice ispisana kako bi označila da sve što smo do sada stvorili radi ispravno.
Dodavanje usluga
Počet ćemo stvaranjem naših usluga koje ćemo koristiti. Za vodič se nećemo povezati s bilo kojim udaljenim poslužiteljem, pa ćemo izabrati spremanje zapisa u naše javascript datoteke. Koristit ćemo tri vrste registara. Igre, članci i korisnici koji ne dijele ista polja, svaki će simulirati neovisnu uslugu kao da dolazi iz REST API, sve u JSON formatu. Ako želite, možete dodati druga polja u ove tri vrste ili dodati novo.
Services.js kôd
.factory ('Users', function () {return {get: function () {var data = [{id: 1, ime: 'Juan', prezime: 'Perez'}, {id: 5, ime : 'Ana María', prezime: 'Garcia'}, {id: 15, ime: 'Alejandro', prezime: 'Magno'}, {id: 18, ime: 'Andrea', prezime: ' L '}, {id: 19, ime:' Pablo ', prezime:' Gutierrez '}, {id: 8, ime:' Ana ', prezime:' H '},]; vrati podatke;} }}) .factory ('Članci', funkcija () {return {get: function () {var data = [{id: 20, naslov: 'Moj prvi članak', sažetak: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. '}, {id: 21, naslov:' Moj drugi članak ', sažetak:' Lorem ipsum pain sit amet, consectetur adipisicing elit. '}, {Id: 22, naslov:' Moj treći članak ', sažetak:' Lorem ipsum pain sit amet, consectetur adipisicing elit. '}]; Vrati podatke;}}}) .factory (' Igre ', funkcija () {return {get: function () {var data = [{id: 1, title : 'Metroid', žanr: 'Akcija'}, {id: 2, naslov: 'Zelda', žanr: 'Avantura'}, {id: 3, naslov: 'Zlatno oko', žanr: 'S hooter '}, {id: 4, naslov:' Fifa 2016 ', žanr:' Sport '},]; vratiti podatke; }}}) Priložit ćemo i drugu uslugu pod nazivom Call koja će biti zadužena za pozivanje različitih podataka (Korisnici, Igre i Članci).
.factory ('Call', function ($ injector) {return {get: function (type) {var service = $ injector.get (type); return service.get ();}};}) I na kraju ćemo stvoriti usluga pod nazivom Ustrajnost koji će biti zadužen za to ZDRAVO naših informacija. Kao što sam već rekao na početku, u ovom ćemo prvom dijelu vodiča raditi samo funkcije upita, pa će se koristiti samo funkcija popisa, u drugom dijelu ćemo koristiti ostale.
.factory ('Postojanost', funkcija (Poziv) {return {add: function (type, data) {var Obj = Call.get (type); Obj.push (data);}, list: function (type) {return Call.get (type);}, update: function (type, index, data) {var Obj = Call.get (type); return Obj [index] = data;}, get: function (type, index) {var Obj = Poziv.get (tip); vrati Obj [indeks];}, uništi: funkcija (tip, indeks) {var Obj = Poziv.get (tip); vrati Obj.splice (indeks, 1);}};} ) Moramo dodati uslugu koja će rukovati svim objektima u zaokretnoj tablici.
.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)) kopija [attr] = obj [attr];} vrati kopiju;}, createParamObject: funkcija (obj, parametar, vrijednost) {return Object.defineProperty (obj, parametar, {vrijednost: vrijednost, mogućnost pisanja: istina, konfigurabilno: true, enumerable: true});},}}) Dodavanje usluge
Izrada kontrolera
angular.module ('table.controller', []) .controller ('TableController', funkcija ($ scope, $ filter, ObjectService, Persistence) {ITEM_PER_PAGE = 5; $ scope.types = [{vrijednost: 'Korisnici', oznaka: 'Korisnici'}, {vrijednost: 'Članci', oznaka: 'Članci'}, {vrijednost: 'Igre', oznaka: 'Igre'}]; $ scope.data = []; $ scope.head = [ ]; // Vrsta podataka $ 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 ();}; // Filtriraj $ scope.changeFilterTo = function () {$ scope.search = ObjectService.createParamObject ({} , $ scope.selectFilter, '');}; // ***** po $ scope.orderBy = {pedicate: 'name', reverse: false}; $ scope. ***** = function (predikat) {$ scope.orderBy.reverse =! $ scope.orderB y.obrnuto; $ scope.orderBy.predicate = predikat; }; // Paginacija $ scope.limit = {per_page: ITEM_PER_PAGE}; // Zadano $ scope.type = $ scope.types [0]; $ scope.changeData (); });Objasnimo kôd koji smo malo dodali:- ITEM_PER_PAGE: On će biti zadužen za upravljanje ograničenjem broja zapisa koji se prikazuju po stranici, u ovom slučaju smo naznačili da ih ima 5 po stranici, kada postoji više od 5 zapisa pojavit će se pager za kretanje, to je gore da postavite koliko želite istovremeno vidjeti.
- $ scope.types: Sadrži niz s podacima svake vrste podataka kojima ćemo manipulirati u tablici, radi zajedno s changeData.
- $ scope.data: On će biti zadužen za manipuliranje podacima koji su mu u to vrijeme dodijeljeni i koji će se prikazati u dinamičkoj tablici.
- $ scope.head: To će biti zaglavlje tablice.
Funkcije:
- $ scope.changeData: On će biti zadužen za promjenu podataka koje trenutno imamo u tablici.
- $ scope.changeFilterTo: Njegova će funkcionalnost biti stavljanje određene vrste filtera pri filtriranju informacija. Na primjer: Vrste filtera korisničkih zapisa bile bi ime i prezime.
- $ opseg. *****: Koristi se za organiziranje podataka po stupcima tablica. Ova funkcija bit će dodijeljena zaglavlju stupaca.
Index.html kôd
PodacifiltarFiltriraj prema {{filter [1] [$ index]}}
| Uredi Izbriši | {{artikal}} |
Kod Filters.js
.filter ('fieldsSelectFilter', function () {return funkcija (podaci) {data [0] [0] = '$'; data [1] [0] = 'Sve'; vrati podatke;};}) Dodajemo naš CSS kôd kako bismo dali neke stilove stupcima tablica i dojavljivaču. Moramo istaknuti nešto zanimljivo u CSS -u, sakrijmo stupac id zapisa budući da to nije važno vizualizirati korisniku. Stupcima ćemo dodati "ikone" koje će označavati kada stupac razvrstava podatke uzlaznim ili silaznim redoslijedom.
Main.css kôd
odaberite opciju {tekstualna transformacija: velikim slovima; } ul.pagination {width: 25%; marža: 0 auto; } stol {širina: 100%; } tablica tr th {text-transform: capitalize; } tablica tr th: nth-child (1) {width: 150px; } tablica tr th: nth-child (2), table td: nth-child (2) {display: none; } th. ***** {pokazivač: pokazivač; } i.up: before, i.down: before {content: ''; } i.up {top: -5px; transformirati: rotirati (90 stupnjeva); prikaz: inline-block; položaj: relativan; } i. dolje {transformirati: rotirati (90 stepeni); prikaz: inline-block; gore: -5px; položaj: relativan; } tr> td a {margin-left: 5px; }Ponovno smo osvježili preglednik i sada vidimo sljedeće:
POVEĆAJTE
[color = # a9a9a9] Kliknite na sliku za povećanje [/ color]
Objasnimo malo što se nalazi na sučelju. Imamo selektor koji se zove data. Ovo će naručiti changeData izdvojiti podatke u koje smo spremili services.js. Polje za filtriranje zaduženo je za prikazivanje specifičnih informacija koje označimo kada upisujemo u navedeno polje, a "filtriraj prema" je za detalje po stupcu koji želimo filtrirati, prema zadanim postavkama filtrira po SVIM poljima, možete također kliknite na stupce kako biste ih organizirali silazno i uzlazno. Učinite različite testove sa svoje strane. Polja za uređivanje i brisanje za sada nisu funkcionalna.
POVEĆAJTE
[color = # a9a9a9] Kliknite na sliku za povećanje [/ color]
Pravila koja treba imati na umu
Kao i sve, moraju se poštivati stroga pravila kako bi naš modul dinamičke tablice mogao raditi na najbolji način. Uvijek moramo imati polje id, iako je to gotovo očito kada manipuliramo zapisima iz naše baze podataka, ali ne nedostaje da nas ova praksa ponekad može zaobići. Također, ovo polje je prvo mjesto u svakom JSON zapisu.
Za sada je na čekanju kako manipulirati podacima koji dolaze s popisa. Na primjer, polje spola u podacima Igara zapravo bi bilo inozemni ID iz druge tablice (kada koristimo koncept entiteta i odnosa), oblikovalo bi numerička polja i datume, također stvaralo zasebna zaglavlja i ne bi ovisilo o nazivu polja koje dolazi izravno iz registra. Sve ćemo to vidjeti u drugom dijelu vodiča kada budemo trebali snimati i ažurirati podatke. Budite pažljivi prema vijestima.
Završili smo prvi dio zaokretne tablice. Vidjet ćete koliko će vam poslužiti u vašim Angular projektima i ne morate stvarati različite tablice za manipulaciju različitim podacima, ako ne i da sve možete centralizirati s jednim modulom.
Preuzmite zakazani demo
table-angular.zip 6.63MB 1472 preuzimanja
