Као што добро знамо, АнгуларЈС нам пружа велики број занимљивих помоћних програма при раду на развоју веба и мобилних уређаја, има толико предности да нам помаже да генеришемо велику динамику у нашим веб пројектима.
Данас ћете научити да креирате динамичку табелу са овим оквиром помоћу које можете манипулисати било којом врстом записа које имате у свом развоју, довољно је радити са засебним модулима у зависности од информација којима рукујете, све ово можете радити из нечега што кодира се само једном. Помоћу њега ћете моћи да пописујете, филтрирате, пагинирате, сортирате, креирате, уређујете и бришете податке које сте сачували у систему. У овом првом делу ћемо радити са свиме што се тиче упита (листа, филтер, пагинирати, сортирати), у другом делу ћемо радити на креирању, уређивању и уклањању записа.
У своје време смо већ радили водич за креирање инамичких рута са АнгуларЈС Нгроуте. Данас се у потпуности бавимо тиме на друге начине. Такође треба појаснити да је препоручљиво имати АнгуларЈС знањеБудући да неки детаљи овог оквира неће бити у потпуности објашњени, такође се препоручује (није обавезно) да ГИТ, НПМ буде инсталиран на нашем систему јер ћемо с њима радити у овом водичу.
Креирање пројекта
Хајде да прво организујемо наш пројекат са нпм, гит и бовер. Креирајте директоријум пројекта који се зове табле-ангулар, а затим унутар пројекта употребите команду `гит инит` за креирање спремишта, а затим помоћу команде` нпм инит` креирајте датотеку пацкаге.јсон.
Наш веб сервер инсталирамо наредбом `нпм инсталл --саве-дев екпресс`. Након инсталације креирамо датотеку под називом сервер.јс
вар екпресс = рекуире ('екпресс'); вар апп = екпресс (); вар порт = Број (процесс.енв.ПОРТ || 3000); апп.усе (екпресс.статиц (__ дирнаме + '/ публиц')); апп.листен (порт, фунцтион () {цонсоле.лог ('Апликација је покренута на хттп: // лоцалхост:' + порт);}); Сада извршавамо команду (За инсталирање бовер -а):
нпм инсталл --саве-дев боверУнутар коријенског директорија креирамо други који се зове јавни, у јавности стварамо датотеку индек.хтмл. Затим креирамо директоријум унутар јавног назива имовина, унутар овог директоријума креирамо други који се зове јс, а у њему ћемо креирати датотеке апп.јс, цонтроллер.јс, сервицес.јс И филтерс.јс. Затим креирамо директоријум под називом цсс и унутар њега креирамо датотеку под називом маин.цсс
До сада наш пројекат иде овако:
Настављамо са коришћењем наших библиотека. У овом случају користићемо бовер, користићемо угаоне и библиотеке темеља како бисмо нашем погледу дали мало стила. Такође ћемо додати библиотеку која се зове ангулар-утилс-пагинатион, што ће нам дати функционалност са пагинацијом у нашем пројекту. Пре инсталирања ових библиотека креираћемо датотеку у нашем коренском директоријуму под називом .боверрц која је задужена да каже бовер -у где да сачува ове библиотеке.
Више информација о свакој од библиотека које ћемо користити:
.Боверрц код
{"дирецтори": "публиц / ассетс / бовер_цомпонентс"}За инсталирање библиотека користићемо наредбе:
- `бовер инсталл --саве ангулар`
- `бовер инсталл --саве фоундатион`
- `бовер инсталл --саве ангулар-утилс-пагинатион`
Треба појаснити да темељ ради са јкуери -ем и преузимају се када користимо бовер, али за наш пројекат их нећемо користити, што можемо изоставити, у мом случају уклонићу их из директоријума бовер_цомпонентс.
Ево шта смо до сада створили:
Сада пролазимо кодирање изведене табеле 😁, почињемо са индек.хтмл, додајемо све библиотеке које су нам потребне.
Заокретна табела са Угаоном ЈСУ цонтроллер.јс креирамо контролер зван ТаблеЦонтроллер који ће се позивати из индек.хтмл
Цонтроллер.јс код
ангулар.модуле ('табле.цонтроллер', []) .цонтроллер ('ТаблеЦонтроллер', фунцтион () {цонсоле.лог ('Табле Цонтроллер');}); За филтер.јс за сада креирамо само инстанцу модула:
ангулар.модуле ('табле.филтерс', []);Исто радимо са сервицес.јс, само креирамо инстанцу:
ангулар.модуле ('табле.сервицес', []);На крају позивамо све модуле из апп.јс.
ангулар.модуле ('табле', ['ангуларУтилс.дирецтивес.дирПагинатион', 'табле.цонтроллер', 'табле.сервицес', 'табле.филтерс']);И са овим можемо извршити прво извршавање наше апликације помоћу наредбе:
`чвор сервер.јс`Ако користимо алатку за развој претраживача на картици конзоле можемо потврдити да је реч Табле Цонтроллер одштампана како би означила да све што смо до сада креирали ради исправно.
Додавање услуга
Почећемо стварањем наших услуга које ћемо користити. За водич нећемо се повезати са било којим удаљеним сервером, па ћемо изабрати да сачувамо записе у нашим јавасцрипт датотекама. Користићемо три врсте регистара. Игре, чланци и корисници који немају иста поља, сваки ће симулирати независну услугу као да долази из РЕСТ АПИ, све у ЈСОН формату. Ако желите, можете додати друга поља у ове три врсте или додати ново.
Сервицес.јс код
.фацтори ('Усерс', фунцтион () {ретурн {гет: фунцтион () {вар дата = [{ид: 1, име: 'Јуан', презиме: 'Перез'}, {ид: 5, име : 'Ана Мариа', презиме: 'Гарциа'}, {ид: 15, име: 'Алејандро', презиме: 'Магно'}, {ид: 18, име: 'Андреа', презиме: ' Л '}, {ид: 19, име:' Пабло ', презиме:' Гутиеррез '}, {ид: 8, име:' Ана ', презиме:' Х '},]; врати податке;} }}) .фацтори ('Чланци', фунцтион () {ретурн {гет: фунцтион () {вар дата = [{ид: 20, титле: 'Мој први чланак', резиме: 'Лорем ипсум долор сит амет, цонсецтетур адиписицинг елит. '}, {ид: 21, наслов:' Мој други чланак ', резиме:' Лорем ипсум паин сит амет, цонсецтетур адиписицинг елит. '}, {Ид: 22, наслов:' Мој трећи чланак ', резиме:' Лорем ипсум паин сит амет, цонсецтетур адиписицинг елит. '}]; Врати податке;}}}) .фацтори (' Игре ', функција () {ретурн {гет: фунцтион () {вар дата = [{ид: 1, титле : 'Метроид', жанр: 'Акција'}, {ид: 2, наслов: 'Зелда', жанр: 'Авантура'}, {ид: 3, наслов: 'Златно око', жанр: 'С хоотер '}, {ид: 4, наслов:' Фифа 2016 ', жанр:' Спорт '},]; вратити податке; }}}) Приложићемо и другу услугу под називом Позив која ће бити задужена за позивање различитих података (Корисници, Игре и Чланци).
.фацтори ('Цалл', фунцтион ($ ињецтор) {ретурн {гет: фунцтион (типе) {вар сервице = $ ињецтор.гет (типе); ретурн сервице.гет ();}};}) И на крају ћемо створити услуга која се зове Упорност ко ће бити задужен за то ЦРУД наших информација. Као што сам већ рекао на почетку, ми ћемо радити само функције упита у овом првом делу водича, тако да ће се користити само функција листе, у другом делу ћемо користити остатак.
.фацтори ('Персистенце', фунцтион (Цалл) {ретурн {адд: фунцтион (типе, дата) {вар Обј = Цалл.гет (типе); Обј.пусх (дата);}, лист: фунцтион (типе) {ретурн Цалл.гет (типе);}, упдате: фунцтион (типе, индек, дата) {вар Обј = Цалл.гет (типе); ретурн Обј [индек] = дата;}, гет: фунцтион (типе, индек) {вар Обј = Цалл.гет (тип); врати Обј [индекс];}, уништи: функцију (тип, индекс) {вар Обј = Позиви.гет (тип); врати Обј.сплице (индекс, 1);}};} ) Морамо додати услугу која ће руковати свим објектима у изведеној табели.
.фацтори ('ОбјецтСервице', фунцтион () {ретурн {гетПропертиесОбјецт: фунцтион (објецт) {вар пропертиес = []; фор (вар проперти ин објецт) {пропертиес.пусх (проперти);} ретурн пропертиес;}, цлонеОбјецт: фунцтион (обј) {иф (нулл === обј || "објецт"! == типеоф обј) {ретурн обј;} вар цопи = обј.цонструцтор (); фор (вар аттр ин обј) {иф (обј.хасОвнПроперти ( аттр)) цопи [аттр] = обј [аттр];} ретурн цопи;}, цреатеПарамОбјецт: фунцтион (обј, параметер, валуе) {ретурн Објецт.дефинеПроперти (обј, параметер, {валуе: валуе, вритабле: труе, цонфигурабле: труе, енумерабле: труе});},}}) Додавање услуге
Креирање контролера
ангулар.модуле ('табле.цонтроллер', []) .цонтроллер ('ТаблеЦонтроллер', функција ($ сцопе, $ филтер, ОбјецтСервице, Персистенце) {ИТЕМ_ПЕР_ПАГЕ = 5; $ сцопе.типес = [{вредност: 'Корисници', ознака: 'Корисници'}, {вредност: 'Чланци', ознака: 'Чланци'}, {вредност: 'Игре', ознака: 'Игре'}]; $ сцопе.дата = []; $ сцопе.хеад = [ ]; // Тип података $ сцопе.цхангеДата = фунцтион () {$ сцопе.ури = $ сцопе.типе.валуе; $ сцопе.дата = Персистенце.лист ($ сцопе.типе.валуе); $ сцопе.хеад = ОбјецтСервице .гетПропертиесОбјецт ($ сцопе.дата [0]); $ сцопе.пропертиесХеад = $ сцопе.хеад; $ сцопе.филтер = $ филтер ('фиелдсСелецтФилтер') ([ОбјецтСервице.цлонеОбјецт ($ сцопе.пропертиесХеад), ОбјецтСервице.цлонеОбјецт ( $ сцопе.хеад)]);; $ сцопе.селецтФилтер = '$'; $ сцопе.цхангеФилтерТо ();}; // Филтрирај $ сцопе.цхангеФилтерТо = фунцтион () {$ сцопе.сеарцх = ОбјецтСервице.цреатеПарамОбјецт ({} , $ сцопе.селецтФилтер, '');}; // ***** од $ сцопе.ордерБи = {педицате: 'наме', реверсе: фалсе}; $ сцопе. ***** = фунцтион (предикат) {$ сцопе.ордерБи.реверсе =! $ сцопе.ордерБ и.реверсе; $ сцопе.ордерБи.предицате = предикат; }; // Пагинатион $ сцопе.лимит = {пер_паге: ИТЕМ_ПЕР_ПАГЕ}; // Подразумевано $ сцопе.типе = $ сцопе.типес [0]; $ сцопе.цхангеДата (); });Објаснимо код који смо мало додали:- ИТЕМ_ПЕР_ПАГЕ: Он ће бити задужен за управљање ограничењем броја записа који се приказују по страници, у овом случају смо навели да их има 5 по страници, када има више од 5 записа појавит ће се пејџер да нас помера, то је горе да бисте поставили колико истовремено желите да видите.
- $ сцопе.типес: Садржи низ са подацима сваке врсте података којима ћемо манипулисати у табели, ради заједно са цхангеДата.
- $ сцопе.дата: Он ће бити задужен за манипулацију информацијама које су му додељене у то време и које ће се приказати у динамичкој табели.
- $ сцопе.хеад: То ће бити заглавље табеле.
Функције:
- $ сцопе.цхангеДата: Он ће бити задужен за промену података које тренутно имамо у табели.
- $ сцопе.цхангеФилтерТо: Његова функционалност ће бити стављање одређене врсте филтера приликом филтрирања информација. На пример: Типови филтера корисничких записа били би име и презиме.
- $ опсег. *****: Користи се за организовање података по колонама табела. Ова функција ће бити додељена врху колона.
Индек.хтмл код
ПодациФилтерФилтрирај према {{филтер [1] [$ индек]}}
| Уреди Избриши | {{итем}} |
Филтерс.јс код
.филтер ('фиелдсСелецтФилтер', фунцтион () {ретурн функција (подаци) {дата [0] [0] = '$'; дата [1] [0] = 'Све'; врати податке;};}) Додајемо наш ЦСС код да бисмо дали неке стилове колонама табела и пејџеру. Морамо истаћи нешто занимљиво у ЦСС -у, сакријмо ид колону записа пошто то није важно визуализовати кориснику. Колонама ћемо додати „иконе“ које ће означавати када колона сортира информације у растућем или опадајућем редоследу.
Маин.цсс код
изаберите опцију {текстуална трансформација: великим словима; } ул.пагинатион {видтх: 25%; маргина: 0 ауто; } табела {ширина: 100%; } табела тр тх {тект-трансформ: цапитализе; } табела тр тх: нтх-цхилд (1) {видтх: 150пк; } табела тр тх: нтх-цхилд (2), табле тд: нтх-цхилд (2) {дисплаи: ноне; } тх. ***** {курсор: показивач; } и.уп: бефоре, и.довн: бефоре {цонтент: ''; } и.уп {врх: -5пк; трансформисати: ротирати (90 степени); приказ: инлине-блоцк; положај: релативан; } и.довн {трансформише: ротате (90дег); приказ: инлине-блоцк; врх: -5пк; положај: релативан; } тр> тд а {маргин-лефт: 5пк; }Поново смо освежили прегледач и сада видимо следеће:
ЕНЛАРГЕ
[цолор = # а9а9а9] Кликните на слику за повећање [/ цолор]
Хајде да мало објаснимо шта се налази у интерфејсу. Имамо селектор који се зове дата. Ово ће наредити цхангеДата извуците податке у које смо сачували сервицес.јс. Поље филтера је задужено за приказивање специфичних информација које означимо када уписујемо у наведено поље, а "филтрирај према" је задужено за детаље по којој колони желимо да филтрирамо, подразумевано филтрира по СВИМ пољима, можете такође кликните на колоне да бисте их организовали силазно и узлазно. Урадите различите тестове са своје стране. Поља за уређивање и брисање за сада нису функционална.
ЕНЛАРГЕ
[цолор = # а9а9а9] Кликните на слику за повећање [/ цолор]
Правила која треба имати на уму
Као и све, морају се поштовати строга правила како би наш модул динамичке табеле могао да ради на најбољи начин. Увек морамо имати поље ид, иако је то готово очигледно када манипулишемо записима из наше базе података, али не недостаје да нас ова пракса понекад може заобићи. Такође, ово поље се налази прво у сваком ЈСОН запису.
За сада је на чекању како манипулисати подацима који долазе са листе. На пример, поље пола у подацима о играма би заправо било страни идентификатор из друге табеле (када користимо концепт ентитета-односа), форматира нумеричка поља и датуме, такође ствара засебна заглавља и не зависи од назива поља које долази директно из регистра. Све ово ћемо видети у другом делу водича када будемо морали да снимамо и ажурирамо податке. Будите пажљиви према вестима.
Завршили смо први део изведене табеле. Видећете колико ће вам послужити у вашим Ангулар пројектима и нећете морати да креирате различите табеле за манипулацију различитим подацима, ако не и да све можете централизовати са једним модулом.
Преузмите заказани демо
табле-ангулар.зип 6.63МБ 1472 преузимања
