Както добре знаем, AngularJS ни предоставя голям брой интересни помощни програми при работа по уеб и мобилни разработки, има толкова много предимства, че ни помага да генерираме голяма динамика в нашите уеб проекти.
Днес ще се научите да създавате динамична таблица с тази рамка, с която можете да манипулирате всякакъв вид записи, които имате в развитието си, достатъчно за работа с отделни модули в зависимост от информацията, с която боравите, можете да работите всичко това от нещо, което се кодира само веднъж. С него ще можете да изброявате, филтрирате, разделяте на страници, сортирате, създавате, редактирате и изтривате информацията, която сте записали в системата. За тази първа част ще работим с всичко, свързано с заявки (списък, филтриране, разбиване на страници, сортиране), във втората част ще работим със създаването, редактирането и премахването на записи.
Навремето вече направихме урок за създаване на инамични маршрути с AngularJS Ngroute. Днес ние се впускаме изцяло в него по други начини. Трябва също така да се изясни, че е препоръчително да има AngularJS знанияТъй като някои подробности за тази рамка няма да бъдат напълно обяснени, също се препоръчва (не е задължително) да имаме GIT, NPM инсталиран в нашата система, тъй като ние ще работим с тях в този урок.
Създаване на проект
Нека първо организираме нашия проект с npm, git и bower. Създайте директорията на проекта, наречена table-angular, след това вътре в проекта използвайте командата `git init`, за да създадете хранилището и след това използвайте командата` npm init`, за да създадете файла package.json.
Инсталираме нашия уеб сървър с командата `npm install --save-dev express`. След инсталирането създаваме файл, наречен server.js
var express = require ('express'); var app = express (); var port = Number (process.env.PORT || 3000); app.use (express.static (__ dirname + '/ public')); app.listen (порт, функция () {console.log ('Приложението е стартирано на http: // localhost:' + порт);}); Сега изпълняваме командата (За да инсталираме bower):
npm install --save-dev bowerВътре в главната директория създаваме друга, наречена публична, публично създаваме файл index.html. След това създаваме директория вътре публично наречена активи, вътре в тази директория създаваме друга, наречена js, и в нея ще създадем файловете app.js, controller.js, services.js Y filters.js. След това създаваме директория, наречена css и в нея създаваме файл, наречен main.css
Досега нашият проект върви по следния начин:
Продължаваме да използваме нашите библиотеки. Ще използваме bower за този случай, ще използваме ъгловите и фундаментните библиотеки, за да придадем на нашия поглед малко стил. Ще добавим и библиотека, наречена angular-utils-pagination, която ще ни даде функционалност с пагинация в нашия проект. Преди да инсталираме тези библиотеки, ние ще създадем файл в нашата основна директория, наречен .bowerrc, който отговаря за това да каже на bower къде да запише тези библиотеки.
Повече информация за всяка от библиотеките, които ще използваме:
.Bowerrc код
{"directory": "public / assets / bower_components"}За да инсталираме библиотеките, ще използваме командите:
- `bower install --save angular`
- `bower install --save foundation`
- `bower install --save angular-utils-pagination`
Трябва да се изясни, че Foundation работи с jquery и те се изтеглят, когато използваме bower, но за нашия проект няма да ги използваме, което можем да ги пропуснем, в моя случай ще ги премахна от директорията bower_components.
Ето какво създадохме досега:
Сега преминаваме кодирането на обобщената таблица 😁, започваме с index.html, добавяме всички библиотеки, от които се нуждаем.
Осева таблица с ъглова JSВ controller.js създаваме контролер, наречен TableController, който ще бъде извикан от index.html
Controller.js код
angular.module ('table.controller', []) .controller ('TableController', function () {console.log ('Table Controller');}); За filter.js създаваме само екземпляр на модула, засега:
angular.module ('table.filters', []);Правим същото с services.js, просто създаваме екземпляра:
angular.module ('table.services', []);Накрая извикваме всички модули от app.js.
angular.module ('table', ['angularUtils.directives.dirPagination', 'table.controller', 'table.services', 'table.filters']);И с това можем да направим първото изпълнение на нашето приложение с помощта на командата:
`node server.js`Ако използваме инструмента за разработчици на браузъра в раздела на конзолата, можем да проверим дали думата Table Controller е отпечатана, за да покаже, че всичко, което създадохме досега, работи правилно.
Добавяне на услуги
Ще започнем със създаването на нашите услуги, които ще използваме. За урока няма да се свързваме с нито един отдалечен сървър, затова ще изберем да запишем записите в нашите javascript файлове. Ще използваме три типа регистри. Игри, статии и потребители, които не споделят едни и същи полета, всяка от тях ще симулира независима услуга, сякаш е от a REST API, всички във формат JSON. Ако искате, можете да добавите други полета към тези три типа или да добавите ново.
Services.js код
.factory ('Users', function () {return {get: function () {var data = [{id: 1, first name: 'Juan', фамилия: 'Perez'}, {id: 5, first name : 'Ana María', фамилия: 'Garcia'}, {id: 15, име: 'Alejandro', фамилия: 'Magno'}, {id: 18, име: 'Andrea', фамилия: ' L '}, {id: 19, име:' Pablo ', фамилия:' Gutierrez '}, {id: 8, име:' Ana ', фамилия:' H '},]; връщане на данни;} }}) .factory ('Articles', function () {return {get: function () {var data = [{id: 20, title: 'Първата ми статия', резюме: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. '}, {id: 21, заглавие:' Моята втора статия ', обобщение:' Lorem ipsum pain sit amet, consectetur adipisicing elit. '}, {Id: 22, заглавие:' Моята трета статия ', резюме:' Lorem ipsum pain sit amet, consectetur adipisicing elit. '}]; Връщане на данни;}}}) .factory (' Games ', function () {return {get: function () {var data = [{id: 1, title : 'Metroid', жанр: 'Екшън'}, {id: 2, заглавие: 'Zelda', жанр: 'Приключение'}, {id: 3, заглавие: 'Златно око', жанр: 'S hooter '}, {id: 4, заглавие:' Fifa 2016 ', жанр:' Спорт '},]; връщане на данни; }}}) Ще прикачим и друга услуга, наречена Call, която ще отговаря за извикването на различните данни (потребители, игри и статии).
.factory ('Call', function ($ injector) {return {get: function (type) {var service = $ injector.get (type); return service.get ();}};}) И накрая ще създадем a услуга, наречена Постоянство кой ще отговаря за това ГРУБ на нашата информация. Както вече казах в началото, ще правим само функции за заявки в тази първа част на урока, така че ще се използва само функцията списък, във втората част ще използваме останалата част.
.factory ('Persistence', function (Call) {return {add: function (type, data) {var Obj = Call.get (type); Obj.push (data);}, list: function (type) {return Call.get (тип);}, актуализация: функция (тип, индекс, данни) {var Obj = Call.get (тип); връщане Obj [индекс] = данни;}, get: function (тип, индекс) {var Obj = Call.get (тип); връщане Obj [индекс];}, унищожаване: функция (тип, индекс) {var Obj = Call.get (тип); връщане Obj.splice (индекс, 1);}};} ) Трябва да добавим услуга, която ще обработва всички обекти в обобщената таблица.
.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)) копиране [attr] = obj [attr];} връщане на копие;}, createParamObject: функция (obj, параметър, стойност) {връщане Object.defineProperty (obj, параметър, {стойност: стойност, възможност за запис: вярно, конфигурируемо: true, enumerable: true});},}}) Добавяне на услуга
Създаване на контролер
angular.module ('table.controller', []) .controller ('TableController', функция ($ scope, $ filter, ObjectService, Persistence) {ITEM_PER_PAGE = 5; $ scope.types = [{стойност: 'Потребители', етикет: „Потребители“}, {стойност: „Статии“, етикет: „Статии“}, {стойност: „Игри“, етикет: „Игри“}]; $ scope.data = []; $ scope.head = [ ]; // Тип данни $ 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.headlect]]);; , $ scope.selectFilter, '');}; // ***** от $ scope.orderBy = {pedicate: 'name', reverse: false}; $ scope. ***** = function (предикат) {$ scope.orderBy.reverse =! $ scope.orderB y.обратно; $ scope.orderBy.predicate = предикат; }; // Пагинация $ scope.limit = {per_page: ITEM_PER_PAGE}; // По подразбиране $ scope.type = $ scope.types [0]; $ scope.changeData (); });Нека обясним кода, който току -що добавихме:- ITEM_PER_PAGE: Той ще отговаря за управлението на лимита на записите, които да се показват на страница, в този случай сме посочили, че има 5 на страница, когато има повече от 5 записа, ще се появи пейджър, който да ни движи, това е нагоре за да поставите колко искате да видите едновременно.
- $ scope.types: Той съдържа масив с данните за всеки тип данни, които ще манипулираме в таблицата, той работи заедно с changeData.
- $ scope.data: Той ще отговаря за манипулирането на информацията, която му е възложена по това време и се изобразява в динамичната таблица.
- $ scope.head: Това ще бъде заглавката на таблицата.
Функции:
- $ scope.changeData: Той ще отговаря за промяната на данните, които имаме в момента в таблицата.
- $ scope.changeFilterTo: Неговата функционалност ще бъде да постави определен тип филтър при филтриране на информацията. Например: Типовете филтри за потребителски записи биха били име и фамилия.
- $ обхват. *****: Използва се за организиране на данните по колоните на таблиците. Тази функция ще бъде възложена на главата на колоните.
Index.html код
ДанниФилтърФилтриране по {{filter [1] [$ index]}}
| Редактиране Изтриване | {{вещ}} |
Filters.js код
.filter ('fieldsSelectFilter', function () {функция за връщане (данни) {данни [0] [0] = '$'; данни [1] [0] = 'Всички'; връщане на данни;};}) Добавяме нашия CSS код, за да придадем някои стилове на колоните на таблиците и на пейджъра. Трябва да подчертаем нещо интересно в CSS, нека скрием идентификационната колона на записите тъй като това не е важно да се визуализира пред потребителя. Ще добавим „икони“ към колоните, които ще показват кога колоната сортира информацията във възходящ или низходящ ред.
Main.css код
изберете опция {преобразуване на текст: главни букви; } ul.pagination {ширина: 25%; марж: 0 автоматично; } таблица {ширина: 100%; } таблица tr th {преобразуване на текст: главни букви; } таблица tr th: nth-child (1) {width: 150px; } таблица tr th: nth-child (2), table td: nth-child (2) {display: none; } th. ***** {курсор: указател; } i.up: преди, i.down: преди {content: ''; } i.up {отгоре: -5px; трансформиране: завъртане (90 градуса); дисплей: вграден блок; позиция: относителна; } i.down {преобразуване: завъртане (90 градуса); дисплей: вграден блок; отгоре: -5px; позиция: относителна; } tr> td a {margin-left: 5px; }Опресняваме браузъра си отново и сега виждаме следното:
Увеличете
[color = # a9a9a9] Щракнете върху изображението, за да го увеличите [/ color]
Нека обясним малко какво има в интерфейса. Имаме селектор, наречен данни. Това ще бъде поръчано от changeData извлечете информацията, в която сме записали services.js. Полето за филтриране отговаря за показване на конкретната информация, която посочваме, когато пишем в споменатото поле, а „филтриране по“ отговаря за детайлизиране по коя колона искаме да филтрираме, по подразбиране тя филтрира по ВСИЧКИ полета, можете също щракнете върху колоните, за да ги организирате низходящи и възходящи. Направете различни тестове от ваша страна. Полетата за редактиране и изтриване засега не са функционални.
Увеличете
[color = # a9a9a9] Щракнете върху изображението, за да го увеличите [/ color]
Правила, които трябва да имате предвид
Както всичко, трябва да се спазват строги правила, за да може нашият модул за динамична таблица да работи по най -добрия начин. Винаги трябва да имаме поле за идентификатор, въпреки че това е почти очевидно, когато манипулираме записи от нашата база данни, но не липсва, че тази практика понякога може да ни подмине. Също така, това поле се поставя на първо място във всеки JSON запис.
Засега предстои как да манипулирате данните, които идват от списък. Например, полето за пол в данните за игрите всъщност би било чуждестранен идентификатор от друга таблица (когато използваме концепцията за връзка между обект), форматира числовите полета и дати, също така създава отделни заглавки и не зависи от името на полето, което идва директно от системния регистър. Ще видим всичко това в част 2 на урока, когато трябва да запишем и актуализираме данни. Бъдете внимателни към новините.
Приключихме първата си част от обобщената таблица. Ще видите колко ще ви служи във вашите Angular проекти и няма да се налага да създавате различни таблици, за да манипулирате различни данни, ако не, че можете да централизирате всичко с един модул.
Изтеглете демонстрация по график
table-angular.zip 6.63MB 1472 изтегляния
