Изучаем Angular 2
Покупка
Издательство:
ДМК Пресс
Автор:
Дилеман Пабло
Перевод:
Рагимов Р. Н.
Под науч. ред.:
Киселев Артём Николаевич
Год издания: 2017
Кол-во страниц: 354
Дополнительно
Вид издания:
Практическое пособие
Уровень образования:
ВО - Бакалавриат
ISBN: 978-5-97060-461-8
Артикул: 712429.01.99
Фреймворк Angular 2 полностью переписан с нуля для удовлетворения требований современных разработчиков, которым необходима высокая производительность и отзывчивость веб-приложений. Эта книга поможет вам освоить основы проектирования и разработки компонентов Angular 2, обеспечивая полный охват синтаксиса языка TypeScript. После создания первых компонентов мы объединим их в полноценное веб-приложение. Затем перейдем к реализации маршрутов в Angular 2, узнаем, как организовать поддержку разных состояний приложения и навигацию между компонентами. После этого мы займемся веб-формами и проверкой ввода пользователя, а затем используем новые знания как фундамент для изучения основ аутентификации пользователей и различных способов защиты страниц и разделов сайта. Также в этой книге рассматривается тема анимации компонентов и элементов DOM. В заключительной части дается детальное освещение приемов модульного тестирования, таких как службы, директивы, маршруты и фильтры. Издание предназначено веб-разработчикам, которые хотят освоить разработку современных мобильных и настольных веб-приложений следующего поколения с помощью Angular 2.
Тематика:
ББК:
УДК:
ОКСО:
- ВО - Бакалавриат
- 09.03.01: Информатика и вычислительная техника
- 09.03.02: Информационные системы и технологии
- 09.03.03: Прикладная информатика
- 09.03.04: Программная инженерия
ГРНТИ:
Скопировать запись
Фрагмент текстового слоя документа размещен для индексирующих роботов
Пабло Дилеман Изучаем Angular 2
Pablo Deeleman
Learning Angular 2
Your quick, no-nonsense guide
to building real-world apps
with Angular 2
BIRMINGHAM – MUMBAI
Пабло Дилеман Изучаем Angular 2 Краткое практическое руководство по созданию приложений с помощью Angular 2 Москва, 2017
УДК 004.738.5:004.4AngularJS ББК 32.973.26-018.2 Д46 Дилеман П. Д46 Изучаем Angular 2 / пер. с англ. Р. Н. Рагимова; под науч. ред. А. Н. Киселева. – М.: ДМК Пресс, 2017. – 354 с.: ил. ISBN 978-5-97060-461-8 Фреймворк Angular 2 полностью переписан с нуля для удовлетворения требо ваний современных разработчиков, которым необходима высокая производительность и отзывчивость веб-приложений. Эта книга поможет вам освоить основы проектирования и разработки компо нентов Angular 2, обеспечивая полный охват синтаксиса языка TypeScript. После создания первых компонентов мы объединим их в полноценное веб-приложение. Затем перейдем к реализации маршрутов в Angular 2, узнаем, как организовать поддержку разных состояний приложения и навигацию между компонентами. После этого мы займемся веб-формами и проверкой ввода пользователя, а затем используем новые знания как фундамент для изучения основ аутентификации пользователей и различных способов защиты страниц и разделов сайта. Также в этой книге рассматривается тема анимации компонентов и элементов DOM. В заключительной части дается детальное освещение приемов модульного тестирования, таких как службы, директивы, маршруты и фильтры. Издание предназначено веб-разработчикам, которые хотят освоить разработку современных мобильных и настольных веб-приложений следующего поколения с помощью Angular 2. УДК 004.738.5:004.4AngularJS ББК 32.973.26-018.2 Copyright ©Packt Publishing 2016. First published in the English language under the title “Learning Angular 2” – (9781785882074). Все права защищены. Любая часть этой книги не может быть воспроиз ведена в какой бы то ни было форме и какими бы то ни было средствами без письменного разрешения владельцев авторских прав. Материал, изложенный в данной книге, многократно проверен. Но по скольку вероятность технических ошибок все равно существует, издательство не может гарантировать абсолютную точность и правильность приводимых сведений. В связи с этим издательство не несет ответственности за возможные ошибки, связанные с использованием книги. ISBN 978-1-78588-207-4 (анг.) Copyright © 2016 Packt Publishing ISBN 978-5-97060-461-8 (рус.) © Оформление, издание, перевод, ДМК Пресс, 2017
Посвящаю эту книгу моим родителям Паулу и Пепе и памяти моего любимого брата Хосе Рауля. Ты будешь вечно жить в наших сердцах.
Содержание Об авторе ......................................................... 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 WebStorm ................................................................................................................ 46 Использование Gulp с другими интегрированными средами разработки .............................................................................................................. 46 Погружение в компоненты Angular 2 ................................................................ 48 Улучшение производительности .................................................................... 48 Методы компонента и обновление данных ................................................ 48 Добавление интерактивности в компонент ................................................ 51
Содержание 7 Улучшения для вывода данных в представлении и доработка пользовательского интерфейса ....................................................................... 53 Итоги ............................................................................................................................. 57 Глава 2. Введение в TypeScript ............................. 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
Содержание Привязка событий к выходным свойствам................................................. 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 Фильтр JSON.......................................................................................................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 API ...........................................................................................199 В каких случаях используются классы Request и RequestOptionsArgs .......................................................................................200 Объект Response .................................................................................................201 Обработка ошибок при выполнении Http-запросов .............................202 Внедрение класса Http и псевдоним HTTP_PROVIDERS................202
Содержание Пример: отслеживание данных по HTTP.......................................................204 Итоги ...........................................................................................................................209 Глава 7. Маршрутизация в Angular 2 .....................210 Добавление поддержки маршрутизатора Angular 2 ...................................211 Настройка службы маршрутизации .................................................................212 Создание нового компонента для демонстрационных целей ..................214 Настройка декоратора RouteConfig с помощью экземпляров RouteDefinition ...................................................................................................216 Директивы маршрутизатора RouterOutlet и RouterLink ....................218 Принудительный переход по маршрутам .................................................220 CSS-ловушки для активных маршрутов ...................................................222 Параметры обработки маршрута .......................................................................222 Передача динамических параметров в маршрутах ................................223 Разбор параметров маршрута с помощью службы RouteParams ......225 Определение дочерних маршрутизаторов .....................................................227 События жизненного цикла маршрутизатора ..............................................230 Событие CanActivate ........................................................................................231 Событие OnActivate..........................................................................................233 События CanDeactivate и OnDeactivate ....................................................234 События CanReuse и OnReuse ......................................................................235 Переадресация на другие маршруты ..........................................................237 Точная настройка базового пути ..................................................................238 Настройка генерируемых URL-адресов с учетом стратегии размещения ..........................................................................................................239 Асинхронная загрузка компонентов с помощью AsyncRoutes ..........240 Итоги ...........................................................................................................................241 Глава 8. Формы и аутентификация в Angular 2........243 Двухсторонняя привязка данных в Angular 2 ...............................................244 Директива NgModel ..........................................................................................245 Типы привязки к форме с помощью директивы NgModel ..................247 Отслеживание изменений и проверка допустимости данных ................251 Элементы управления, группы элементов управления и класс FormBuilder ...............................................................................................................255 Объекты Control и Validator ..........................................................................256 Элементы управления в модели DOM и директива ngControl .........257 Группировка элементов в модели DOM с помощью директивы NgControlGroup ..................................................................................................258