От издателя
Фреймворк 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
Купить книгу