Erhalten Sie Zugang zu diesem und mehr als 300000 Büchern ab EUR 5,99 monatlich.
- Herausgeber: Питер
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Russisch
Если вы занимаетесь веб-разработкой – от веб-клиентов до полнофункциональных одностраничных приложений – то фреймворк Angular будет для вас просто спасением. Этот ультрасовременный инструмент полностью интегрирован со статически типизированным языком TypeScript, который отлично вписывается в экосистему JavaScript. Вы научитесь: •Проектировать и строить модульные приложения •Правильно транспилировать TypeScript в JavaScript •Пользоваться новейшими инструментами JavaScript – в частности, npm, Karma и Webpack Если вам знаком язык JavaScript - берите и читайте! Знаний TypeScript или AngularJS для изучения книги не требуется.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 482
Veröffentlichungsjahr: 2023
Das E-Book (TTS) können Sie hören im Abo „Legimi Premium” in Legimi-Apps auf:
Ähnliche
Переводчики Н. Вильчинский, Е. Зазноба
Технические редакторы Г. Синякина (Маклакова), Н. Хлебина
Литературные редакторы Н. Гринчик, Н. Хлебина
Художники С. Заматевская , Г. Синякина (Маклакова)
Корректоры Е. Павлович, Е. Рафалюк-Бузовская
Верстка Г. Блинов
Яков Файн, Антон Моисеев
Angular и TypeScript. Сайтостроение для профессионалов . — СПб.: Питер, 2018.
ISBN 978-5-4461-0496-3
© ООО Издательство "Питер", 2018
Все права защищены. Никакая часть данной книги не может быть воспроизведена в какой бы то ни было форме без письменного разрешения владельцев авторских прав.
Оглавление
Предисловие
Мы принялись подбирать хороший фреймворк для JavaScript примерно четыре года назад. Тогда мы работали над платформой для страховой компании и большая часть интерфейса системы была написана с помощью фреймворка Apache Flex (ранее известного как Adobe Flex). Это отличный инструмент для разработки веб-интерфейсов, но он требует наличия Flash Player, с некоторых пор впавшего в немилость.
После попыток создать несколько вводных проектов, написанных на JavaScript, мы обнаружили заметное снижение производительности наших разработчиков. Задача, выполнить которую с использованием Flex можно было за один день, требовала три дня работы в других фреймворках JavaScript, включая AngularJS. Основная причина спада — нехватка типов в JavaScript, недостаточная поддержка IDE и отсутствие поддержки компилятора.
Когда мы узнали, что компания Google начала разработку фреймворка Angular с TypeScript в качестве рекомендуемого языка, мы взяли данный фреймворк на вооружение летом 2015 г. В то время о нем было известно немногое. В нашем распоряжении была лишь информация из некоторых блогов и видеороликов, записанных на конференции, где команда разработчиков Angular представляла новый фреймворк. Нашим основным источником информации был его исходный код. Но вскоре мы обнаружили у Angular отличный потенциал, поэтому решили начать создавать с его помощью обучающее ПО для отдела разработки нашей компании. В то же время Майк Стивенс (Mike Stephens), сотрудник издательства Manning, искал авторов, заинтересованных в написании книги об Angular. Именно так и появилось это издание.
После года работы с Angular и TypeScript мы можем подтвердить: этот дуэт предоставляет наиболее продуктивный способ создания средних и крупных веб-приложений, которые могут работать в любом современном браузере, а также на мобильных платформах. Перечислим основные причины, позволившие нам прийти к такому выводу.
•Четкое разделение интерфейса и логики. Код, который отвечает за пользовательский интерфейс, и код, реализующий логику приложения, четко разделены. Интерфейс не должен создаваться в HTML, существуют другие продукты с поддержкой его нативной отрисовки для iOS и Android.
• Модульность. Существует простой механизм разбиения приложения на модули с возможностью их ленивой загрузки.
• Поддержка навигации. Маршрутизатор поддерживает сложные сценарии навигации в одностраничных приложениях.
• Слабое связывание. Внедрение зависимостей (Dependency Injection, DI) позволяет установить связь между компонентами и сервисами. С помощью связывания и событий есть возможность создавать слабо связанные компоненты, которые можно использовать повторно.
• Жизненный цикл компонентов. Каждый компонент проходит через тщательно определенный жизненный цикл, разработчикам доступны процедуры, позволяющие перехватывать важные события компонентов.
• Определение изменений. Автоматический (и быстрый) механизм определения изменений дает возможность отказаться от обновления интерфейса вручную, также предоставляя способ выполнить тонкую настройку этого процесса.
• Отсутствие ада обратных вызовов. Angular поставляется вместе с библиотекой RxJS, которая позволяет построить процесс обработки асинхронных данных, основанный на подписке, что помогает избежать появления ада обратных вызовов.
• Формы и валидация. Поддержка форм и пользовательская валидация хорошо спроектированы. Вы можете создавать формы, добавляя директивы к элементам формы как в шаблонах, так и программно.
• Тестирование. Фреймворк поддерживает модульное (блочное) и сквозное тестирование, вы можете интегрировать тесты в свой автоматизированный процесс сборки.
• Упаковка и оптимизация с помощью Webpack. Упаковка и оптимизация кода с помощью Webpack (и различных плагинов для него) позволяет поддерживать небольшой размер развертываемых приложений.
• Инструментальные средства. Инструментальные средства поддерживаются так же хорошо, как и для платформ Java и .NET. Анализатор кода TypeScript указывает на ошибки по мере набора текста, а инструмент для создания временных платформ и развертывания (Angular CLI) позволяет избегать написания стереотипного кода и сценариев конфигурирования.
• Лаконичный код. Использование классов и интерфейсов TypeScript делает код более лаконичным, а также упрощает его чтение и написание.
• Компиляторы. Компилятор TypeScript генерирует код JavaScript, который человек может прочитать. Код TypeScript может быть скомпилирован для версий JavaScript ES3, ES5 или ES6. Компиляция перед выполнением (Ahead-of-time, AoT) кода Angular (не путать с компилированием TypeScript) помогает избавиться от необходимости поставлять с вашим приложением компилятор для Angular, что еще больше снижает накладные расходы, требуемые для фреймворка.
• Отрисовка на стороне сервера. Angular Universal превращает ваше приложение в HTML на этапе сборки кода офлайн. Данный код может быть использован для отрисовки на стороне сервера, что, в свою очередь, значительно улучшает индексирование поисковыми системами и SEO.
Таким образом, Angular 2 готов к работе сразу после установки.
С точки зрения управления этот фреймворк может быть привлекательным, поскольку в мире более миллиона разработчиков предпочитают AngularJS и большинство из них переключатся на Angular. Эта версия была выпущена в сентябре 2016 г., и каждые полгода будут выпускаться новые крупные релизы. Команда разработчиков Angular потратила два года на разработку Angular 2.0, и к моменту выхода фреймворка более полумиллиона разработчиков уже использовали его. Наличие большого количества работников с определенными навыками — важный фактор, который следует учитывать при выборе технологий для новых проектов. Кроме того, платформами Java или .NET пользуются более 15 миллионов разработчиков, и многие из них сочтут синтаксис TypeScript гораздо более привлекательным, чем синтаксис JavaScript, благодаря поддержке классов, интерфейсов, обобщенных типов, аннотаций, переменных членов класса, а также закрытых и открытых переменных, не говоря о полезном компиляторе и поддержке известных IDE.
Писать книгу об Angular было трудно, поскольку мы начали работу с ранних альфа-версий фреймворка, которые изменились по мере перехода к бета- и релиз-версиям. Но нам нравится результат, и мы уже начали разрабатывать с помощью Angular проекты для решения задач реальной сложности.
Предисловие к русскому изданию
В эпоху бурного развития Интернета требования к сложности и качеству сайтов постоянно растут. Пользователям и организациям уже недостаточно простых статических страниц. В связи с этим давно наметился спрос на полноценные веб-приложения, однако до недавнего времени он удовлетворялся в основном за счет таких закрытых технологий, как Adobe Flex и JavaFX.
Около десяти лет назад ситуация начала меняться. Последовательная стандартизация языка JavaScript привела к появлению множества инструментов для веб-разработки, которые не требуют дополнений и поддерживаются во всех современных браузерах. Пожалуй, самым известным из них стал фреймворк Angular.
Angular разрабатывается компанией Google и при этом является полностью бесплатным и открытым. Это устоявшийся программный продукт, который пользуется большой популярностью как на корпоративном рынке, так и в небольших студиях. Количество программистов, работающих с ним, давно перевалило за миллион.
Эта книга посвящена Angular 2 — современной версии данного фреймворка. Он вобрал в себя все последние веяния в мире веб-разработки, сохранив традиционные черты, характерные для первой версии. Главной особенностью Angular 2 является его изначальная ориентированность на TypeScript. И хотя поддержка JavaScript (ES5 и ES6) по-прежнему присутствует, TypeScript остается основным языком разработки. Это, в сущности, надстройка над ECMAScript 6 со строгой типизацией. Развитая система типов и программных интерфейсов позволяет писать более безопасный и выразительный код, который легче сопровождать. Кроме того, TypeScript имеет отличную поддержку в современных средах разработки.
Еще одной ключевой особенностью Angular 2 является четкое разделение интерфейса и бизнес-логики. Это позволяет создавать компоненты, которые могут работать в том числе на таких мобильных операционных системах, как iOS и Android. Angular 2 позволяет разбивать код на модули, которые загружаются по мере необходимости и содержат описание своих зависимостей. Это значительно упрощает процедуру тестирования (как модульного, так и сквозного) и облегчает интеграцию тестов в процесс сборки.
Разработчикам доступен богатый инструментарий для написания и развертывания приложений. Автодополнение кода, упаковка и оптимизация, отрисовка на стороне сервера, компиляция (статическая и на лету) — все это становится возможным благодаря современным технологиям, на которых основаны Angular 2 и TypeScript. В частности, для управления проектами предусмотрена утилита командной строки Angular CLI, а для создания гибких пользовательских интерфейсов компания Google предоставляет библиотеку компонентов Angular Material 2.
На протяжении двух лет разработкой Angular 2 занимались сотни программистов. Все старания были направлены на то, чтобы вы получили современный инструмент, полностью готовый к работе сразу после установки. Этот фреймворк покрывает собой все аспекты создания сложных веб-приложений, начиная с обработки событий и навигации и заканчивая развертыванием в промышленных масштабах. Все это и многое другое подробно рассматривается на страницах книги.
Благодарности
Оба автора хотели бы поблагодарить издательство Manning Publications и Алана М. Кауниота (Alain M. Couniot) за его предложения по улучшению технической стороны книги и Коди Сэнда (Cody Sand) — за техническую редактуру. Благодарим также следующих рецензентов, предоставивших ценную обратную связь: Криса Коппенбаргера (Chris Coppenbarger), Дэвида Баркола (David Barkol), Дэвида Ди Мария (David DiMaria), Фредрика Энгберга (Fredrik Engberg), Ирака Илиша Рамоса Эрнандеса (Irach Ilish Ramos Hernandez), Джереми Брайана (Jeremy Bryan), Камала Раджа (Kamal Raj), Лори Уилкинс (Lori Wilkins), Мауро Керциоли (Mauro Quercioli), Себастьяна Нишеля (Sebastien Niche`le), Полину Кесельман (Polina Keselman), Субира Растоги (Subir Rastogi), Свена Лесекана (Sven Lo..sekann) и Висама Цагала (Wisam Zaghal).
Яков хотел бы поблагодарить своего лучшего друга Сэмми (Sammy) за создание теплой и комфортной атмосферы во время работы над этой книгой. К сожалению, Сэмми не умеет разговаривать, но, безусловно, любит Якова. Порода Сэмми — золотистый ретривер.
Антон хотел бы поблагодарить Якова Файна (Yakov Fain) и издательство Manning Publications за полученную возможность стать соавтором книги и приобрести бесценный писательский опыт. Он также благодарен своей семье за терпение, которое она проявляли, пока он работал над книгой.
Об этой книге
Программы на Angular могут быть написаны с помощью двух версий JavaScript (ES5 и ES6), а также на языках Dart или TypeScript. Сам фреймворк разработан с использованием TypeScript, и именно его мы будем задействовать во всех примерах нашей книги. В приложении Б вы найдете раздел «Зачем создавать Angular-приложения1 на TypeScript», где мы объясняем причины, по которым выбрали этот язык.
Поскольку мы по своей природе практики, то и книгу писали для практиков. Мы не только объясним особенности фреймворка, приводя простые примеры кода, но и на протяжении нескольких глав покажем, как создать одностраничное приложение для онлайн-аукционов.
Во время написания и редактирования данной книги мы провели несколько семинаров с использованием примеров кода. Это позволило получить раннюю (и крайне положительную) обратную связь об изложенном материале. Мы очень надеемся на то, что вам понравится изучать Angular.
Как читать книгу
Ранние версии книги начинались с глав, посвященных ECMAScript 6 и TypeScript. Некоторые редакторы предложили переместить этот материал в приложения, чтобы читатели смогли быстрее приступить к изучению Angular. Мы согласились с таким изменением. Но если вы еще не знакомы с синтаксисом ECMAScript 6 и TypeScript, то информация, представленная в приложениях, поможет разобраться в примерах кода каждой главы.
Структура издания
Книга состоит из десяти глав и двух приложений.
В главе 1 приводится обзор архитектуры Angular, кратко рассматриваются популярные фреймворки и библиотеки JavaScript. Вы также познакомитесь с приложением для онлайн-аукционов, которое начнете разрабатывать в главе 2.
Вы будете разрабатывать эту программу с помощью TypeScript. Информация, изложенная в приложении Б, позволит приступить к работе с этим замечательным языком, представляющим собой расширенный набор функций языка JavaScript. Вы узнаете не только о том, как писать классы, интерфейсы и обобщенные классы, но и как скомпилировать код TypeScript для современных версий JavaScript, которые могут быть развернуты во всех браузерах. В TypeScript реализована большая часть синтаксиса спецификации ECMAScript 6 (она рассматривается в приложении A), а также синтаксис, который будет включен в будущие релизы ECMAScript.
В главе 2 вы начнете разрабатывать простые приложения с помощью Angular и создадите свои первые Angular-компоненты. Вы узнаете, как работать с загрузчиком модулей SystemJS, и мы предложим вам свою версию стартового проекта Angular, который может быть использован в качестве отправной точки для всех примеров приложений этой книги. В конце главы вы создадите первую версию главной страницы для онлайн-аукциона.
Глава 3 посвящена маршрутизатору Angular, предлагающему гибкий способ настройки навигации в одностраничных приложениях. Вы узнаете, как сконфигурировать маршруты для компонентов-предков и компонентов-потомков, передавать данные из одного маршрута в другой и выполнять «ленивую» загрузку модулей. В конце главы вы проведете рефакторинг для онлайн-аукциона, разбив его на несколько элементов и добавив для них маршрутизацию.
В главе 4 представлена информация о шаблоне (паттерне) «Внедрение зависимостей» и его реализации в Angular. Вы познакомитесь с концепцией поставщиков, которая позволит указать, как создавать объекты внедряемых зависимостей. В новой версии онлайн-аукциона вы примените внедрение зависимостей для наполнения данными представления Product Details (Информация о продукте).
В главе 5 мы рассмотрим разные виды привязки данных, познакомим вас с реактивным программированием с помощью наблюдаемых потоков данных и покажем, как работать с каналами. Глава заканчивается новой версией онлайн-аукциона: в нее добавлен наблюдаемый поток событий, используемый для фильтрации популярных продуктов на главной странице.
Глава 6 посвящена разработке компонентов, которые могут общаться друг с другом в слабо связанной манере. Мы рассмотрим их входные и выходные параметры, шаблон проектирования «Посредник», а также жизненный цикл компонента. Кроме того, в этой главе приводится обзор механизма обнаружения изменений, представленного в Angular. Онлайн-аукцион приобретет функциональность оценки продуктов.
Глава 7 посвящена обработке форм в Angular. После рассмотрения основ Forms API мы обсудим валидацию форм и реализуем ее в поисковом компоненте для еще одной версии онлайн-аукциона.
В главе 8 мы объясним, как клиентское Angular-приложение может взаимодействовать с серверами, используя протоколы HTTP и WebSocket, и рассмотрим примеры. Вы создадите серверное приложение, применяя фреймворки Node.js и Express. Далее вы развернете фрагмент онлайн-аукциона, написанный на Angular, на сервере Node. С помощью клиентской части (front end) аукциона можно будет начать общаться с сервером Node.js с применением протоколов HTTP и WebSocket.
Глава 9 посвящена модульному тестированию. Мы рассмотрим основные принципы работы с Jasmine и библиотекой для проверки Angular. Вы узнаете, как тестировать сервисы, компоненты и маршрутизатор, сконфигурировать и использовать Karma для запуска тестов, а также реализуете несколько модульных тестов для онлайн-аукциона.
Глава 10 посвящена автоматизации процессов сборки и развертывания. Вы увидите, как можно применять упаковщик Webpack для минимизации и упаковки вашего кода для развертывания.
Кроме того, вы узнаете, как использовать Angular CLI для генерации и развертывания проектов. Размер развернутой версии онлайн-аукциона снизится с 5,5 Мбайт (в разработке) до 350 Кбайт (на производстве).
В приложении A вы познакомитесь с новым синтаксисом, добавленным в ECMAScript 2015 (также известным как ES6). Приложение Б содержит вводную информацию о языке TypeScript.
Соглашения, принятые в этой книге, и материалы для скачивания
В данной книге содержится множество примеров исходного кода, который отформатирован с использованием моноширинного шрифта, чтобы выделить его на фоне обычного текста. Нередко оригинальный исходный код переформатирован; добавлены разрывы строк, а также переработаны отступы с учетом свободного места на страницах. Кроме того, комментарии к исходному коду были удалены там, где код описан в тексте. Во многих листингах приведены комментарии, указывающие на важные концепции.
Исходный код примеров книги доступен для загрузки с сайта издателя https://www.manning.com/books/angular-2-development-with-typescript.
Авторы также создали репозиторий на GitHub, в котором содержатся примеры исходного кода, на https://github.com/Farata/angular2typescript. Если в результате выхода новых релизов Angular какие-то примеры перестанут работать, то на указанной странице вы можете рассказать об этом и авторы постараются разобраться с проблемой.
1Здесь и далее: имеется в виду приложение, созданное с помощью Angular. — Примеч. ред.
Об авторах
Яков Файн (Yakov Fain) является сооснователем двух компаний: Farata Systems и SuranceBay. Farata Systems — фирма, занимающаяся IT-консалтингом. Яков руководит отделом обучения и проводит семинары по Angular и Java по всему миру. SuranceBay — производственная компания, которая автоматизирует различные рабочие потоки в отрасли страхования в Соединенных Штатах, предлагая приложения, использующие ПО как услугу (Software as a Service, SaaS). В этой компании Яков руководит различными проектами.
Яков — большой энтузиаст Java. Он написал множество книг, посвященных разработке ПО, а также более тысячи статей в блоге по адресу yakovfain.com. Кроме того, его книга Java Programming for Kids, Parents and Grandparents («Программирование на Java для детей, родителей, бабушек и дедушек») доступна для бесплатного скачивания на нескольких языках по адресу http://myflex.org/books/java4kids/java4kids.htm. Его никнейм в Twitter — @yfain.
Антон Моисеев (Anton Moiseev) — ведущий разработчик ПО в компании SuranceBay. Он более десяти лет занимается разработкой промышленных приложений с помощью технологий Java и .NET и имеет богатый опыт создания многофункциональных интернет-приложений для разных платформ. Сфера деятельности Антона — веб-технологии, причем он специализируется на приемах, позволяющих фронтенду и бэкенду без проблем взаимодействовать друг с другом. Он провел множество занятий, посвященных фреймворкам AngularJS и Angular 2.
Время от времени Антон пишет статьи в блоге по адресу antonmoiseev.com. Его никнейм в Twitter — @anton-moiseev.
2. Приступаем к работе с Angular
В этой главе:
• написание вашего первого Angular-приложения;
• знакомство с универсальным загрузчиком модулей SystemJS;
• роль менеджеров пакетов;
• первая версия приложения для онлайн-аукциона.
В данной главе мы рассмотрим вопрос разработки Angular-приложений с помощью современных инструментов и веб-технологий, таких как аннотации, модули ES6 и загрузчики модулей. Angular изменяет привычный способ разработки приложений, написанных на JavaScript. Вы напишете три версии приложения Hello World. Кроме того, мы кратко рассмотрим менеджеры пакетов и универсальные загрузчики модулей SystemJS.
После этого мы создадим небольшой проект, который послужит шаблоном для создания ваших собственных проектов с помощью Angular. Далее мы рассмотрим основные составные части Angular-приложений, например компоненты и представления, а также внедрение зависимостей и привязку данных. В конце главы познакомимся с приложением для онлайн-аукционов, которое вы будете разрабатывать на протяжении книги.
СОВЕТ
Если вы не знакомы с синтаксисом TypeScript и ECMAScript 6, то рекомендуем обратиться к приложениям А и Б, а затем продолжать чтение с данной главы.
2.1. Первое приложение для Angular
В этом разделе мы покажем три версии приложения Hello World, разработанные с помощью TypeScript, ES5 и ES6. Только здесь вы увидите Angular-приложения, написанные на ES5 и ES6, — все остальные фрагменты кода будут созданы с применением TypeScript.
2.1.1. Hello World с использованием TypeScript
Первое приложение выглядит довольно минималистично и поможет быстро начать работу с Angular. Оно состоит из двух файлов:
|──── index.html
└─── main.ts
Оба файла располагаются в каталоге hello-world-ts загружаемого кода для данной книги. Файл index.html — точка входа в приложение. Он содержит ссылки на фреймворк Angular, его зависимости, а также файл main.ts, включающий код для инициализации вашего приложения. Некоторые из этих ссылок могут находиться в конфигурационном файле загрузчика модулей (в рамках книги вы будете использовать загрузчики SystemJS и Webpack).
Загрузка ANGULAR в файле HTML
Код фреймворка Angular состоит из модулей (по одному файлу на модуль), которые объединяются в библиотеки, группируемые логически в пакеты наподобие @angular/core, @angular/common и пр. Ваше приложение должно загрузить требуемые пакеты до того, как будет загружен код приложения.
Теперь создадим файл index.html, работа которого будет начинаться с загрузки требуемых сценариев Angular, компилятора TypeScript и загрузчика модулей SystemJS.
В следующем фрагменте кода, приведенном в листинге 2.1, эти сценарии загружаются из сети распространения контента (content delivery network, CDN) https://unpkg.com/#/.
Листинг 2.1. Фрагмент содержимого файла TypeScript index.html
Когда приложение запущено, тег <hello-world> будет заменен содержимым шаблона из аннотации @Component, показанной в листинге 2.2.
СОВЕТ
Если вы используете Internet Explorer, то вам может понадобиться добавить дополнительный сценарий system-polyfills.js.
Сети распространения контента (Content delivery networks, CDNs)
unpkg (https://unpkg.com/#/) — сеть распространения контента для пакетов, опубликованных в реестре менеджера пакетов npm (https://www.npmjs.com/). Обратитесь к npmjs.com, чтобы найти последнюю версию необходимого вам пакета. Если хотите увидеть, какие еще версии этого пакета доступны, то запустите команду npm info packagename.
Сгенерированные файлы не отправляются в систему контроля версий, и Angular 2 не предоставляет готовых к использованию пакетов в своем репозитории Git. Они генерируются автоматически и публикуются вместе с пакетом npm (https://www.npmjs.com/~angular), в связи с чем вы можете применять unpkg так, чтобы непосредственно сослаться на готовые к выпуску пакеты из файлов HTML. Мы же предпочитаем задействовать версию Angular, установленную локально, а также ее зависимости, поэтому вы установите их с помощью npm в подразделе 2.4.2. Все, что было установлено с использованием npm, будет храниться в каталоге node_modules каждого проекта.
Файл TypeScript
Теперь создадим файл main.ts, который содержит код TypeScript/Angular и имеет три части.
1. Объявление компонента Hello World.
2. Оборачивание данного компонента в модуль.
3. Загрузка модуля.
Далее в главе вы реализуете приведенные части в отдельных файлах, но здесь для простоты мы разместим весь код этого небольшого приложения в одном файле (листинг 2.2).
Листинг 2.2. Содержимое файла TypeScript main.ts
Мы познакомимся с аннотациями @Component и @NgModule в разделе 2.2.
Что такое метаданные?
Как правило, метаданные — это пояснительная информация о данных. Например, в MP3-файле музыка является данными, а имя исполнителя, название песни и обложка альбома — метаданные. MP3-плеер включает в себя обработчик метаданных, который читает метаданные и отображает некую их часть во время воспроизведения песни.
Когда речь идет о классах, метаданные — дополнительная информация о классе. Например, декоратор @Component (также известный как «аннотация») указывает Angular (обработчику метаданных), что это не обычный класс, а компонент. Angular генерирует дополнительный код JavaScript, основываясь на информации, предоставленной в свойствах декоратора @Component.
Если же мы говорим о свойствах классов, декоратор @Input указывает Angular, что это свойство класса должно поддерживать привязку и иметь возможность получать данные из родительского компонента.
Кроме того, можно рассматривать декоратор как функцию, прикрепляющую некоторые данные к декорированному элементу. Декоратор @Component не изменяет декорированный класс, а лишь добавляет данные, описывающие его, чтобы компилятор Angular мог сгенерировать финальную версию кода компонента либо в памяти браузера (динамическая компиляция), либо в файле на диске (статическая компиляция).
Любой элемент приложения можно включить в файл HTML (или шаблон другого элемента) путем использования тега, который соответствует имени компонента в свойстве selector аннотации @Component. Селекторы компонентов похожи на селекторы CSS, поэтому, учитывая наличие селектора 'hello-world', вы отрисуете данный элемент на странице HTML с помощью элемента с именем <hello-world>. Angular преобразует эту строку в document.querySelectorAll(selector).
Обратите внимание на то, как в листинге 2.2 весь шаблон заключен в обратные кавычки для того, чтобы преобразовать его в строку. Таким образом, вы можете указывать одинарные и двойные кавычки внутри шаблона и разбивать его на несколько строк для более удачного форматирования. Шаблон содержит выражение для привязки данных {{ name }}, и во время выполнения Angular будет определять свойство name вашего компонента и заменять выражение привязки данных, располагающееся в фигурных скобках, конкретным значением.
Вы будете применять TypeScript для всех примеров кода, приведенных в этой книге, за исключением двух версий приложения Hello World, показанных далее. В одном из примеров будет приведена версия, написанная на ES5, а в другом — на ES6.
2.1.2. Hello World с помощью ES5
Для создания приложений на ES5 вы должны использовать особый пакет Angular, поставляющийся в формате Universal Module Definition (UMD, универсальное определение модуля) (обратите внимание на сочетание umd, присутствующее в URL). Этот пакет публикует все API Angular в глобальном объекте ng
