Об авторе............................................................................................................. 22
О научном редакторе.......................................................................................... 22
От издательства.................................................................................................. 22
Глава 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
8   Оглавление
Фильтрация задач ................................................................................................... 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
Оглавление 9
Использование загрузчика модулей 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
10    Оглавление
Глава 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
Оглавление 11
Использование 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
12   Оглавление
Разрешение модулей 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
Оглавление 13
Глава 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
14   Оглавление
Глава 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
Оглавление 15
Создание нестандартного канала ................................................................................ 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
16   Оглавление
Создание локальных провайдеров в директиве...................................................... 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
Оглавление 17
Создание источника данных и репозитория................................................................. 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
18   Оглавление
Замена статического источника данных ...................................................................... 619
Создание новой службы источника данных............................................................ 619
Настройка источника данных................................................................................. 622
Использование REST-совместимого источника данных ........................................... 623
Сохранение и удаление данных ............................................................................. 625
Консолидация запросов HTTP..................................................................................