OData + Angular.js + Bootstrap + JavaScript Grid = приложение за 5 минут
Предположим в некотором проекте появилась необходимость добавить некоторую форму опроса пользователей на веб сайте (детальная форма) и форму для просмотра и редактирования списка пользователей для администратора системы (списковая форма).Рассмотрим процесс создания этих форм с использованием OData, Angular.js, Bootstrap и JavaScript Grid. Все требования к такому приложению уже реализованы в этих инструментах, и нам практически не требуется ничего писать.
Перечислим основные требования к форме опроса (в скобках указаны инструменты, реализующие данное требование):
Поля формы: «First Name», «Last Name», «Email», «Comment» Форма должна сохранять данные в базе данных для последующего просмотра и анализа администратором системы (Angular.js) Форма должна проводить верификацию данных до отправки на сервер (Angular.js) Форма не должна перезагружать страницу при посылке данных на сервер (Angular.js) Форма должна модифицировать свой размер под различную ширину экрана или блока div, в который она будет вставлена на странице сайта (Bootstrap) Основные требования к форме для работы со списком пользователей: Обеспечивать страничный механизм или виртуальный скроллинг в случае большого количества пользователей Обеспечивать сортировку по любым полям (колонкам грида) Обеспечивать возможность поиска данных Обеспечивать возможность добавления-редактирования-удаления данных Любой JavaScript грид полностью обеспечивает все эти требования. Например стоит посмотреть на библиотеки Kendo UI, DevExtreme Web, Syncfusion HTML5 controls, Infragistics HTML5 controls, OpenUI5, Wijmo.Основные запросы к серверу:
Добавить новую запись
Изменить запись
Удалить запись
Получить общее количество записей, удовлетворяющих некоторому условию
Получить выборку из общего набора записей для показа на одной странице
Получить весь набор записей
Отсортировать записи по одному или нескольким полям
Отфильтровать записи по некоторому набору условий
Выполнение batch update операций — добавление, изменение и удаление сразу группы записей
Чтобы избежать необходимости реализации обработчиков всех перечисленных запросов, мы возьмем NitrosBase.js, который является готовым OData сервером и полностью обеспечивает автоматическую обработку всех этих запросов.
Форму опроса (детальную форму) мы создадим с помощью Bootstrap и Angular.js: Bootstrap существенно облегчает дизайн формы и обеспечивает возможность простого изменения размера, расположения элементов и т.д.
Angular.js обеспечивает минимальность кода для верификации данных и посылки их на сервер. Связка Bootstrap + Angular.js позволяет создавать простые формы «на лету».
Мы рекомендуем всегда иметь под рукой несколько готовых шаблонов различных форм. Например: Простая детальная форма с полями различных типов
Простая детальная форма с маленьким списком, например, детальная форма данных о человеке со списком контактов
И т.д. Очень хорошо держать шаблоны на каком-нибудь сайте типа JSFiddle, Bootply, CodePen, Plunker и т.д. Используя простой copy-paste на основе подобного примера формы:
Создаем поля формы, меняем их названия. Указываем что поля «First Name», «Last Name» и «Email» являются обязательными Выставляем URL для сохранения данных с формы — в данном случае 'http://nitrosdata.com/service/sandboxdb/user'. Слегка настраиваем layout формы (в данном случае размещаем комментарий справа от других полей). И это все что нам нужно сделать.
Simple Bootstrap + Angular.js form
Список пользователей (списковую форму) будем делать на основе примера грид контрола из библиотеки Kendo UI. Практически все программирование сведется к указанию правильных URL для операций модификации данных и к описанию колонок грида.
Для обработки всех необходимых в данном примере запросов нам вообще не потребуется разрабатывать каких-либо кодов. Все запросы к базе данных полностью покрываются стандартом Odata, и NitrosBase.js автоматически их обрабатывает. Существует множество библиотек для упрощения web разработки, например: Angular.js, Bootstrap, Kendo UI, DevExtreme Web, Syncfusion HTML5 controls, Infragistics HTML5 controls, OpenUI5, Wijmo, JayData, Breeze.js, datajs, ODataJS, NitrosBase.js и т.д. Каждая из них решает свою задачу. Удачный подбор совокупности библиотек под конкретную задачу может существенно сократить время разработки.Использование готовых шаблонов форм с использованием перечисленных выше библиотек позволяет вести разработку «на лету» используя copy-paste и внося лишь мелкие изменения в код.
