Kaip gerai žinome, „AngularJS“ suteikia mums daugybę įdomių paslaugų dirbant kuriant žiniatinklį ir mobiliuosius, yra tiek daug privalumų, kad tai padeda mums sukurti didelį dinamiškumą mūsų interneto projektuose.
Šiandien jūs išmoksite sukurti dinamišką lentelę su šia sistema, su kuria galėsite manipuliuoti bet kokiais jūsų kuriamais įrašais, užteks dirbti su atskirais moduliais, priklausomai nuo jūsų tvarkomos informacijos, ir visa tai galite padaryti iš to, kas yra užkoduotas tik vieną kartą. Su juo galėsite išvardyti, filtruoti, lapuoti, rūšiuoti, kurti, redaguoti ir ištrinti sistemoje išsaugotą informaciją. Šioje pirmoje dalyje mes dirbsime su viskuo, kas susiję su užklausomis (sąrašas, filtras, lapavimas, rūšiavimas), antroje dalyje - su įrašų kūrimu, redagavimu ir pašalinimu.
Savo laikais mes jau padarėme pamoką, kaip sukurti inaminius maršrutus su „AngularJS Ngroute“. Šiandien mes einame į tai visiškai kitais būdais. Taip pat reikėtų paaiškinti, kad patartina turėti AngularJS žiniosKadangi kai kurios šios sistemos detalės nebus išsamiai paaiškintos, taip pat rekomenduojama (neprivaloma), kad mūsų sistemoje būtų įdiegtas GIT, NPM, nes šioje pamokoje dirbsime su jais.
Projekto kūrimas
Pirmiausia organizuokime savo projektą naudodami npm, git ir bower. Sukurkite projekto katalogą, vadinamą table-angular, tada projekto viduje naudokite komandą „git init“, kad sukurtumėte saugyklą, tada naudokite komandą „npm init“, kad sukurtumėte failą „package.json“.
Įdiegiame savo žiniatinklio serverį su komanda `npm install --save-dev express`. Po įdiegimo sukuriame failą pavadinimu server.js
var express = reikalauti ('express'); var app = express (); var port = skaičius (process.env.PORT || 3000); app.use (express.static (__ dirname + '/ public')); app.listen (prievadas, funkcija () {console.log ('Programa paleista adresu http: // localhost:' + uostas);}); Dabar vykdome komandą (Norėdami įdiegti „bower“):
npm įdiegti --save-dev bowerŠakninio katalogo viduje sukuriame kitą viešą, viešai - failą index.html. Tada mes sukuriame katalogą viešai vadinamame išteklyje, šio katalogo viduje sukuriame kitą, vadinamą js, ir jame sukursime failus app.js, valdiklis.js, services.js Y filters.js. Tada sukuriame katalogą pavadinimu css ir jame sukuriame failą pavadinimu pagrindinis.css
Kol kas mūsų projektas vyksta taip:
Mes ir toliau naudojame savo bibliotekas. Šiuo atveju mes naudosime „bower“, mes naudosime kampines ir pamatines bibliotekas, kad suteiktume šiek tiek stiliaus. Mes taip pat pridėsime biblioteką, vadinamą angular-utils-pagination, kuri suteiks mums funkcionalumo su puslapių skaičiavimu mūsų projekte. Prieš diegdami šias bibliotekas, mes sukursime failą savo šakniniame kataloge .bowerrc, kuris yra atsakingas už „bower“ nurodymą, kur išsaugoti šias bibliotekas.
Daugiau informacijos apie kiekvieną biblioteką, kurią ketiname naudoti:
.Bowerrc kodas
{"katalogas": "public / eszközök / bower_components"}Norėdami įdiegti bibliotekas, naudosime šias komandas:
- „bower install -išsaugokite kampinį“
- „bower install -išsaugokite pamatą“
- `bower install-išsaugoti angular-utils-pagination`
Reikėtų patikslinti, kad pamatai veikia su „jquery“ ir jie atsisiunčiami, kai naudojame „bower“, tačiau savo projektui mes jų nenaudosime, o mes galime jų praleisti, mano atveju pašalinsiu juos iš katalogo „bower_components“.
Štai ką mes sukūrėme iki šiol:
Dabar perduodame suvestinės lentelės kodavimą 😁, pradedame nuo index.html, pridedame visas reikalingas bibliotekas.
Pivotinė lentelė su kampiniu JS„Control.js“ sukuriame valdiklį „TableController“, kuris bus iškviestas iš „index.html“
„Controller.js“ kodas
angular.module ('table.controller', []) .controller ('TableController', function () {console.log ('Table Controller');}); Filtrui filter.js kol kas sukuriame tik modulio egzempliorių:
angular.module ('table.filters', []);Mes darome tą patį su services.js, mes tiesiog sukuriame egzempliorių:
angular.module ('table.services', []);Galiausiai iškviečiame visus modulius iš app.js.
angular.module ('table', ['angularUtils.directives.dirPagination', 'table.controller', 'table.services', 'table.filters']);Ir tai mes galime atlikti pirmąjį savo programos vykdymą naudodami komandą:
„mazgas serveris.js“Jei konsolės skirtuke naudojame naršyklės kūrėjo įrankį, galime patikrinti, ar žodis Lentelės valdiklis buvo išspausdintas, kad parodytų, jog viskas, ką iki šiol sukūrėme, veikia tinkamai.
Paslaugų pridėjimas
Pradėsime nuo savo paslaugų, kuriomis ketiname naudotis, kūrimo. Pamokoje nesiruošiame prisijungti prie jokio nuotolinio serverio, todėl įrašus įrašysime į „JavaScript“ failus. Mes naudosime trijų tipų registrus. Žaidimai, straipsniai ir vartotojai, kurie neturi tų pačių laukų, kiekvienas imituos nepriklausomą paslaugą, tarsi ji būtų gauta iš REST API, viskas JSON formatu. Jei norite, prie šių trijų tipų galite pridėti kitų laukų arba pridėti naują.
Services.js kodas
.factory ('Vartotojai', funkcija () {return {get: function () {var data = [{id: 1, vardas: 'Juan', pavardė: 'Perez'}, {id: 5, vardas : 'Ana María', pavardė: 'Garcia'}, {id: 15, vardas: 'Alejandro', pavardė: 'Magno'}, {id: 18, vardas: 'Andrea', pavardė: ' L '}, {id: 19, vardas:' Pablo ', pavardė:' Gutierrez '}, {id: 8, vardas:' Ana ', pavardė:' H '},]; grąžinimo duomenys;} }}) .factory ('Straipsniai', funkcija () {return {get: function () {var data = [{id: 20, title: 'Mano pirmasis straipsnis' ', santrauka:' Lorem ipsum dolor sit amet, consectetur adipisicing elit. '}, {id: 21, title:' Mano antrasis straipsnis ', santrauka:' Lorem ipsum pain sit amet, consectetur adipisicing elit. '}, {Id: 22, title:' Mano trečiasis straipsnis ', santrauka:' Lorem ipsum pain sit amet, secctetur adipisicing elit. '}]; Grąžinti duomenis;}}}) .factory (' Žaidimai ', funkcija () {return {get: function () {var data = [{id: 1, title : „Metroid“, žanras: „Veiksmas“}, {id: 2, title: „Zelda“, žanras: „Nuotykis“}, {id: 3, pavadinimas: „Auksinė akis“, žanras: „S“ hooter '}, {id: 4, title:' Fifa 2016 ', žanras:' Sports '},]; grąžinti duomenis; }}}) Taip pat pridėsime kitą paslaugą, pavadintą „Skambinimas“, kuri bus atsakinga už skirtingų duomenų (naudotojų, žaidimų ir straipsnių) iškvietimą.
.factory ('Call', function ($ injector) {return {get: function (type) {var service = $ injector.get (type); return service.get ();}};}) Ir galiausiai sukursime a paslauga, pavadinta „Persistence“ kas bus atsakingas už tai ŽALIA mūsų informacijos. Kaip jau sakiau pradžioje, šioje pirmoje pamokos dalyje atliksime tik užklausų funkcijas, todėl bus naudojama tik sąrašo funkcija, o antroje - likusias.
.factory ('Persistence', function (Call) {return {add: function (type, data) {var Obj = Call.get (type); Obj.push (data);}, list: function (type) {return Call.get (type);}, update: function (tipas, indeksas, duomenys) {var Obj = Call.get (tipas); return Obj [indeksas] = duomenys;}, get: function (tipas, indeksas) {var Obj = Call.get (type); return Obj [index];}, sunaikinti: function (type, index) {var Obj = Call.get (type); return Obj.splice (index, 1);}};} ) Turime pridėti paslaugą, kuri tvarkys visus suvestinės lentelės 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 || "objektas"! == tipo objektas) {return obj;} var copy = obj.constructor (); for (var attr in obj) {if (obj.hasOwnProperty ( attr)) copy [attr] = obj [attr];} grąžinti kopiją;}, createParamObject: function (obj, parametras, vertė) {return Object.defineProperty (obj, parametras, {value: value, writeable: true, configurable: tiesa, surašoma: tiesa});},}}) Pridedama paslauga
Kuriamas valdiklis
angular.module ('table.controller', []) .controller ('TableController', funkcija ($ diapazonas, $ filter, ObjectService, Persistence) {ITEM_PER_PAGE = 5; $ ulatis.types = [{value: 'Users', etiketė: 'Vartotojai'}, {vertė: 'Straipsniai', etiketė: 'Straipsniai'}, {vertė: 'Žaidimai', etiketė: 'Žaidimai'}]; $ ulatas.data = []; $ taikymo sritis.head = [ ]; // Duomenų tipas $ ulatis.changeData = funkcija () {$ taikymo sritis.uri = $ taikymo sritis. $ $ scope.head)]);; $ ulatas.selectFilter = '$'; $ ulatas.changeFilterTo ();}; // Filtras $ taikymo sritis.changeFilterTo = funkcija () {$ taikymo sritis = ObjectService.createParamObject ({} , $ scope.selectFilter, '');}; // ***** pagal $ ulatą.orderBy = {pedikatas: 'vardas', atvirkštinis: klaidingas}; $ apimtis. ***** = funkcija (predikatas) {$ scope.orderBy.reverse =! $ ulatumas.orderB y. atvirkštinis; $ scope.orderBy.predicate = predikatas; }; // Puslapis $ ulatis.limitas = {per_page: ITEM_PER_PAGE}; // Numatytasis $ ulatis.type = $ apimtis.types [0]; $ scope.changeData (); });Paaiškinkime kodą, kurį ką tik pridėjome:- ITEM_PER_PAGE: Ji bus atsakinga už puslapiuose rodomų įrašų limito valdymą, šiuo atveju nurodėme, kad puslapyje yra 5, o kai yra daugiau nei 5 įrašai, pasirodys peidžeris, kuris mus perkelia. kad nurodytumėte, kiek norite peržiūrėti vienu metu.
- $ scope.types: Jame yra masyvas su kiekvieno tipo duomenų, kuriuos mes apdorosime lentelėje, duomenimis, jis veikia kartu su „changeData“.
- $ scope.data: Ji bus atsakinga už tuo metu jai priskirtos ir dinaminėje lentelėje pateiktos informacijos manipuliavimą.
- $ scope.head: Tai bus lentelės antraštė.
Funkcijos:
- $ ulatumas.changeData: Ji bus atsakinga už duomenų, kuriuos šiuo metu turime lentelėje, keitimą.
- $ scope.changeFilterTo: Jo funkcionalumas bus tam tikro tipo filtro įdėjimas filtruojant informaciją. Pavyzdžiui: Vartotojų įrašų filtrų tipai būtų vardas ir pavardė.
- $ apimtis. *****: Naudojamas duomenims tvarkyti pagal lentelių stulpelius. Ši funkcija bus priskirta stulpelių galvutėms.
Index.html kodas
DuomenysFiltrasFiltruoti pagal {{filter [1] [$ index]}}
| Redaguoti Ištrinti | {{elementas}} |
„Filters.js“ kodas
.filter ('fieldsSelectFilter', function () {return function (data) {data [0] [0] = '$'; data [1] [0] = 'All'; return data;};}) Pridedame CSS kodą, kad lentelių stulpeliuose ir peidžeryje būtų pateikti tam tikri stiliai. CSS turime pabrėžti ką nors įdomaus, paslėpkime įrašų stulpelį id nes tai nėra svarbu vizualizuoti vartotojui. Prie stulpelių pridėsime „piktogramas“, kurios nurodys, kada stulpelis informaciją rūšiuoja didėjančia arba mažėjančia tvarka.
Pagrindinis.css kodas
pasirinkite parinktį {text-transform: kapitalize; } ul.pagination {plotis: 25%; paraštė: 0 auto; } lentelė {plotis: 100%; } table tr th {text-transform: didžiosios raidės; } lentelė tr.: n-asis vaikas (1) {plotis: 150 taškų; } lentelė tr th: n-asis vaikas (2), lentelė td: n-asis vaikas (2) {display: none; } ***** {žymeklis: rodyklė; } i.up: before, i.down: prieš {content: ''; } i.up {viršuje: -5px; transformuoti: pasukti (90 laipsnių); ekranas: inline-block; padėtis: giminaitis; } i.down {transformuoti: pasukti (90 laipsnių); ekranas: inline-block; viršuje: -5 taškų; padėtis: giminaitis; } tr> td a {paraštė kairėn: 5 taškų; }Mes vėl atnaujiname savo naršyklę ir dabar matome:
DIDELIS
[color = # a9a9a9] Norėdami padidinti, spustelėkite paveikslėlį [/ color]
Šiek tiek paaiškinkime, kas yra sąsajoje. Mes turime selektorių, vadinamą duomenimis. Tai užsakys changeData išgauti informaciją, kurią išsaugojome services.js. Filtro laukas yra atsakingas už konkrečios informacijos, kurią nurodome, kai rašome tame lauke, rodymą, o „filtruoti pagal“ yra atsakinga už tai, kad būtų išsamiai nurodyta, pagal kurį stulpelį norime filtruoti, pagal numatytuosius nustatymus jis filtruojamas pagal VISUS laukus. taip pat spustelėkite stulpelius, kad sutvarkytumėte juos mažėjančiais ir didėjančiais. Atlikite įvairius testus iš savo pusės. Redaguoti ir ištrinti laukai šiuo metu neveikia.
DIDELIS
[color = # a9a9a9] Norėdami padidinti, spustelėkite paveikslėlį [/ color]
Taisyklės, kurių reikia nepamiršti
Kaip ir viskas, reikia laikytis griežtų taisyklių, kad mūsų dinaminio stalo modulis veiktų geriausiai. Mes visada turime turėti ID lauką, nors tai beveik akivaizdu, kai mes manipuliuojame įrašais iš savo duomenų bazės, tačiau netrūksta, kad ši praktika kartais gali mus praleisti. Be to, šis laukas yra pirmas kiekviename JSON įraše.
Kol kas laukiama kaip manipuliuoti duomenimis, gautais iš sąrašo. Pvz., Žaidimų duomenų lyties laukas iš tikrųjų būtų svetimas ID iš kitos lentelės (kai naudojame subjekto santykio sąvoką), formatuotų skaitinius laukus ir datas, taip pat sukurtų atskiras antraštes ir nepriklausytų nuo lauko pavadinimo, ateina tiesiai iš registro. Visa tai pamatysime vadovėlio 2 dalyje, kai reikės įrašyti ir atnaujinti duomenis. Būkite atidūs naujienoms.
Baigėme pirmąją suvestinės lentelės dalį. Pamatysite, kiek tai jums pasitarnaus jūsų kampiniuose projektuose ir nereikės kurti skirtingų lentelių, kad būtų galima manipuliuoti skirtingais duomenimis, jei ne tai, kad galite viską centralizuoti vienu moduliu.
Atsisiųskite suplanuotą demonstraciją
stačiakampis.zip 6.63MB 1472 atsisiuntimai
