Разработка веб-приложений с использованием AngularJS

Павел Козловский 

Питер Бэкон Дарвин

Разработка  

веб-приложений  

с использованием AngularJS

Создавайте одностраничные  
веб-приложения, реализуя  

всю мощь AngularJS

Mastering  
Web Application 
Development with 
AngularJS

Build single-page web applications using the 
power of AngularJS

Pawel Kozlowski 
Peter Bacon Darwin

BIRMINGHAM - MUMBAI

Разработка  
веб-приложений  
с использованием 
AngularJS

Создавайте одностраничные  
веб-приложения, реализуя всю мощь 
AngularJS

Павел Козловский 
Питер Бэкон Дарвин

Москва, 2023

2-е издание, электронное

УДК 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

ОГЛАВЛЕНИЕ

Об авторах ...................................................... 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

Оглавление

Глава 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

Оглавление

Итерации по свойствам объекта ......................................................... 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

Оглавление

Адреса 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

Оглавление

Глава 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

Оглавление

Использование службы $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