УДК 004.738.5:004.4AngularJS
ББК 32.973.26-018.2
К59
К59
Козловский, Павел.
Разработка веб-приложений с использованием AngularJS / П. Козловский,
П. Б. Дарвин ; пер. с англ. А. Н. Киселёва. — 2-е изд., эл. — 1 файл pdf :
395 с. — Москва : ДМК Пресс, 2023. — Систем. требования: Adobe Reader
XI либо Adobe Digital Editions 4.5 ; экран 10". — Текст : электронный.
ISBN 978-5-89818-539-8
С появлением HTML5 и CSS3 разработка клиентских веб-приложений на языке
JavaScript приобрела особую популярность. Создатели фреймворка AngularJS предприняли
революционный подход к решению вопроса превращения браузера в самую
лучшую платформу для разработки веб-приложений.
Книга проведет вас через основные этапы конструирования типичного одностраничного
веб-приложения. В ней обсуждаются такие темы, как организация структуры
приложения, взаимодействие с различными серверными технологиями, безопасность,
производительность и развертывание. После представления AngularJS и
обзора перспектив клиентских веб-приложений, книга шаг за шагом проведет вас
через создание достаточно сложного приложения.
Издание будет наиболее полезно веб-разработчикам, желающим оценить или
решившим применить фреймворк AngularJS для создания своих приложений. Предполагается,
что читатель имеет некоторое знакомство с AngularJS, хотя бы на уровне
понимания простейших примеров. Мы надеемся также, что вы обладаете знанием
HTML, CSS и JavaScript.
УДК 004.738.5:004.4AngularJS
ББК 32.973.26-018.2
Электронное издание на основе печатного издания: Разработка веб-приложений с использованием
AngularJS / П. Козловский, П. Б. Дарвин ; пер. с англ. А. Н. Киселёва. — Москва : ДМК
Пресс, 2014. — 394 c. — ISBN 978-5-97060-064-1. — Текст : непосредственный.
Все права защищены. Любая часть этой книги не может быть воспроизведена в какой бы то ни было
форме и какими бы то ни было средствами без письменного разрешения владельцев авторских прав.
Материал, изложенный в данной книге, многократно проверен. Но поскольку вероятность технических
ошибок все равно существует, издательство не может гарантировать абсолютную точность и правильность
приводимых сведений. В связи с этим издательство не несет ответственности за возможные ошибки, связанные
с использованием книги.
В соответствии со ст. 1299 и 1301 ГК РФ при устранении ограничений, установленных техническими средствами
защиты авторских прав, правообладатель вправе требовать от нарушителя возмещения убытков или выплаты компенсации.
ISBN
978-5-89818-539-8
© 2013 Packt Publishing
© Оформление, перевод на русский язык
ДМК Пресс, 2014
Стр.5
ОГЛАВЛЕНИЕ
Об авторах ...................................................... 11
Благодарности ................................................. 12
О рецензентах.................................................. 14
Предисловие ................................................... 15
О чем рассказывается в этой книге ............................................... 16
Что потребуется при чтении этой книги ......................................... 17
Кому адресована эта книга ............................................................ 18
Соглашения................................................................................... 18
Отзывы и пожелания ..................................................................... 19
Поддержка клиентов ..................................................................... 19
Загружаемые примеры программного кода .......................................... 19
Ошибки и опечатки ............................................................................... 20
Нарушение авторских прав ................................................................... 20
Вопросы ............................................................................................... 20
Глава 1. Дзен Angular ......................................... 21
Знакомьтесь, AngularJS ................................................................. 22
Общие сведения о фреймворке ............................................................ 22
Найдите свой путь в проект ........................................................... 23
Сообщество .......................................................................................... 23
Обучающие ресурсы в Интернете ......................................................... 23
Библиотеки и расширения ............................................................ 24
Инструменты ................................................................................. 24
Batarang ................................................................................................ 24
Plunker и jsFiddle ................................................................................... 25
Расширения и дополнения для IDE ....................................................... 25
Ускоренное введение в AngularJS ................................................. 25
Hello World – пример приложения на AngularJS ..................................... 25
Двунаправленное связывание данных .................................................. 27
Шаблон MVC в AngularJS ............................................................... 27
С высоты птичьего полета ..................................................................... 28
Подробнее о контекстах ........................................................................ 30
Представление ..................................................................................... 37
Модули и внедрение зависимостей ...................................................... 42
AngularJS и остальной мир ............................................................ 56
jQuery и AngularJS ................................................................................. 58
Взгляд в будущее .................................................................................. 59
В заключение ................................................................................ 60
Стр.6
6
Оглавление
Глава 2. Сборка и тестирование .......................... 62
Введение в пример приложения .................................................... 63
Область применения............................................................................. 63
Стек технологий .................................................................................... 65
Хранилище данных ............................................................................... 65
Система сборки ............................................................................ 68
Принципы построения систем сборки ................................................... 69
Инструменты ........................................................................................ 71
Организация файлов и каталогов .................................................. 73
Каталоги верхнего уровня ..................................................................... 74
Каталог с исходным кодом .................................................................... 75
Соглашения по именованию файлов ..................................................... 79
Модули и файлы AngularJS ........................................................... 80
Один файл, один модуль ....................................................................... 80
Внутри модуля ...................................................................................... 81
Автоматическое тестирование ...................................................... 84
Модульные тесты .................................................................................. 86
Интеграционные тесты ......................................................................... 93
В заключение ................................................................................ 97
Глава 3. Взаимодействие с сервером ................... 99
Выполнение запросов XHR и JSONP с помощью $http ................... 99
Модель данных и адреса URL в MongoLab .......................................... 100
Краткий обзор $http ........................................................................... 100
Ограничения политики общего происхождения .................................. 104
Promise API и служба $q ............................................................... 109
Получение отложенных результатов с помощью службы $q ................. 110
Интеграция службы $q в AngularJS ...................................................... 119
Promise API и служба $http ........................................................... 120
Взаимодействие с конечными точками RESTful ........................... 121
Служба $resource ............................................................................... 122
Взаимодействия с веб-службами REST с помощью $http .................... 128
Дополнительные возможности $http ........................................... 132
Обработка ответов .............................................................................. 132
Тестирование кода, осуществляющего взаимодействия
с помощью $http .......................................................................... 133
В заключение .............................................................................. 136
Глава 4. Отображение и форматирование данных ... 137
Знакомство с директивами ......................................................... 137
Отображение результатов вычисления выражений ..................... 138
Директива интерполяции .................................................................... 138
Отображение значений с помощью ngBind.......................................... 139
Включение разметки HTML в выражения ............................................. 139
Отображение по условию ............................................................ 141
Включение блоков содержимого по условию ...................................... 142
Отображение коллекций с помощью директивы ngRepeat .......... 143
Знакомство с директивой ngRepeat ................................................... 143
Специальные переменные .................................................................. 144
Стр.7
Оглавление
7
Итерации по свойствам объекта ......................................................... 145
Приемы использования директивы ngRepeat ..................................... 145
Обработчики событий DOM ........................................................ 149
Увеличение эффективности с помощью шаблонов на основе
DOM ............................................................................................ 150
Избыточный синтаксис ....................................................................... 150
Применение директивы ngRepeat к множеству элементов DOM ......... 151
Элементы и атрибуты не могут изменяться во время выполнения ....... 152
Нестандартные элементы HTML и старые версии IE ............................ 153
Преобразование моделей с помощью фильтров ......................... 153
Применение встроенных фильтров ..................................................... 154
Создание собственных фильтров – реализация постраничного
вывода ................................................................................................ 161
Доступ к фильтрам из кода на JavaScript ............................................ 163
Правила использования фильтров ...................................................... 164
В заключение .............................................................................. 168
Глава 5. Создание улучшенных форм ................. 169
Сравнение традиционных форм с формами AngularJS ............... 169
Введение в директиву ngModel .......................................................... 171
Создание формы с информацией о пользователе ....................... 172
Директивы ввода ......................................................................... 173
Добавление проверки обязательного наличия значения ..................... 174
Текстовые элементы ввода ................................................................. 174
Кнопки-флажки ................................................................................... 175
Радиокнопки ....................................................................................... 175
Элементы выбора из списка ............................................................... 176
Использование скрытых полей ввода ................................................. 181
Устройство механизма связывания данных в ngModel ................ 182
ngModelController ................................................................................ 182
Проверка форм в AngularJS ......................................................... 184
ngFormController ................................................................................. 184
Добавление динамического поведения в форму
с информацией о пользователе ................................................... 185
Вывод сообщений об ошибках ............................................................ 186
Отключение процедуры проверки, встроенной в браузер ................... 188
Вложенные формы ...................................................................... 188
Вложенные формы как компоненты многократного пользования ........ 189
Повторение вложенных форм ...................................................... 189
Проверка повторяющихся полей ввода ............................................... 191
Отправка традиционной формы HTML ........................................ 192
Непосредственная отправка форм на сервер ..................................... 192
Обработка события отправки формы .................................................. 193
Сброс формы в исходное состояние ........................................... 194
В заключение .............................................................................. 195
Глава 6. Организация навигации ....................... 196
Адреса URL в одностраничных веб-приложениях ........................ 197
Стр.8
8
Оглавление
Адреса URL с решеткой до появления HTML5 ..................................... 198
HTML5 и интерфейс истории посещений ............................................ 199
Служба $location ......................................................................... 200
Знакомство с интерфейсом службы $location и адресами URL ............ 201
Адреса фрагментов, навигация внутри страницы и $anchorScroll ....... 202
Настройка режима HTML5 интерпретации адресов URL ..................... 203
Навигация вручную с помощью службы $location ................................ 205
Служба $route ............................................................................. 208
Определение основных маршрутов .................................................... 208
Гибкое сопоставление маршрутов ...................................................... 210
Повторное использование шаблонов разметки с разными
контроллерами ................................................................................... 212
Предотвращение «мерцания» пользовательского интерфейса
при изменении маршрута ................................................................... 213
Предотвращение изменения маршрута .............................................. 215
Ограничения службы $route ........................................................ 216
Один маршрут соответствует одной области на экране ...................... 217
Распространенные приемы использования, советы
и рекомендации ......................................................................... 220
Обработка ссылок ............................................................................... 220
Организация определений маршрутов ............................................... 222
В заключение .............................................................................. 224
Глава 7. Безопасность приложений ................... 226
Аутентификация и авторизация на стороне сервера .................... 227
Обработка неавторизованного доступа .............................................. 227
Реализация прикладного интерфейса аутентификации на стороне
сервера .............................................................................................. 228
Безопасность шаблонов разметки .............................................. 228
Противостояние нападениям ...................................................... 229
Предотвращение перехвата cookie («атака через посредника») .......... 230
Предотвращение нападений вида «межсайтовый скриптинг» ............. 231
Предотвращение внедрения данных в формате JSON ........................ 233
Предотвращение подделки межсайтовых запросов ........................... 234
Обеспечение безопасности на стороне клиента .......................... 235
Служба security .................................................................................. 236
Отображение формы аутентификации ................................................ 236
Создание меню и панелей инструментов с поддержкой системы
безопасности ...................................................................................... 238
Поддержка аутентификации и авторизации на стороне клиента ....240
Обработка ошибок авторизации ......................................................... 241
Перехват ответов ................................................................................ 242
Создание службы securityInterceptor .................................................. 242
Создание службы securityRetryQueue ................................................. 244
Предотвращение переходов по защищенным маршрутам........... 246
Использование функций в свойстве resolve маршрутов ...................... 247
Создание службы authorization ........................................................... 248
В заключение ............................................................................. 250
Стр.9
Оглавление
9
Глава 8. Создание собственных директив ........... 251
Что такое директива AngularJS? .................................................. 251
Встроенные директивы ....................................................................... 252
Использование директив в разметке HTML ......................................... 253
Тестирование директив ............................................................... 255
Определение директивы ............................................................. 257
Оформление кнопок с помощью директив ................................... 258
Создание директивы button ................................................................ 258
Директивы-виджеты .................................................................... 261
Создание директивы постраничного просмотра ................................. 261
Тест для директивы постраничного просмотра списков ...................... 262
Использование шаблонов с разметкой HTML в директивах ................. 263
Изолирование директивы от родительского контекста ....................... 264
Реализация виджета ........................................................................... 267
Добавление в директиву функции обратного вызова selectPage ......... 268
Создание директивы проверки .................................................... 269
Внедрение контроллера другой директивы ......................................... 270
Взаимодействие с контроллером ngModelController ........................... 271
Тестирование директивы проверки ..................................................... 272
Реализация директивы проверки ........................................................ 274
Асинхронная проверка модели .................................................... 275
Имитация службы Users ..................................................................... 275
Тестирование директивы асинхронной проверки ................................ 276
Реализация директивы асинхронной проверки ................................... 278
Директива-обертка для виджета выбора даты из библиотеки
jQueryUI ...................................................................................... 279
Тестирование директив-оберток ......................................................... 281
Реализация директивы datepicker ...................................................... 282
В заключение .............................................................................. 283
Глава 9. Создание продвинутых директив ........... 285
Включение .................................................................................. 285
Использование включения в директивах ............................................. 286
Включение в директивах с изолированным контекстом ....................... 286
Директива вывода предупреждения на основе приема включения ...... 286
Контекст включения ............................................................................ 288
Создание и использование функций включения .......................... 291
Создание функции включения с помощью службы $compile ............... 291
Использование функций включения в директивах ............................... 292
Создание директивы if, использующей включение .............................. 294
Контроллеры директив ................................................................ 296
Внедрение специальных зависимостей в контроллеры директив ........ 297
Создание директивы постраничного просмотра на основе
контроллера ....................................................................................... 298
Различия между контроллерами директив и функциями связывания .... 299
Комплект директив виджета «аккордеон» ............................................ 301
Управление процессом компиляции ............................................ 305
Создание директивы field ................................................................... 306
Стр.10
10
Оглавление
Использование службы $interpolate .................................................... 308
Динамическая загрузка шаблонов ...................................................... 310
Настройка шаблона директивы field ................................................... 310
В заключение .............................................................................. 312
Глава 10. Создание интернациональных
веб-приложений ............................................. 313
Использование национальных наборов символов и настроек ...... 314
Модули с национальными настройками .............................................. 314
Использование доступных национальных настроек ............................. 315
Поддержка переводов ................................................................. 317
Перевод строк в шаблонах AngularJS .................................................. 318
Перевод строк в коде JavaScript .......................................................... 321
Шаблоны проектирования, советы и рекомендации .................... 322
Инициализация приложений с учетом выбранных национальных
настроек ............................................................................................. 322
Переключение между национальными настройками ........................... 325
Нестандартное форматирование дат, чисел и валют ........................... 326
В заключение .............................................................................. 328
Глава 11. Создание надежных веб-приложений
на основе AngularJS ........................................ 330
Внутренние механизмы AngularJS ............................................... 331
Это не механизм строковых шаблонов ............................................... 331
Настройка производительности – определить требования,
измерить, настроить и повторить ................................................ 343
Настройка производительности приложений на основе AngularJS ..... 345
Оптимизация использования процессора ........................................... 346
Оптимизация потреблении памяти ..................................................... 356
Директива ng-repeat ........................................................................... 358
В заключение .............................................................................. 360
Глава 12. Подготовка и развертывание
веб-приложений на основе AngularJS ................. 362
Повышение производительности сетевых операций ................... 363
Минификация статических ресурсов ................................................... 363
Предварительная загрузка шаблонов ................................................. 368
Оптимизация начальной страницы .............................................. 373
Избегайте отображения шаблонов в необработанном виде ................ 373
AngularJS и подключение прикладных сценариев................................ 376
Поддержка браузеров ................................................................. 379
Поддержка Internet Explorer ................................................................. 380
В заключение .............................................................................. 381
Предметный указатель .................................... 383
Стр.11