Šarnīra tabulas ar AngularJS

Kā mēs labi zinām, AngularJS nodrošina mums daudz interesantu utilītu, strādājot pie tīmekļa un mobilo ierīču izstrādes, ir tik daudz priekšrocību, ka tas palīdz mums radīt lielu dinamiku mūsu tīmekļa projektos.

Šodien jūs iemācīsities izveidot dinamisku tabulu, izmantojot šo ietvaru, ar kuru jūs varat manipulēt ar jebkāda veida ierakstiem, kas jums ir jūsu attīstībā, pietiekami, lai strādātu ar atsevišķiem moduļiem atkarībā no jūsu apstrādātās informācijas, un jūs varat to visu izveidot no kaut kā ir kodēts tikai vienu reizi. Ar to jūs varēsit uzskaitīt, filtrēt, lapot, kārtot, izveidot, rediģēt un dzēst sistēmā saglabāto informāciju. Šajā pirmajā daļā mēs strādāsim ar visu, kas attiecas uz vaicājumiem (saraksts, filtrs, lapotne, kārtošana), otrajā daļā mēs strādāsim ar ierakstu izveidi, rediģēšanu un likvidēšanu.

Savā laikā mēs jau veicām apmācību, lai izveidotu inamiskus maršrutus ar AngularJS Ngroute. Šodien mēs to pilnībā iedziļināmies citos veidos. Būtu arī jāprecizē, ka tas ir ieteicams AngularJS zināšanasTā kā dažas šīs sistēmas detaļas netiks pilnībā izskaidrotas, ieteicams (nav obligāti) arī mūsu sistēmā instalēt GIT, NPM, jo šajā apmācībā mēs ar viņiem strādāsim.

Projekta izveide

Vispirms organizēsim savu projektu ar npm, git un bower. Izveidojiet projekta direktoriju ar nosaukumu table-angular, pēc tam projekta ietvaros izmantojiet komandu `git init`, lai izveidotu krātuvi, un pēc tam izmantojiet komandu` npm init`, lai izveidotu paketi.json.

Mēs instalējam savu tīmekļa serveri ar komandu `npm install --save-dev express`. Pēc instalēšanas mēs izveidojam failu ar nosaukumu server.js

 var express = pieprasīt ('express'); var app = express (); var port = Skaitlis (process.env.PORT || 3000); app.use (express.static (__ dirname + '/ public')); app.listen (ports, funkcija () {console.log ('Lietotne sākta vietnē http: // localhost:' + ports);}); 

Tagad mēs izpildām komandu (Lai instalētu bower):

 npm instalēt-saglabāt-dev bower

Saknes direktorijā mēs izveidojam citu, ko sauc par publisku, publiski - failu index.html. Tad mēs izveidojam direktoriju publiski sauktos īpašumos, šajā direktorijā mēs izveidojam vēl vienu ar nosaukumu js, un tajā mēs izveidosim failus app.js, kontrolieris.js, services.js Y filters.js. Tad mēs izveidojam direktoriju ar nosaukumu css un tajā izveidojam failu ar nosaukumu galvenais.css

Līdz šim mūsu projekts ir šāds:

Mēs turpinām izmantot mūsu bibliotēkas. Šajā gadījumā mēs izmantosim bower, mēs izmantosim leņķiskās un pamatu bibliotēkas, lai mūsu skatījumam piešķirtu mazliet stilu. Mēs pievienosim arī bibliotēku ar nosaukumu angular-utils-pagination, kas mūsu projektā nodrošinās funkcionalitāti ar lappušu lapām. Pirms šo bibliotēku instalēšanas mēs saknes direktorijā izveidosim failu ar nosaukumu .bowerrc, kas ir atbildīgs par to, lai norādītu bower, kur šīs bibliotēkas saglabāt.

Plašāka informācija par katru no bibliotēkām, kuru mēs izmantosim:

.Bowerrc kods

 {"directory": "public / aktīvi / bower_components"}

Lai instalētu bibliotēkas, mēs izmantosim šādas komandas:

• `bower install --saglabāt leņķisko`
• `bower install -ietaupīt pamatu`
• "bower install --saglabāt angular-utils-pagination"

Jāprecizē, ka pamats darbojas ar jquery un tie tiek lejupielādēti, kad mēs izmantojam bower, bet mūsu projektam mēs tos neizmantosim, ko mēs varam izlaist, manā gadījumā es tos noņemšu no direktorija bower_components.

To mēs esam izveidojuši līdz šim:

Tagad mēs nododam šarnīra tabulas kodēšanu 😁, mēs sākam ar index.html, pievienojam visas nepieciešamās bibliotēkas.

 Pivot tabula ar leņķisko JS 

Vietnē controller.js mēs izveidojam kontrolieri ar nosaukumu TableController, kas tiks izsaukts no index.html

Controller.js kods

 angular.module ('table.controller', []) .controller ('TableController', function () {console.log ('Table Controller');}); 

Vietnei filter.js pagaidām izveidojam tikai moduļa gadījumu:

 angular.module ('table.filters', []);

Mēs darām to pašu ar services.js, mēs vienkārši izveidojam instanci:

 angular.module ('table.services', []);

Visbeidzot mēs izsaucam visus moduļus no app.js.

 angular.module ('table', ['angularUtils.directives.dirPagination', 'table.controller', 'table.services', 'table.filters']);

Un ar to mēs varam pirmo reizi izpildīt savu lietojumprogrammu, izmantojot komandu:

 "mezgls serveris.js"

Ja konsoles cilnē izmantojam pārlūkprogrammas izstrādātāja rīku, mēs varam pārbaudīt, vai vārds Tabulas kontrolieris ir izdrukāts, norādot, ka viss, ko esam izveidojuši, darbojas pareizi.

Pakalpojumu pievienošana

Mēs sāksim, izveidojot savus pakalpojumus, kurus mēs izmantosim. Apmācībai mēs neveidosim savienojumu ar nevienu attālo serveri, tāpēc mēs izvēlēsimies saglabāt ierakstus mūsu javascript failos. Mēs izmantosim trīs veidu reģistrus. Spēles, raksti un lietotāji, kuriem nav vienādu lauku, katrs simulēs neatkarīgu pakalpojumu, it kā tas būtu no REST API, viss JSON formātā. Ja vēlaties, varat šiem trim veidiem pievienot citus laukus vai pievienot jaunu.
Services.js kods

 .factory ('Lietotāji', funkcija () {return {get: function () {var data = [{id: 1, vārds: 'Juan', uzvārds: 'Perez'}, {id: 5, vārds : 'Ana Marija, uzvārds:' Garsija '}, {id: 15, vārds:' Alehandro ', uzvārds:' Magno '}, {id: 18, vārds:' Andrea ', uzvārds:' L '}, {id: 19, vārds:' Pablo ', uzvārds:' Gutierrez '}, {id: 8, vārds:' Ana ', uzvārds:' H '},]; atgriešanās dati;} }}) .factory ('Raksti', funkcija () {return {get: function () {var data = [{id: 20, title: 'Mans pirmais raksts', kopsavilkums: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. '}, {id: 21, title:' Mans otrais raksts ', kopsavilkums:' Lorem ipsum pain sit amet, consectetur adipisicing elit. '}, {Id: 22, title:' Mans trešais raksts ', kopsavilkums:' Lorem ipsum pain sit amet, consectetur adipisicing elit. '}]; Atgriezt datus;}}}) .factory (' Spēles ', funkcija () {return {get: function () {var data = [{id: 1, title : 'Metroid', žanrs: 'Action'}, {id: 2, title: 'Zelda', žanrs: 'Adventure'}, {id: 3, title: 'Zelta acs', žanrs: 'S hooter '}, {id: 4, title:' Fifa 2016 ', žanrs:' Sports '},]; atgriezt datus; }}}) 

Mēs pievienosim arī citu pakalpojumu Call, kas būs atbildīgs par dažādu datu (lietotāju, spēļu un rakstu) izsaukšanu.

 .factory ('Call', function ($ injector) {return {get: function (type) {var service = $ injector.get (type); return service.get ();}};}) 

Un visbeidzot mēs izveidosim a pakalpojums ar nosaukumu Noturība kurš būs atbildīgs par to izdarīšanu KRUPS no mūsu informācijas. Kā es jau teicu sākumā, šajā apmācības pirmajā daļā mēs veiksim tikai vaicājuma funkcijas, tāpēc tiks izmantota tikai saraksta funkcija, otrajā daļā mēs izmantosim pārējo.

 .factory ('Noturība', funkcija (Zvans) {return {add: function (tips, dati) {var Obj = Call.get (type); Obj.push (data);}, list: function (type) {return Call.get (type);}, update: function (tips, index, data) {var Obj = Call.get (type); return Obj [index] = data;}, get: function (tips, index) {var Obj = Call.get (tips); return Obj [index];}, iznīcināt: function (type, index) {var Obj = Call.get (type); return Obj.splice (index, 1);}};} ) 

Mums jāpievieno pakalpojums, kas apstrādās visus rakurstabulas objektus.

 .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];} atgriezt kopiju;}, createParamObject: function (obj, parametrs, vērtība) {return Object.defineProperty (obj, parametrs, {vērtība: vērtība, rakstāms: patiess, konfigurējams: true, enumerable: true});},}}) 

Pakalpojuma pievienošana

Kontroliera izveide

 angular.module ('table.controller', []) .controller ('TableController', funkcija ($ ulatums, $ filtrs, ObjectService, Persistence) {ITEM_PER_PAGE = 5; $ ulatums.types = [{vērtība: 'Lietotāji', etiķete: 'Lietotāji'}, {value: 'Raksti', iezīme: 'Raksti'}, {vērtība: 'Spēles', iezīme: 'Spēles'}]; $ ulatums.data = []; $ darbības joma.head = [ ]; // Datu tips $ ulatums.changeData = funkcija () {$ darbības joma = $ darbības joma. .getPropertiesObject ($ ulatums.data [0]); $ darbības joma.propertiesHead = $ darbības joma; galvas; $ darbības joma. filtrs = $ filtrs ('fieldsSelectFilter') ([ObjectService.cloneObject ($ ulatums.propertiesHead), ObjectService.cloneObject ( $ ulatums.head)]);; $ darbības joma.selectFilter = '$'; $ diapazons.changeFilterTo ();}; // Filtrēt $ diapazons.changeFilterTo = funkcija () {$ ulatums.search = ObjectService.createParamObject ({} , $ ulatums.selectFilter, '');}; // ***** autors $ ulatums.orderBy = {pedikāts: 'nosaukums', reverss: nepatiess}; $ darbības joma. ***** = funkcija (predikāts) {$ scope.orderBy.reverse =! $ ulatums.orderB y. reverss; $ scope.orderBy.predicate = predikāts; }; // Pagination $ scope.limit = {per_page: ITEM_PER_PAGE}; // Noklusējuma $ ulatums.type = $ darbības joma. Veidi [0]; $ ulatums.changeData (); });

Nedaudz paskaidrosim tikko pievienoto kodu:

• ITEM_PER_PAGE: Tā būs atbildīga par vienā lapā parādāmo ierakstu ierobežojuma pārvaldību, šajā gadījumā mēs esam norādījuši, ka katrā lapā ir pieci, un, ja ir vairāk nekā 5 ieraksti, parādīsies peidžeris, kas mūs pārvietos. lai jūs ievietotu, cik daudz vienlaicīgi vēlaties apskatīt.

• $ ulatums.types: Tajā ir masīvs ar katra veida datu datiem, ar kuriem mēs manipulēsim tabulā, tas darbojas kopā ar changeData.

• $ ulatums.data: Tā būs atbildīga par manipulāciju ar tai laikā piešķirto informāciju, kas tiek atveidota dinamiskajā tabulā.

• $ scope.head: Tas būs tabulas galvene.

Funkcijas:

• $ ulatums.changeData: Tā būs atbildīga par to datu maiņu, kas mums pašlaik ir tabulā.

• $ scope.changeFilterTo: Tās funkcionalitāte būs ievietot noteikta veida filtrus, filtrējot informāciju. Piemēram: Lietotāja ierakstu filtru veidi būtu vārds un uzvārds.

• $ darbības joma. *****: Izmanto, lai sakārtotu datus pēc tabulu kolonnām. Šī funkcija tiks piešķirta kolonnu galvai.

Index.html kods

DatiFiltrētFiltrēt pēc {{filter [1] [$ index]}}
 {{lieta}} 
 
 

 
 
 Rediģēt Dzēst 
 
{{lieta}}
 

 

Mēs pievienojam filtru, kas filtra veida atlasītājam pievienos jaunu lauku, šim laukam būs jāpiemēro filtrs jebkurai mūsu tabulas slejai, kopsavilkumā tas izmanto telpu, kurā atrodas ID lauks, un tiek piešķirts šis jaunais rekvizīts.

Filters.js kods

 .filter ('fieldsSelectFilter', function () {return function (data) {data [0] [0] = '$'; data [1] [0] = 'All'; return data;};}) 

Mēs pievienojam savu CSS kodu, lai tabulu slejās un peidžerā piešķirtu dažus stilus. Mums CSS jāizceļ kaut kas interesants, slēpsim ierakstu id sleju jo nav svarīgi to vizualizēt lietotājam. Mēs kolonnām pievienosim "ikonas", kas norādīs, kad kolonna kārto informāciju augošā vai dilstošā secībā.

Main.css kods

 izvēlieties opciju {text-transform: kapitalizēt; } ul.pagination {platums: 25%; rezerve: 0 auto; } tabula {platums: 100%; } tabula tr th {text-transform: kapitalizēt; } tabula tr th: n-bērns (1) {platums: 150px; } tabula tr th: nth-bērns (2), tabula td: nth-child (2) {display: none; }. ***** {kursors: rādītājs; } i.up: before, i.down: pirms {content: ''; } i.up {top: -5px; pārveidot: pagriezt (90 grādi); displejs: inline-block; stāvoklis: radinieks; } i.lejup {pārveidot: pagriezt (90deg); displejs: inline-block; augšpusē: -5 pikseļi; stāvoklis: radinieks; } tr> td a {margin-left: 5px; }

Mēs vēlreiz atsvaidzinām savu pārlūkprogrammu un tagad redzam sekojošo:

PALIELINĀT

[color = # a9a9a9] Noklikšķiniet uz attēla, lai palielinātu [/ color]

Nedaudz paskaidrosim, kas ir saskarnē. Mums ir atlasītājs ar nosaukumu data. To pasūtīs līdz changeData iegūt informāciju, kuru esam saglabājuši services.js. Filtra lauks ir atbildīgs par to, lai tiktu parādīta konkrētā informācija, ko mēs norādām, rakstot šajā laukā, un "filtrēt pēc" ir atbildīgs par to, pēc kuras slejas mēs vēlamies filtrēt, pēc noklusējuma tas filtrē pēc VISIEM laukiem. noklikšķiniet arī uz kolonnām, lai tās sakārtotu dilstošā un augošā secībā. Veiciet dažādus testus no savas puses. Rediģēšanas un dzēšanas lauki pagaidām nedarbojas.

PALIELINĀT

[color = # a9a9a9] Noklikšķiniet uz attēla, lai palielinātu [/ color]

Noteikumi, kas jāpatur prātā
Tāpat kā viss, ir jāievēro stingri noteikumi, lai mūsu dinamiskā galda modulis varētu darboties vislabākajā veidā. Mums vienmēr ir jābūt ID laukam, lai gan tas ir gandrīz acīmredzami, kad mēs manipulējam ar ierakstiem no mūsu datu bāzes, taču netrūkst, ka šī prakse dažkārt var mums paiet garām. Turklāt šis lauks tiek ievietots pirmajā vietā katrā JSON ierakstā.

Pagaidām tas gaida kā manipulēt ar datiem, kas nāk no saraksta. Piemēram, lauks “Dzimums” spēļu datos faktiski būtu svešs ID no citas tabulas (kad mēs izmantojam entītijas attiecību jēdzienu), formatētu skaitliskos laukus un datumus, izveidotu arī atsevišķas galvenes un nebūtu atkarīgs no tā lauka nosaukuma, nāk tieši no reģistra. To visu mēs redzēsim apmācības 2. daļā, kad mums būs jāreģistrē un jāatjaunina dati. Esiet uzmanīgs ziņām.

Mēs esam pabeiguši pirmo rakurstabulas daļu. Jūs redzēsiet, cik daudz tas jums noderēs jūsu Angular projektos, un jums nevajadzēs izveidot dažādas tabulas, lai manipulētu ar dažādiem datiem, ja ne, ka jūs varat visu centralizēt ar vienu moduli.

Lejupielādējiet plānoto demonstrāciju table-angular.zip 6.63MB 1472 lejupielādes