Angular и TypeScript. Сайтостроение для профессионалов

Библиотека программиста. Практическое руководство.

Файн Яков, Моисеев Антон «Angular и TypeScript. Сайтостроение для профессионалов» Питер, 2018 год, 464 стр., ISBN: 978-5-4461-0496-3; (40,3 мб. pdf + 15,1 мб. epub)

Это руководство посвящено Angular 2 — фреймворку предназначенному для веб-разработки, главной особенностью которого является его изначальная ориентированность на язык TypeScript. При том, что поддержка JavaScript (ES5 и ES6) по-прежнему присутствует, TypeScript остается преимущественно рекомендованным языком разработки. Если вы web-разработчик, то фреймворк Angular будет для вас просто находкой при создании собственных проектов, начиная от веб-клиентов до многофункциональных одностраничных приложений, с безопасным и легкосопровождаемым кодом со строгой типизацией.

Вы научитесь: разрабатывать и создавать модульные приложения, правильно транспилировать TypeScript в JavaScript, использовать инструменты JavaScript — в том числе, npm, Karma и Webpack (на примере реального приложения — онлайн-аукциона). Для комфортного изучения пособия вам необходимы знания языка JavaScript, если вам знаком этот язык, то читайте и изучайте книгу.

Оглавление книги

Содержание.

Глава 1. Знакомство с Angular 22
1.1. Примеры фреймворков и библиотек JavaScript 23
1.1.1. Полноценные фреймворки 23
1.1.2. Легковесные фреймворки 23
1.1.3. Библиотеки 24
1.1.4. Что такое Node.js 25
1.2. Общий обзор AngularJS 26
1.3. Общий обзор Angular 30
1.3.1. Упрощение кода 30
1.3.2. Улучшение производительности 36
1.4. Инструментарий Angular-разработчика 38
1.5. Как все делается в Angular 42
1.6. Знакомство с приложением-примером 43
1.7. Резюме 46

Глава 2. Приступаем к работе с Angular 47
2.1. Первое приложение для Angular 47
2.1.1. Hello World с использованием TypeScript 48
2.1.2. Hello World с помощью ES5 52
2.1.3. Hello World с помощью ES6 54
2.1.4. Запуск приложений 55
2.2. Элементы Angular-приложения 56
2.2.1. Модули 56
2.2.2. Компоненты 57
2.2.3. Директивы 59
2.2.4. Краткое введение в привязку данных 60
2.3. Универсальный загрузчик модулей SystemJS 61
2.3.1. Обзор загрузчиков модулей 61
2.3.2. Загрузчики модулей против тегов <script> 62
2.3.3. Приступаем к работе с SystemJS 63
2.4. Выбираем менеджер пакетов 68
2.4.1. Сравниваем npm и jspm 70
2.4.2. Создаем проект Angular с помощью npm 71
2.5. Практикум: приступаем к работе над онлайн-аукционом 77
2.5.1. Первичная настройка проекта 79
2.5.2. Разработка главной страницы 81
2.5.3. Запуск онлайн-аукциона 89
2.6. Резюме 90

Глава 3. Навигация с помощью маршрутизатора Angular 91
3.1. Основы маршрутизации 92
3.1.1. Стратегии расположения 93
3.1.2. Составные части механизма навигации на стороне клиента 95
3.1.3. Навигация по маршрутам с помощью метода navigate() 103
3.2. Передача данных маршрутам 105
3.2.1. Извлечение параметров из объекта ActivatedRoute 105
3.2.2. Передача статических данных маршруту 108
3.3. Маршруты-потомки 108
3.4. Граничные маршруты 115
3.5. Создание одностраничного приложения, с несколькими областями отображения 120
3.6. Разбиение приложения на модули 124
3.7. «Ленивая» загрузка модулей 127
3.8. Практикум: добавление навигации в онлайн-аукцион 129
3.8.1. Создание ProductDetailComponent 130
3.8.2. Создание HomeComponent и рефакторинг кода 131
3.8.3. Упрощаем компонент ApplicationComponent 132
3.8.4. Добавление RouterLink в компонент ProductItemComponent 133
3.8.5. Изменение корневого модуля с целью добавления маршрутизации 134
3.8.6. Запуск аукциона 135
3.9. Резюме 136

Глава 4. Внедрение зависимостей 137
4.1. Шаблоны «Внедрение зависимостей» и «Инверсия управления» 138
4.1.1. Шаблон «Внедрение зависимостей» 138
4.1.2. Шаблон «Инверсия управления» 139
4.1.3. Преимущества внедрения зависимости 139
4.2. Инъекторы и поставщики 142
4.2.1. Как объявлять поставщики 144
4.3. Пример приложения, задействующего Angular DI 145
4.3.1. Внедрение сервиса продукта 145
4.3.2. Внедрение Http-сервиса 148
4.4. Переключение внедряемых объектов — это просто 150
4.4.1. Объявление поставщиков с помощью useFactory и useValue 153
4.4.2. Использование OpaqueToken 156
4.5. Иерархия инъекторов 157
4.5.1. viewProviders 159
4.6. Практикум: использование DI для приложения онлайн-аукциона 160
4.6.1. Изменение кода для передачи идентификатора продукта в качестве параметра 163
4.6.2. Изменение компонента ProductDetailComponent 163
4.7. Резюме 167

Глава 5. Привязки, наблюдаемые объекты и каналы 169
5.1. Привязка данных 169
5.1.1. Привязки к событиям 171
5.1.2. Привязка к свойствам и атрибутам 171
5.1.3. Привязка в шаблонах 176
5.1.4. Двухсторонняя привязка данных 179
5.2. Реактивное программирование и наблюдаемые потоки 182
5.2.1. Что такое «наблюдаемые потоки» и «наблюдатели» 182
5.2.2. Наблюдаемые потоки событий 185
5.2.3. Отменяем наблюдаемые потоки 190
5.3. Каналы 194
5.3.1. Пользовательские каналы 195
5.4. Практикум: фильтрация продуктов онлайн-аукциона 197
5.5. Резюме 201

Глава 6. Реализация коммуникации между компонентами 202
6.1. Коммуникация между компонентами 202
6.1.1. Входные и выходные свойства 203
6.1.2. Шаблон «Посредник» 210
6.1.3. Изменяем шаблоны во время работы программы
с помощью ngContent 215
6.2. Жизненный цикл компонента 219
6.2.1. Использование ngOnChanges 222
6.3. Краткий обзор определения изменений 226
6.4. Открываем доступ к API компонента-потомка 229
6.5. Практикум: добавление в онлайн-аукцион функциональности
для оценивания товаров 231
6.6. Резюме 238

Глава 7. Работа с формами 239
7.1. Обзор форм HTML 240
7.1.1. Стандартная функциональность браузера 240
7.1.2. Forms API в Angular 242
7.2. Шаблон-ориентированные формы 243
7.2.1. Обзор директив 244
7.2.2. Доработка формы HTML 246
7.3. Реактивные формы 248
7.3.1. Модель формы 248
7.3.2. Директивы форм 249
7.3.3. Переработка формы-примера 254
7.3.4. Использование FormBuilder 256
7.4. Валидация данных формы 256
7.4.1. Валидация реактивных форм 257
7.4.2. Выполнение валидации для примера формы регистрации 265
7.5. Практикум: добавление валидации в форму поиска 267
7.5.1. Изменение корневого модуля для добавления поддержки Forms API 267
7.5.2. Добавление списка категорий в компонент SearchComponent 268
7.5.3. Создание модели формы 269
7.5.4. Переработка шаблона 269
7.5.5. Реализация метода onSearch() 271
7.5.6. Запуск онлайн-аукциона 271
7.6. Резюме 271

Глава 8. Взаимодействие с серверами с помощью HTTP и WebSockets 272
8.1. Краткий обзор API Http-объектов 273
8.2. Создание веб-сервера с применением Node и TypeScript 276
8.2.1. Создание простого веб-сервера 276
8.2.2. Обслуживание формата JSON 278
8.2.3. Живая перекомпиляция TypeScript и перезагрузка кода 280
8.2.4. Добавление RESTful API для обслуживания товаров 281
8.3. Совместное использование Angular и Node 283
8.3.1. Статические ресурсы, имеющиеся на сервере 283
8.3.2. Выполнение GET-запросов с помощью Http-объекта 286
8.3.3. Распаковка наблюдаемых объектов в шаблонах с помощью AsyncPipe 289
8.3.4. Внедрение HTTP в сервис 290
8.4. Обмен данными между клиентом и сервером через веб-сокеты 294
8.4.1. Выдача данных с Node-сервера 295
8.4.2. Превращение WebSocket в наблюдаемый объект 298
8.5. Практикум: реализация поиска товара и уведомлений о ценовых предложениях 304
8.5.1. Реализация поиска товара с использованием HTTP 306
8.5.2. Распространение по сети ценовых предложений аукциона с использованием веб-сокетов 310
8.6. Резюме 314

Глава 9. Модульноетестирование Angular-приложений 315
9.1. Знакомство с Jasmine 316
9.1.1. Что именно тестировать 319
9.1.2. Порядок установки Jasmine 319
9.2. Средства, предоставляемые библиотекой тестирования Angular 321
9.2.1. Тестирование сервисов 322
9.2.2. Тестирование навигации с помощью маршрутизатора 323
9.2.3. Тестирование компонентов 324
9.3. Пример: тестирование приложения для составления прогнозов погоды 325
9.3.1. Настройка SystemJS 327
9.3.2. Тестирование маршрутизатора приложения для составления прогнозов погоды 327
9.3.3. Тестирование сервиса погоды 330
9.3.4. Тестирование компонента Weather 333
9.4. Запуск тестов с помощью Karma 337
9.5. Практикум: модульное тестирование онлайн-аукциона 340
9.5.1. Тестирование ApplicationComponent 342
9.5.2. Тестирование ProductService 342
9.5.3. Тестирование StarsComponent 343
9.5.4. Запуск тестов 346
9.6. Резюме 347

Глава 10. Упаковка и развертывание приложений с помощью Webpack 348
10.1. Знакомство с Webpack 350
10.1.1. Hello World с Webpack 352
10.1.2. Как использовать загрузчики 356
10.1.3. Как использовать дополнительные модули 361
10.2. Создание базовой конфигурации Webpack для Angular 361
10.2.1. Команда npm run build 365
10.2.2. Команда npm start 366
10.3. Создание конфигураций для разработки и для коммерческого применения 367
10.3.1. Конфигурация для разработки 367
10.3.2. Конфигурация для коммерческого применения 368
10.3.3. Специальный файл определения типов 371
10.4. Что такое Angular CLI 374
10.4.1. Запуск нового проекта с Angular CLI 375
10.4.2. Команды CLI 375
10.5. Практикум: развертывание онлайн-аукциона с помощью Webpack 377
10.5.1. Запуск Node-сервера 378
10.5.2. Запуск клиента аукциона 379
10.5.3. Запуск тестов с помощью Karma 383
10.6. Резюме 386

Приложения.

Приложение А. Общее представление о ECMAScript 6 388
A.1. Порядок запуска примеров кода 389
A.2. Литералы шаблонов 390
A.2.1. Строки с переносами 390
A.2.2. Тегированные шаблонные строки 391
A.3. Необязательные параметры и значения по умолчанию 392
A.4. Область видимости переменных 393
A.4.1. Поднятие переменных 393
A.4.2. Блочная область видимости с использованием let и const 395
A.4.3. Блочная область видимости для функций 397
A.5. Стрелочные функции, this и that 397
A.5.1. Операторы rest и spread 400
A.5.2. Генераторы 403
A.5.3. Деструктурирование 405
A.6. Итерация с помощью forEach(), for-in и for-of 408
A.6.1. Использование метода forEach() 408
A.6.2. Использование цикла for-in 409
A.6.3. Использование for-of 410
A.7. Классы и наследование 410
A.7.1. Конструкторы 412
A.7.2. Статические переменные 413
A.7.3. Геттеры, сеттеры и определение методов 414
A.7.4. Ключевое слово super и функция super 414
A.8. Асинхронная обработка с помощью промисов 416
A.8.1. Ад обратного вызова 417
A.8.2. Промисы ES6 418
A.8.3. Одновременное разрешение сразу нескольких промисов 421
A.9. Модули 422
A.9.1. Импорт и экспорт данных 423
A.9.2. Загрузка модулей в ES6 424

Приложение Б.TypeScript в качестве языка для приложений Angular 429
Б.1. Зачем создавать Angular-приложения на TypeScript 430
Б.2. Роль транспиляторов 431
Б.3. Начало работы с TypeScript 432
Б.3.1. Установка и применение компилятора TypeScript 433
Б.4. TypeScript как расширенная версия JavaScript 436
Б.5. Необязательные типы 436
Б.5.1. Функции 438
Б.5.2. Параметры по умолчанию 439
Б.5.3. Необязательные параметры 439
Б.5.4. Выражения стрелочных функций 440
Б.6. Классы 443
Б.6.1. Модификаторы доступа 445
Б.6.2. Методы 446
Б.6.3. Наследование 448
Б.7. Обобщения 450
Б.8. Интерфейсы 452
Б.8.1. Объявление пользовательских типов с помощью интерфейсов 453
Б.8.2. Использование ключевого слова implements 454
Б.8.3. Использование callable-интерфейсов 456
Б.9. Добавление метаданных класса с помощью аннотаций 459
Б.10. Файлы определения типов 460
Б.10.1. Установка файлов определения типов 460
Б.10.2. Управление стилем кода с помощью TSLINT 462
Б.11. Обзор процесса разработки TypeScript и Angular 463

Скачать техническую литературу бесплатно40,3 мб. pdf Скачать техническую литературу бесплатно15,1 мб. epub

Похожая литература