УДК 004.738.5:004.4AngularJS
ББК 32.973.26-018.2
Д46
Д46 Изучаем Angular 2 / пер. с англ. Р. Н. Рагимова; под науч. ред.
А. Н. Киселева. – М.: ДМК Пресс, 2017. – 354 с.: ил.
Дилеман П.
ISBN 978-5-97060-461-8
Фреймворк Angular 2 полностью переписан с нуля для удовлетворения требований
современных разработчиков, которым необходима высокая производительность
и отзывчивость веб-приложений.
Эта книга поможет вам освоить основы проектирования и разработки компонентов
Angular 2, обеспечивая полный охват синтаксиса языка TypeScript. После
создания первых компонентов мы объединим их в полноценное веб-приложение.
Затем перейдем к реализации маршрутов в Angular 2, узнаем, как организовать
поддержку разных состояний приложения и навигацию между компонентами.
После этого мы займемся веб-формами и проверкой ввода пользователя, а затем
используем новые знания как фундамент для изучения основ аутентификации
пользователей и различных способов защиты страниц и разделов сайта. Также
в этой книге рассматривается тема анимации компонентов и элементов DOM.
В заключительной части дается детальное освещение приемов модульного тестирования,
таких как службы, директивы, маршруты и фильтры.
Издание предназначено веб-разработчикам, которые хотят освоить разработку
современных мобильных и настольных веб-приложений следующего поколения
с помощью Angular 2.
УДК 004.738.5:004.4AngularJS
ББК 32.973.26-018.2
Copyright ©Packt Publishing 2016. First published in the English language
under the title “Learning Angular 2” – (9781785882074).
Все права защищены. Любая часть этой книги не может быть воспроизведена
в какой бы то ни было форме и какими бы то ни было средствами без
письменного разрешения владельцев авторских прав.
Материал, изложенный в данной книге, многократно проверен. Но поскольку
вероятность технических ошибок все равно существует, издательство
не может гарантировать абсолютную точность и правильность приводимых
сведений. В связи с этим издательство не несет ответственности за возможные
ошибки, связанные с использованием книги.
ISBN 978-1-78588-207-4 (анг.)
ISBN 978-5-97060-461-8 (рус.)
Copyright © 2016 Packt Publishing
© Оформление, издание, перевод,
ДМК Пресс, 2017
Стр.5
Содержание
Об авторе ......................................................... 13
Благодарности .................................................. 14
О технических рецензентах ................................. 15
Предисловие .................................................... 16
Глава 1. Создание самого первого компонента
в Angular 2 ........................................................ 22
Обновленный подход............................................................................................... 23
Веб-компоненты ................................................................................................... 24
Почему именно TypeScript? ............................................................................. 25
Настройка рабочего окружения ........................................................................... 26
Установка зависимостей .................................................................................... 26
Установка TypeScript .......................................................................................... 30
Установка утилиты typings ............................................................................... 31
Hello, Angular 2! ......................................................................................................... 33
Классы TypeScript ................................................................................................ 34
Введение в декораторы ...................................................................................... 34
Компиляция TypeScript в понятный браузерам код на JavaScript ..... 35
HTML-контейнер ................................................................................................ 36
Сопроводительные примеры книги .............................................................. 39
Соединяем все вместе ......................................................................................... 40
Усовершенствование интегрированной среды разработки ........................ 43
Sublime Text 3 ........................................................................................................ 43
Atom .......................................................................................................................... 44
Visual Studio Code ............................................................................................... 45
WebStorm ................................................................................................................ 46
Использование Gulp с другими интегрированными средами
разработки .............................................................................................................. 46
Погружение в компоненты Angular 2 ................................................................ 48
Улучшение производительности .................................................................... 48
Методы компонента и обновление данных ................................................ 48
Добавление интерактивности в компонент ................................................ 51
Стр.7
Содержание 7
Улучшения для вывода данных в представлении и доработка
пользовательского интерфейса ....................................................................... 53
Итоги ............................................................................................................................. 57
Глава 2. Введение в TypeScript ............................. 58
Причины создания TypeScript .............................................................................. 58
Преимущества TypeScript ................................................................................. 59
Знакомство с ресурсами, посвященными TypeScript .............................. 61
Типы в TypeScript ...................................................................................................... 62
Тип string ................................................................................................................ 63
Тип number ............................................................................................................. 64
Динамическая типизация с помощью типа any ........................................ 64
Тип void ................................................................................................................... 66
Автоматическое определение типов ............................................................. 66
Функции, лямбда-функции и поток выполнения ......................................... 67
Аннотации типов в функциях ......................................................................... 67
Параметры функций в TypeScript .................................................................. 69
Улучшенный синтаксис функций и область обработки
с лямбда-функциями .......................................................................................... 71
Классы, интерфейсы и наследование классов ................................................ 73
Анатомия классов: конструкторы, свойства и методы ........................... 73
Интерфейсы в TypeScript .................................................................................. 76
Расширение классов с помощью наследования ........................................ 78
Декораторы TypeScript ............................................................................................ 79
Декораторы классов ............................................................................................ 80
Декораторы свойств ............................................................................................ 81
Декораторы методов ........................................................................................... 83
Декораторы параметров .................................................................................... 86
Работа с модулями в приложении ...................................................................... 87
Внутренние модули............................................................................................. 87
Внешние модули .................................................................................................. 89
Предстоящий путь .................................................................................................... 90
Итоги ............................................................................................................................. 90
Глава 3. Реализация свойств и событий
компонентов ..................................................... 92
Улучшенный синтаксис шаблонов ...................................................................... 92
Привязка данных с помощью входных свойств ........................................ 93
Дополнительные синтаксические конструкции для привязки
выражений .............................................................................................................. 94
Стр.8
8 Содержание
Привязка событий к выходным свойствам................................................. 94
Входные и выходные свойства в действии ................................................. 95
Передача данных в пользовательских событиях ....................................100
Локальные ссылки в шаблонах .....................................................................102
Альтернативный синтаксис для входных и выходных свойств.........103
Настройка шаблона класса компонента..........................................................104
Внутренние и внешние шаблоны .................................................................104
Инкапсуляции CSS-стилей ............................................................................105
Управление инкапсуляцией представлений ............................................107
Итоги ...........................................................................................................................108
Глава 4. Расширение компонентов с помощью
директив и фильтров .........................................110
Директивы в Angular 2 ..........................................................................................111
Встроенные директивы ....................................................................................111
Управление привязками шаблонов с помощью фильтров........................114
Фильтры uppercase/lowercase........................................................................115
Фильтры number, percent и currency ...........................................................115
Фильтр slice ..........................................................................................................117
Фильтр date ..........................................................................................................117
Фильтр JSON.......................................................................................................118
Фильтр replace ....................................................................................................118
Фильтры интернационализации ..................................................................119
Фильтр async .......................................................................................................120
Реализация списка заданий в проекте Pomodoro ........................................120
Создание основного HTML-контейнера ...................................................121
Построение таблицы со списком заданий с помощью директив
Angular ...................................................................................................................122
Переключение заданий в списке ..................................................................128
Отображение изменений состояния в шаблонах ....................................130
Встраивание дочерних компонентов ..........................................................132
Создание собственных фильтров ......................................................................136
Анатомия пользовательских фильтров ......................................................136
Пользовательские фильтры для форматирования времени ...............137
Фильтрация данных с помощью пользовательских фильтров ..........139
Создание собственных директив .......................................................................140
Анатомия пользовательских директив ......................................................141
Создание подсказки для заданий с помощью пользовательской
директивы .............................................................................................................143
Стр.9
Содержание 9
Несколько слов об именах пользовательских директив и фильтров ....145
Итоги ...........................................................................................................................146
Глава 5. Создание приложений с помощью
компонентов Angular 2 .......................................147
Введение в деревья компонентов ......................................................................148
Общие соглашения для масштабируемых приложений ...........................149
Соглашение об именовании файлов и модулей ......................................151
Обеспечение непрерывной масштабируемости с помощью
фасадов или баррелей.......................................................................................152
Внедрение зависимостей в Angular 2 ...............................................................153
Внедрение зависимостей в дереве компонентов .....................................157
Переопределение поставщиков в иерархии инструментов
внедрения зависимостей .................................................................................161
Расширенная поддержка инструментов внедрения
зависимостей для пользовательских сущностей ....................................163
Инициализация приложения с помощью функции bootstrap() .......165
Подготовка структуры каталогов приложения Pomodoro .......................167
Приведение приложения в соответствие с рекомендациями
Angular 2 .....................................................................................................................170
Общий контекст .................................................................................................170
Создание фасадного модуля, включающего пользовательскую
баррель поставщиков ........................................................................................175
Создание компонентов ....................................................................................177
Начальная загрузка приложения .................................................................186
Итоги ...........................................................................................................................187
Глава 6. Асинхронная обработка данных
в Angular 2 .......................................................188
Способы асинхронной обработки информации ...........................................189
Наблюдаемые объекты .....................................................................................191
Реактивное функциональное программирование в Angular 2 ................193
Библиотека RxJS ................................................................................................196
Введение в HTTP API ...........................................................................................199
В каких случаях используются классы Request
и RequestOptionsArgs .......................................................................................200
Объект Response .................................................................................................201
Обработка ошибок при выполнении Http-запросов .............................202
Внедрение класса Http и псевдоним HTTP_PROVIDERS................202
Стр.10
10 Содержание
Пример: отслеживание данных по HTTP.......................................................204
Итоги ...........................................................................................................................209
Глава 7. Маршрутизация в Angular 2 .....................210
Добавление поддержки маршрутизатора Angular 2 ...................................211
Настройка службы маршрутизации .................................................................212
Создание нового компонента для демонстрационных целей ..................214
Настройка декоратора RouteConfig с помощью экземпляров
RouteDefinition ...................................................................................................216
Директивы маршрутизатора RouterOutlet и RouterLink ....................218
Принудительный переход по маршрутам .................................................220
CSS-ловушки для активных маршрутов ...................................................222
Параметры обработки маршрута .......................................................................222
Передача динамических параметров в маршрутах ................................223
Разбор параметров маршрута с помощью службы RouteParams ......225
Определение дочерних маршрутизаторов .....................................................227
События жизненного цикла маршрутизатора ..............................................230
Событие CanActivate ........................................................................................231
Событие OnActivate..........................................................................................233
События CanDeactivate и OnDeactivate ....................................................234
События CanReuse и OnReuse ......................................................................235
Переадресация на другие маршруты ..........................................................237
Точная настройка базового пути ..................................................................238
Настройка генерируемых URL-адресов с учетом стратегии
размещения ..........................................................................................................239
Асинхронная загрузка компонентов с помощью AsyncRoutes ..........240
Итоги ...........................................................................................................................241
Глава 8. Формы и аутентификация в Angular 2........243
Двухсторонняя привязка данных в Angular 2 ...............................................244
Директива NgModel ..........................................................................................245
Типы привязки к форме с помощью директивы NgModel ..................247
Отслеживание изменений и проверка допустимости данных ................251
Элементы управления, группы элементов управления и класс
FormBuilder ...............................................................................................................255
Объекты Control и Validator ..........................................................................256
Элементы управления в модели DOM и директива ngControl .........257
Группировка элементов в модели DOM с помощью директивы
NgControlGroup ..................................................................................................258
Стр.11
Содержание 11
Императивное определение групп элементов управления
с помощью ControlGroup ................................................................................260
Соединение модели DOM и контроллера с помощью
ngFormModel .......................................................................................................262
Пример компонента входа пользователя........................................................263
Контекст функции входа .................................................................................263
Шаблон формы входа .......................................................................................266
Компонент входа ................................................................................................266
Применение пользовательских проверок допустимости
к элементам управления ..................................................................................268
Отображение изменений состояния в элементах управления ..........270
Фиктивная служба проверки подлинности клиента ..................................271
Блокирование несанкционированного доступа ......................................277
Реакция пользовательского интерфейса на состояние
аутентификации пользователя .....................................................................279
Улучшение управления доступом .....................................................................281
Разработка собственной директивы безопасности RouterOutlet .....282
Итоги ...........................................................................................................................288
Глава 9. Анимация компонентов в Angular 2 ...........289
Анимация с помощью стандартной CSS-разметки .....................................290
Анимация с помощью классов-событий CSS ..........................................293
Анимация компонентов с помощью класса AnimationBuilder ................295
Отслеживание состояния анимации с помощью класса
Animation ..............................................................................................................300
Разработка пользовательских директив анимации ....................................301
Взгляд в будущее: ngAnimate 2.0 .......................................................................307
Итоги ...........................................................................................................................308
Глава 10. Модульное тестирование в Angular 2 ......309
Почему тестирование необходимо? ..................................................................310
Средства модульного тестирования в Angular 2 ..........................................311
Внедрение зависимостей в модульных тестах .........................................312
Настройка среды тестирования .........................................................................315
Реализация средства выполнения тестов ..................................................315
Настройка команд NPM ..................................................................................318
Пользовательские функции сопоставления Angular 2 ..............................319
Тестирование фильтров ........................................................................................320
Тестирование компонентов .................................................................................322
Стр.12
12 Содержание
Переопределение зависимостей компонентов для улучшения
тестирования .......................................................................................................330
Тестирование маршрутов .....................................................................................332
Тестирование переадресации .........................................................................334
Тестирование служб ...............................................................................................334
Реализация фиктивных Http-ответов с помощью MockBackend.....338
Тестирование директив .........................................................................................342
Предстоящий путь ..................................................................................................343
Использование Jasmine в сочетании с Karma ..........................................344
Получение отчетов об охвате кода тестами ..............................................344
Реализация E2E-тестов ...................................................................................345
Итоги ...........................................................................................................................345
Предметный указатель ......................................347
Стр.13