Сообществу Angular требуются свежие туториалы и учебники с простыми примерами на последних версиях библиотек. Правила, которые работали в Angular v0.X, уже не все действуют, в чём легко убедиться, а хочется разобрать что-то более сложное, чем фильтр из учебника на сайте и TODO-лист из примеров реализации (как, например, найденный для v1.0.3: jsfiddle.net/dakra/U3pVM/ ). Когда такие примеры покажутся слишком простыми, хочется посмотреть на развитие постановки задачи и приближенное к реальности приложение с некоторым оформлением стилей.
Предлагается вниманию пример приложения — работы с телефонной кникой в 2 списках: основного и «spam». Каждый из списков подвержен фильтрации (ну это — самое простое и встроенное в фреймворк), редактированию элементов, добавлению новых и удалению имеющихся. Одним кликом переносятся элементы из одного списка в другой, а подсветки элементов сделаны в стиле Bootstrap v.3.1.1.
Пример рекомендуется для разбора, когда вы прочитали учебник и посмотрели работу одного-двух первых приложений Angular, и появились вопросы, в каких вариантах (попроще) он может ещё работать. Обычно смотрят в интернет и ищут примеры реализации несложных страниц, но много попадается устаревших вариантов, очень простых или разбирающих частности типа анимаций.
Пример ушёл довольно далеко от «Hello World» и не очень далеко от «TODO List». Здесь ещё нет техник высокого пилотажа типа директив (если не считать атрибутов ng-model), нет работы контроллеров с сервисами, хотя два контроллера присутствуют (ng-controller=«addressController», ng-controller=«addressEditController») и каждый имеет свою переменную $scope — основной корень объектов каждого контроллера. Нет модулей (есть чисто формальный var ddd2 = angular.module(«ddd», []);, который можно было бы не писать). То есть, данный пример освещает часть техник Angular, чтобы отделить их от других частей и показать, что многие остальные части не обязательны, чтобы работать с вью и контроллерами.
Основные тенденции
Переменные и методы объединяются в каждом контроллере под объектом (хешем) $scope. Контроллер основывается на элементе HTML, в котором прописано имя контроллера в атрибуте ng-controller.
В коде можно увидеть использование шаблонов списков, ни один из которых не требует отдельного описания или подгрузки из другого файла. Вместо этого такие шаблоны (директивы) достаточно наглядно описывают строение будущих списков, как программы с циклами описывали бы логику своей работы.
Из подсистемы событий в примере участвуют лишь вполне очевидные клики по кнопкам и в одном месте — по заголовку блока (а сам блок стилями превращён в попап).
Дополнительно имеется панель юнит-тестов без привязки к какому-либо фреймворку — просто самописные проверки, показывающие, что и без Jasmine с Karma кое-что можно вручную тестировать и несложно оформить в списке результатов. Отладочная панель показывает JSON-представление списка. Всё взаимосвязано, изменения, как полагается, тянут за собой зависимые представления: списки и JSON в отладочной панели. Для разнообразия, первый список фильтруется иным методом (через CSS), чем второй, что показывает относительную гибкость вариантов проектирования.
Как полагается для учебного примера, сложность решения увеличена по сравнению с начальным TODO-листом, но не до конца — не до законченного приложения. К серверу пример в Angular не привязан, изменения живут только в браузере, а стартовые данные начинаются с небольшого списка, взятого из кода JS (контроллера основного списка данных). Не задействован даже localStorage, хотя было бы несложно, но ничего не дало бы для дополнительного понимания Angular. Пример запускается без вебсервера и AJAX-запросов.
Код
Его лучше смотреть в действии по ссылкам или на своём компьютере, изменять в jsfiddle или у себя, добавлять возможности, пользуясь API и смотреть, что происходит, в браузере.
- Есть демо-вариант, не требующий внешних библиотек (обе AngularJS v.1.2.10 и Bootstrap v3.1.1 лежат в несжатом виде с комментариями на том же домене).
- Есть — jsfiddle, который позволит экспериментировать, он подгружает сжатые версии библиотек из CDN.
- И есть 3 файла на Гитхабе, которые будут работать, не требуя веб-сервера — прямо из файлов на компьютере.
Сколько кода?
Все коды — это 300 строк CSS (20%), HTML и JS (50%, 150 строк), остальное — библиотеки, которые намеренно не сжаты, а jQuery и jqLite из Angular не используются.
Что делают тесты?
3 теста проверяют:
1. Наличие всех непустых имён (fname) в каждой из записей массива list. Запись пустого имени в данные расценивается как ошибка.
2. Процесс записи нового элемента списка («контакта»), затем проверяет правильность расположения данных и тут же удаляет тестовую запись.
3. Наличие всех непустых номеров телефонов (правда, они не валидируются на правильность набора и вообще на наличие цифр). Вначале в «базе данных» допущены несколько отсутствующих номеров, поэтому тест «Inner phones validation» падает… Теперь вы знаете, что надо делать с базой, чтобы, не касаясь кода, поправить показания теста. (Да, дописать телефоны или что-нибудь в поля «phone» или просто удалить неподходящие записи.)
Объём тестов — 40 строк JS.
Что можно сделать дальше?
Энтузиастов качественного кода может сподвигнуть мысль улучшить методическую ценность этого предприятия. Ему есть куда расти.
1) добавить многоязыковую поддержку;
2) написать тестирование в стиле Angular;
3) подключить сервер (но так, чтобы и без него ничего не ломалось).
В любом случае, всякое улучшение предпочтительно делать в виде цепочки усложняющихся демо, как это выполнено в учебнике Angular. Хотелось бы увидеть на соседних страницах Гитхаба улучшенные и постепенно усложняющиеся варианты развития этой страницы, с приумножением хороших практик и с сохранением простоты подхода.
Надеюсь, что этот пример поможет в разборе стандартных туториалов и API AngularJS 1.2.X.
Похожая литература:
- AngularJS Tutorial (en): MVC, routing, TODO app,
- С чего начать изучение AngularJS (ru) (очень начально)
- Перевод учебника (и остального) (ru) с оф. сайта angularjs.org
- AngularJS для привыкших к jQuery (ru): подход, двусторонний байндинг данных, зависимости (в 2 словах)
Продвинутее:
- Understanding AngularJS – Simple Example (en): NodeJS, Express, Application, Modules, Routing, View. Controller, Data from Server
- Лучшие практики AngularJS
- Шпаргалко (en) (ключевые слова с фильтрами (JS), с оформлением)
Автор: spmbt
