Angular для профессионалов

Содержание.

Глава 1. Подготовка 23
Что вам необходимо знать? 23
Много ли в книге примеров? 24
Где взять примеры кода? 25
Как подготовить среду разработки? 26
Как связаться с автором 26
Итоги 26

Глава 2. Первое приложение 27
Подготовка среды разработки 27
Установка Node.js 27
Установка пакета angular-cli 28
Установка Git 29
Установка редактора 29
Установка браузера 30
Создание и подготовка проекта 30
Создание проекта 30
Создание файла пакета 31
Установка пакета NPM 32
Запуск сервера 33
Редактирование файла HTML 33
Добавление функциональности Angular в проект 36
Подготовка файла HTML 36
Создание модели данных 37
Создание шаблона 40
Создание компонента 40
Импортирование 41
Декораторы 42
Класс 42
А теперь все вместе 43
Расширение функциональности приложения 45
Добавление таблицы 45
Создание двусторонней привязки данных 48
Фильтрация задач 50
Добавление задач 51
Итоги 53

Глава 3. Angular в контексте 54
Сильные стороны Angular 55
Приложения с круговой передачей и одностраничные приложения 55
Паттерн MVC 58
Модели 60
Контроллеры/компоненты 62
Данные представления 63
Представления/шаблоны 63
REST-совместимые службы 63
Распространенные ошибки проектирования 66
Неверный выбор места для размещения логики 66
Использование формата хранилища данных 66
Начальные трудности 67
Итоги 67

Глава 4. Краткий курс HTML и CSS 68
Подготовка проекта 68
Понимание HTML 70
Пустые элементы 71
Атрибуты 71
Применение атрибутов без значений 72
Литералы в атрибутах 72
Контент элементов 72
Структура документа 73
Bootstrap 74
Применение базовых классов Bootstrap 75
Контекстные классы 76
Поля и отступы 77
Изменение размеров элементов 78
Использование Bootstrap для оформления таблиц 79
Использование Bootstrap для создания форм 80
Использование Bootstrap для создания сеток 82
Создание адаптивных сеток 83
Создание упрощенного сетчатого макета 86
Итоги 87

Глава 5. JavaScript и TypeScript: часть 1 88
Подготовка примера 90
Создание файлов HTML и JavaScript 90
Настройка компилятора TypeScript 91
Выполнение примера 92
Элемент script 92
Использование загрузчика модулей JavaScript 93
Основной процесс 94
Команды 95
Определение и использование функций 95
Определение функций с параметрами 97
Параметры по умолчанию и остаточные параметры 97
Определение функций, возвращающих результаты 99
Функции как аргументы других функций 99
Лямбда-выражения 100
Переменные и типы 100
Примитивные типы 102
Работа со строками 102
Работа с числами 104
Операторы JavaScript 104
Условные команды 105
Оператор равенства и оператор тождественности 105
Явное преобразование типов 106
Преобразование чисел в строки 107
Работа с массивами 108
Литералы массивов 109
Чтение и изменение содержимого массива 109
Перебор элементов массива 109
Встроенные методы массивов 110
Итоги 112

Глава 6. JavaScript и TypeScript: часть 2 113
Подготовка примера 113
Работа с объектами 114
Объектные литералы 115
Функции как методы 115
Определение классов 116
Определение свойств с get- и set-методами 118
Наследование 118
Работа с модулями JavaScript 119
Создание модулей 120
Импортирование из модулей JavaScript 121
Импортирование конкретных типов 121
Назначение псевдонимов при импортировании 122
Импортирование всех типов в модуле 123
Полезные возможности TypeScript 124
Аннотации типов 124
Применение аннотаций типов к свойствам и переменным 127
Кортежи 130
Индексируемые типы 130
Модификаторы доступа 131
Итоги 132

Глава 7. SportsStore: реальное приложение 133
Подготовка проекта 134
Создание структуры папок 134
Установка дополнительных пакетов NPM 134
Подготовка REST-совместимой веб-службы 136
Подготовка файла HTML 138
Запуск примера 138
Запуск REST-совместимой веб-службы 139
Подготовка проекта Angular 139
Обновление корневого компонента 140
Обновление корневого модуля 140
Анализ файла начальной загрузки 141
Начало работы над моделью данных 142
Создание классов модели 142
Создание фиктивного источника данных 143
Создание репозитория модели 144
Создание функционального модуля 146
Создание хранилища 146
Создание компонента магазина и шаблона 147
Создание функционального модуля хранилища 148
Обновление корневого компонента и корневого модуля 149
Добавление функциональности: подробная информация о товарах 150
Вывод подробной информации о товарах 150
Добавление выбора категорий 152
Страничный вывод списка товаров 154
Создание нестандартной директивы 158
Итоги 161

Глава 8. SportsStore: выбор товаров и оформление заказа 162
Подготовка приложения 162
Создание корзины 162
Создание модели корзины 162
Создание компонентов для сводной информации корзины 164
Интеграция корзины в приложение 166
Маршрутизация URL 169
Создание компонентов для содержимого корзины и оформления заказа 169
Создание и применение конфигурации маршрутизации 170
Навигация в приложении 172
Защитники маршрутов 175
Завершение вывода содержимого корзины 177
Обработка заказов 179
Расширение модели 180
Обновление репозитория и источника данных 181
Обновление функционального модуля 182
Получение информации о заказе 183
Использование REST-совместимой веб-службы 186
Применение источника данных 188
Итоги 189

Глава 9. SportsStore: администрирование 190
Подготовка приложения 190
Создание модуля 190
Настройка системы маршрутизации URL 193
Переход по URL администрирования 194
Реализация аутентификации 196
Система аутентификации 196
Расширение источника данных 197
Создание службы аутентификации 198
Включение аутентификации 200
Расширение источника данных и репозиториев 202
Создание структуры подсистемы администрирования 206
Создание временных компонентов 206
Подготовка общего контента и функционального модуля 207
Реализация работы с товарами 210
Реализация управления заказами 214
Итоги 216

Глава 10. SportsStore: развертывание 217
Подготовка приложения к развертыванию 217
Контейнеризация приложения SportsStore 217
Установка Docker 218
Подготовка приложения 218
Создание контейнера 220
Запуск приложения 220
Итоги 221

Глава 11. Создание проекта Angular 222
Подготовка проекта Angular с использованием TypeScript 223
Создание структуры папок проекта 223
Создание документа HTML 223
Подготовка конфигурации проекта 224
Добавление пакетов 225
Настройка компилятора TypeScript 229
Настройка сервера HTTP для разработки 231
Запуск процессов-наблюдателей 234
Начало разработки приложений Angular с TypeScript 234
Создание модели данных 238
Создание репозитория модели 239
Создание шаблона и корневого компонента 241
Создание модуля Angular 242
Начальная загрузка приложения 243
Настройка загрузчика модулей JavaScript 244
Разрешение модулей RxJS 245
Разрешение нестандартных модулей приложения 246
Разрешение модулей Angular 246
Обновление документа HTML 248
Применение загрузчика модулей JavaScript 249
Стилевое оформление контента 249
Запуск приложения 250
Итоги 251

Глава 12. Привязки данных 252
Подготовка проекта 253
Односторонние привязки данных 254
Цель привязки 256
Привязки свойств 257
Выражения в привязках данных 257
Квадратные скобки 258
Управляющий элемент 259
Стандартные привязки свойств и атрибутов 260
Стандартные привязки свойств 260
Привязки со строковой интерполяцией 262
Привязки атрибутов 263
Назначение классов и стилей 264
Привязки классов 265
Назначение всех классов элемента с использованием стандартной привязки 265
Назначение отдельных классов с использованием специальной привязки класса 267
Назначение классов директивой ngClass 268
Привязки стилей 270
Назначение одного стилевого свойства 270
Назначение стилей директивой ngStyle 272
Обновление данных в приложении 274
Итоги 276

Глава 13. Встроенные директивы 277
Подготовка проекта 278
Использование встроенных директив 280
Директива ngIf 280
Директива ngSwitch 283
Предотвращение проблем с литералами 284
Директива ngFor 286
Минимизация операций с элементами 292
Использование директивы ngTemplateOutlet 296
Предоставление контекстных данных 297
Ограничения односторонних привязок данных 299
Идемпотентные выражения 299
Контекст выражения 302
Итоги 304

Глава 14. События и формы 305
Подготовка проекта 306
Добавление модуля 306
Подготовка компонента и шаблона 308
Использование привязки события 309
Динамически определяемые свойства 311
Использование данных события 314
Использование ссылочных переменных шаблона 316
Двусторонние привязки данных 318
Директива ngModel 319
Работа с формами 321
Добавление формы в приложение 321
Проверка данных форм 324
Стилевое оформление элементов с использованием классов
проверки данных 325
Вывод сообщений проверки данных на уровне полей 328
Использование компонента для вывода сообщений проверки данных 332
Проверка данных для всей формы 334
Вывод сводки проверки данных 337
Блокировка кнопки отправки данных 339
Использование форм на базе моделей 341
Включение поддержки форм на базе моделей 341
Определение классов модели для формы 342
Использование модели для проверки 346
Генерирование элементов по модели 350
Нестандартные правила проверки данных 351
Нестандартные классы проверки данных 351
Применение нестандартной проверки данных 352
Итоги 354

Глава 15. Создание директив атрибутов 355
Подготовка проекта 356
Создание простой директивы атрибута 359
Применение нестандартной директивы 360
Обращение к данным приложения в директиве 361
Чтение атрибутов управляющего элемента 361
Использование одного атрибута управляющего элемента 363
Создание входных свойств с привязкой к данным 364
Реакция на изменения входных свойств 367
Создание нестандартных событий 369
Привязка нестандартного события 372
Создание привязок управляющих элементов 373
Создание двусторонней привязки для управляющего элемента 374
Экспортирование директивы для использования в переменной шаблона 378
Итоги 381

Глава 16. Создание структурных директив 382
Подготовка проекта 383
Создание простой структурной директивы 384
Реализация класса структурной директивы 385
Регистрация структурной директивы 388
Определение исходного значения выражения 389
Компактный синтаксис структурных директив 390
Создание итеративных структурных директив 391
Предоставление дополнительных контекстных данных 394
Компактный структурный синтаксис 396
Изменения данных на уровне свойств 397
Изменения данных на уровне коллекции 399
Отслеживание представлений 406
Запрос контента управляющего элемента 410
Получение информации о нескольких контентных потомках 414
Получение уведомлений об изменениях в запросах 415
Итоги 417

Глава 17. Компоненты 418
Подготовка проекта 419
Применение компонентов для формирования структуры приложения 420
Создание новых компонентов 421
Новая структура приложения 424
Определение шаблонов 425
Определение внешних шаблонов 427
Использование привязок данных в шаблонах компонентов 428
Использование входных свойств для координации между компонентами 429
Использование директив в шаблоне дочернего компонента 431
Использование выходных свойств для координации между компонентами 432
Проецирование контента управляющего элемента 434
Завершение реструктуризации компонента 437
Использование стилей компонентов 437
Определение внешних стилей компонентов 439
Расширенные возможности стилей 440
Использование селекторов CSS теневой модели DOM 443
Выбор управляющего элемента 443
Выбор предков управляющего элемента 444
Продвижение стиля в шаблон дочернего компонента 446
Запрос информации о контенте шаблона 448
Итоги 450

Глава 18. Использование и создание каналов 451
Подготовка проекта 452
Установка полизаполнения интернационализации 454
Каналы 457
Создание нестандартного канала 458
Регистрация нестандартного канала 459
Применение нестандартного канала 460
Объединение каналов 461
Создание нечистых каналов 462
Использование встроенных каналов 466
Форматирование чисел 467
Форматирование денежных величин 470
Форматирование процентов 473
Форматирование дат 474
Изменение регистра символов в строке 478
Сериализация данных в формате JSON 479
Срезы массивов данных 480
Итоги 482

Глава 19. Службы 483
Подготовка проекта 484
Проблема распределения объектов 485
Суть проблемы 485
Распределение объектов как служб, использующих внедрение зависимостей 490
Регистрация службы 493
Анализ изменений при использовании внедрения зависимостей 494
Объявление зависимостей в других структурных блоках 496
Объявление зависимостей в директивах 499
Проблема изоляции тестов 503
Изоляция компонентов с использованием служб и внедрение зависимостей 503
Регистрация служб 505
Подготовка зависимого компонента 505
Переход на работу со службами 506
Обновление корневого компонента и шаблона 507
Обновление дочерних компонентов 508
Итоги 510

Глава 20. Провайдеры служб 511
Подготовка проекта 513
Использование провайдеров служб 514
Использование провайдера класса 517
Для чего нужен маркер? 518
Класс OpaqueToken 519
Свойство useClass 521
Разрешение зависимостей с множественными объектами 523
Использование провайдера значения 525
Использование провайдера фабрики 527
Использование провайдера существующей службы 530
Использование локальных провайдеров 531
Ограничения модели с одним объектом службы 531
Создание локальных провайдеров в директиве 533
Создание локальных провайдеров в компонентах 535
Создание локального провайдера для всех потомков 538
Создание провайдера для потомков представлений 538
Управление разрешением зависимостей 540
Ограничения при поиске провайдера 540
Игнорирование самоопределяемых провайдеров 541
Итоги 542

Глава 21. Использование и создание модулей 543
Подготовка проекта 544
Корневой модуль 546
Свойство imports 548
Свойство declarations 548
Свойство providers 549
Свойство bootstrap 549
Создание функциональных модулей 551
Создание модуля модели 553
Создание определения модуля 554
Обновление других классов в приложении 555
Обновление корневого модуля 556
Создание вспомогательного функционального модуля 557
Обновление классов в новом модуле 559
Создание определения модуля 559
Свойство imports 560
Свойство providers 560
Свойство declarations 561
Свойство exports 561
Обновление других классов в приложении 561
Обновление корневого модуля 563
Создание функционального модуля с компонентами 563
Создание папки модуля и перемещение файлов 563
Обновление URL шаблонов 564
Создание определения модуля 566
Обновление корневого модуля 567
Итоги 567

Глава 22. Создание проекта 568
Начало работы над проектом 568
Добавление и настройка пакетов 569
Настройка TypeScript 570
Настройка сервера HTTP для разработки 571
Настройка загрузчика модулей JavaScript 571
Создание модуля модели 571
Создание типа данных Product 572
Создание источника данных и репозитория 572
Завершение модуля модели 574
Создание базового модуля 574
Создание службы общего состояния 574
Создание компонента таблицы 575
Создание шаблона компонента таблицы 576
Создание компонента формы 576
Создание шаблона для компонента формы 577
Создание базового модуля 578
Создание модуля сообщений 579
Создание модели сообщения и службы 579
Создание компонента и шаблона 580
Завершение модуля сообщений 581
Завершение проекта 581
Создание файла начальной загрузки Angular 582
Создание модуля Reactive Extensions 582
Создание документа HTML 583
Запуск приложения 584
Итоги 585

Глава 23. Reactive Extensions 586
Подготовка проекта 587
Суть проблемы 588
Решение проблемы при помощи Reactive Extensions 591
Объекты Observable 592
Объекты Observer 594
Объекты Subject 595
Использование канала async 596
Использование канала async с нестандартными каналами 598
Масштабирование функциональных модулей приложения 600
Расширенные возможности 602
Фильтрация событий 603
Преобразование событий 605
Использование разных объектов событий 606
Получение уникальных событий 607
Нестандартная проверка равенства 608
Передача и игнорирование событий 609
Итоги 611

Глава 24. Асинхронные запросы HTTP 612
Подготовка проекта 613
Настройка загрузчика модулей JavaScript 615
Настройка функционального модуля модели 615
Обновление компонента формы 616
Запуск проекта 617
REST-совместимые веб-службы 618
Замена статического источника данных 619
Создание новой службы источника данных 619
Настройка источника данных 622
Использование REST-совместимого источника данных 623
Сохранение и удаление данных 625
Консолидация запросов HTTP 627
Создание междоменных запросов 629
Использование запросов JSONP 631
Настройка заголовков запроса 633
Обработка ошибок 636
Генерирование сообщений для пользователя 637
Обработка ошибок 638
Итоги 640

Глава 25. Маршрутизация и навигация: часть 1 641
Подготовка проекта 642
Блокировка вывода событий изменения состояния 644
Знакомство с маршрутизацией 646
Создание конфигурации маршрутизации 646
Создание компонента маршрутизации 648
Обновление корневого модуля 649
Завершение конфигурации 650
Добавление навигационных ссылок 650
Эффект маршрутизации 653
Завершение реализации маршрутизации 656
Обработка изменений маршрутов в компонентах 656
Использование параметров маршрутов 659
Множественные параметры маршрутов 661
Необязательные параметры маршрутов 664
Навигация в программном коде 665
Получение событий навигации 667
Удаление привязок событий и вспомогательного кода 670
Итоги 672

Глава 26. Маршрутизация и навигация: часть 2 673
Подготовка проекта 673
Добавление компонентов в проект 676
Универсальные маршруты и перенаправления 679
Универсальные маршруты 679
Перенаправления в маршрутах 683
Навигация внутри компонента 684
Реакция на текущие изменения маршрутизации 685
Стилевое оформление ссылок для активных маршрутов 688
Исправление всех кнопок 691
Создание дочерних маршрутов 692
Создание элемента router-outlet для дочернего маршрута 693
Обращение к параметрам из дочерних маршрутов 695
Итоги 699

Глава 27. Маршрутизация и навигация: часть 3 700
Подготовка проекта 700
Защитники маршрутов 702
Отложенная навигация с использованием резольвера 703
Создание службы резольвера 704
Регистрация службы резольвера 706
Применение резольвера 706
Отображение временного контента 707
Использование резольвера для предотвращения проблем со вводом URL 708
Блокировка навигации с использованием защитников 710
Предотвращение активизации маршрута 711
Консолидация защитников дочерних маршрутов 715
Предотвращение деактивизации маршрутов 718
Динамическая загрузка функциональных модулей 723
Создание простого функционального модуля 724
Динамическая загрузка модулей 726
Создание маршрута для динамической загрузки модуля 726
Использование динамически загружаемого модуля 728
Защита динамических модулей 729
Применение защитника динамической загрузки 731
Именованные элементы router-outlet 732
Создание дополнительных элементов router-outlet 733
Навигация при использовании нескольких элементов router-outlet 735
Итоги 737

Глава 28. Анимация 738
Подготовка проекта 739
Добавление полизаполнения анимации 740
Отключение задержки HTTP 741
Упрощение шаблона таблицы и конфигурации маршрутизации 742
Основы работы с анимацией в Angular 744
Создание анимации 745
Определение групп стилей 745
Определение состояний элементов 746
Определение переходов состояний 747
Применение анимации 748
Тестирование эффекта анимации 751
Встроенные состояния анимации 753
Переходы элементов 754
Создание переходов для встроенных состояний 755
Анимация добавления и удаления элементов 755
Управление анимацией переходов 756
Определение начальной задержки 758
Использование дополнительных стилей во время перехода 759
Параллельные анимации 760
Группы стилей анимации 762
Определение общих стилей в группах для многократного использования 762
Использование преобразований элементов 763
Применение стилей фреймворка CSS 765
События триггеров анимации 767
Итоги 770

Глава 29. Модульное тестирование в Angular 771
Подготовка проекта 773
Добавление пакетов тестирования 774
Настройка Karma 775
Создание простого модульного теста 777
Запуск инструментария 778
Работа с Jasmine 779
Тестирование компонентов Angular 781
Работа с классом TestBed 781
Настройка TestBed для работы с зависимостями 783
Тестирование привязок данных 785
Тестирование компонента с внешним шаблоном 787
Тестирование событий компонентов 789
Тестирование выходных свойств 791
Тестирование входных свойств 793
Тестирование с асинхронными операциями 796
Тестирование директив Angular 798
Итоги 800