От издателя
Фреймворк Angular 2 полностью переписан с нуля для удовлетворения требований современных разработчиков, которым необходима высокая производительность и отзывчивость веб-приложений.
Эта книга поможет вам освоить основы проектирования и разработки компонентов Angular 2, обеспечивая полный охват синтаксиса языка TypeScript, знание которого необходимо для следования за примерами кода. После создания первых компонентов мы объединим их в полноценное веб-приложение. Затем перейдем к реализации маршрутов в Angular 2, узнаем, как организовать поддержку разных состояний приложения и навигацию между компонентами. После этого мы займемся веб-формами и проверкой ввода пользователя, а затем используем новые знания как фундамент для изучения основ аутентификации пользователей и различных способов защиты страниц и разделов сайта. Так же в этой книге рассматривается тема анимации компонентов и элементов DOM. В заключительной части дается детальное освещение приемов модульного тестирования, не только компонентов, но и других элементов, таких как службы, директивы, маршруты и фильтры.
Чему вы научитесь, прочитав эту книгу:
— настраивать рабочую среду с полным набором инструментов, необходимых для создания компонентов Angular 2, с минимальными усилиями;
— программировать на TypeScript — мощном типизированном надмножестве JavaScript, поддерживающем компиляцию в обычный код на JavaScript;
— управлять отображением данных и их обновлением при изменении;
— создавать мощные веб-приложения с иерархической структурой компонентов, способные генерировать и обрабатывать события, распространяемые по всему дереву элементов;
— пользоваться внешними библиотеками и службами, а также мощными функциями редактирования, заключенными в веб-формах Angular 2;
— осуществлять навигацию между компонентами и обрабатывать различные состояния приложения;
— разрабатывать надежные приложения с применением технологий модульного тестирования и инструментов отладки.
Эта книга адресована веб-разработчикам, которые хотят освоить разработку современных мобильных и настольных веб-приложений следующего поколения с помощью Angular 2. От читателя не требуется опыт работы с Angular 1.x или 2, но предполагается уверенное владение языком JavaScript. Она отлично подойдет новичкам в Angular, нуждающимся в пояснении и определении его концепций.
Содержание
Об авторе……………………………………………………………………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
Web Storm………………………………………………………………………………………… 46
Использование Gulp с другими интегрированными средами
разработки………………………………………………………………………………………. 46
Погружение в компоненты Angular 2 …………………………………………………..48
Улучшение производительности…………………………………………………….. 48
Методы компонента и обновление данных……………………………………..48
Добавление интерактивности в компонент…………………………………….. 51
Содержание ❖ 7
Улучшения для вывода данных в представлении и доработка
пользовательского интерфейса………………………………………………………..53
Итоги…………………………………………………………………………………………………… 57
Г л а в а 2 . В в е д е н и е в T y p e S c r i p t…………………………………………… 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 ♦> Содержание
Привязка событий к выходным свойствам………………………………………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
Фильтр J SON………………………………………………………………………………….118
Фильтр replace………………………………………………………………………………. 118
Фильтры интернационализации…………………………………………………… 119
Фильтр async…………………………………………………………………………………. 120
Реализация списка заданий в проекте Pomodoro……………………………….120
Создание основного HTML-контейнера………………………………………..121
Построение таблицы со списком заданий с помощью директив
Angular……………………………………………………………………………………………122
Переключение заданий в списке…………………………………………………… 128
Отображение изменений состояния в шаблонах……………………………130
Встраивание дочерних компонентов……………………………………………..132
Создание собственных фильтров……………………………………………………….136
Анатомия пользовательских фильтров…………………………………………. 136
Пользовательские фильтры для форматирования времени………….137
Фильтрация данных с помощью пользовательских фильтров 139
Создание собственных директив………………………………………………………..140
Анатомия пользовательских директив…………………………………………. 141
Создание подсказки для заданий с помощью пользовательской
директивы……………………………………………………………………………………… 143
Содержание ♦> 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 A PI……………………………………………………………………….. 199
В каких случаях используются классы Request
и RequestOptionsArgs……………………………………………………………………. 200
Объект Response……………………………………………………………………………. 201
Обработка ошибок при выполнении H ttp-запросов…………………….. 202
Внедрение класса Http и псевдоним HTTP PROVIDERS………….. 202
10 ❖ Содержание
Пример: отслеживание данных по HTTP…………………………………………..204
Итоги………………………………………………………………………………………………….209
Г л а в а 7 . М а р ш р у т и з а ц и я в A n g u la r 2 ……………………………….210
Добавление поддержки маршрутизатора Angular 2 …………………………..211
Настройка службы маршрутизации………………………………………………….. 212
Создание нового компонента для демонстрационных целей……………. 214
Настройка декоратора RouteConfig с помощью экземпляров
RouteDefinition……………………………………………………………………………… 216
Директивы маршрутизатора RouterOutlet и RouterLink………………218
Принудительный переход по маршрутам………………………………………220
CSS-ловушки для активных маршрутов………………………………………. 222
Параметры обработки маршрута………………………………………………………. 222
Передача динамических параметров в маршрутах………………………..223
Разбор параметров маршрута с помощью службы RouteParams 225
Определение дочерних маршрутизаторов………………………………………… 227
События жизненного цикла маршрутизатора……………………………………230
Событие Can Activate……………………………………………………………………..231
Событие OnActivate……………………………………………………………………….233
События CanDeactivate и OnDeactivate……………………………………….. 234
События CanReuse и OnReuse……………………………………………………….235
Переадресация на другие маршруты……………………………………………..237
Точная настройка базового пути……………………………………………………238
Настройка генерируемых URL-адресов с учетом стратегии
размещения…………………………………………………………………………………… 239
Асинхронная загрузка компонентов с помощью AsyncRoutes 240
Итоги………………………………………………………………………………………………….241
Г л а в а 8 . Ф о р м ы и а у т е н т и ф и к а ц и я в A n g u la r 2 …………..243
Двухсторонняя привязка данных в Angular 2…………………………………….244
Директива NgModel……………………………………………………………………….245
Типы привязки к форме с помощью директивы NgModel……………. 247
Отслеживание изменений и проверка допустимости данных………….. 251
Элементы управления, группы элементов управления и класс
FormBuilder………………………………………………………………………………………..255
Объекты Control и Validator…………………………………………………………. 256
Элементы управления в модели DOM и директива ngControl 257
Группировка элементов в модели DOM с помощью директивы
NgControlGroup…………………………………………………………………………….. 258
Содержание ❖ 11
Императивное определение групп элементов управления
с помощью ControlGroup……………………………………………………………….260
Соединение модели DOM и контроллера с помощью
ngFormModel………………………………………………………………………………….262
Пример компонента входа пользователя……………………………………………263
Контекст функции входа………………………………………………………………..263
Шаблон формы входа……………………………………………………………………. 266
Компонент входа…………………………………………………………………………… 266
Применение пользовательских проверок допустимости
к элементам управления…………………………………………………………………268
Отображение изменений состояния в элементах управления 270
Фиктивная служба проверки подлинности клиента………………………….271
Блокирование несанкционированного доступа……………………………. 277
Реакция пользовательского интерфейса на состояние
аутентификации пользователя………………………………………………………279
Улучшение управления доступом………………………………………………………281
Разработка собственной директивы безопасности RouterOutlet 282
Итоги………………………………………………………………………………………………….288
Г л а в а 9 . А н и м а ц и я к о м п о н е н т о в в A n g u la r 2 ……………….289
Анимация с помощью стандартной CSS-разметки…………………………….290
Анимация с помощью классов-событий CSS……………………………….. 293
Анимация компонентов с помощью класса AnimationBuilder………….. 295
Отслеживание состояния анимации с помощью класса
Animation……………………………………………………………………………………….300
Разработка пользовательских директив анимации……………………………301
Взгляд в будущее: ngAnimate 2.0………………………………………………………. 307
Итоги………………………………………………………………………………………………….308
Г л а в а 1 0 . М о д у л ь н о е т е с т и р о в а н и е в A n g u la r 2 ………. 309
Почему тестирование необходимо?……………………………………………………310
Средства модульного тестирования в Angular 2 ……………………………….. 311
Внедрение зависимостей в модульных тестах………………………………. 312
Настройка среды тестирования………………………………………………………… 315
Реализация средства выполнения тестов……………………………………… 315
Настройка команд NPM …………………………………………………………………318
Пользовательские функции сопоставления Angular 2 ……………………… 319
Тестирование фильтров……………………………………………………………………..320
Тестирование компонентов………………………………………………………………..322
12 ♦> Содержание
Переопределение зависимостей компонентов для улучшения
тестирования………………………………………………………………………………….330
Тестирование маршрутов………………………………………………………………….. 332
Тестирование переадресации………………………………………………………… 334
Тестирование служб………………………………………………………………………….. 334
Реализация фиктивных H ttp-ответов с помощью MockBackend 338
Тестирование директив………………………………………………………………………342
Предстоящий путь…………………………………………………………………………….. 343
Использование Jasmine в сочетании с Karma……………………………….. 344
Получение отчетов об охвате кода тестами……………………………………344
Реализация Е2Е-тестов………………………………………………………………… 345
Итоги………………………………………………………………………………………………….345
Предметный указатель………………………………………………………….347
Купить книгу