Advertisement
  1. Code
  2. Angular

Создание первого Angular приложения: основы

Scroll to top
Read Time: 8 min
This post is part of a series called Creating Your First Angular App.
Create Your First Angular App: Storing and Accessing Data

Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)

За последние пару лет Angular стал очень популярным. Вы можете использовать эту платформу JavaScript с открытым исходным кодом для создания веб и мобильных приложений. Если вы подумывали об изучении Angular, но не знаете, с чего начать, то эта серия статей специально для вас.

Цель этой серии - осветить основы Angular при создании очень простого приложения, которое отображает информацию о разных странах. Angular написан на TypeScript, поэтому имеет смысл писать собственный код тоже на TypeScript.

Не нужно беспокоиться, если вы никогда не использовали TypeScript раньше. Проще говоря, TypeScript - это просто  JavaScript с дополнительными функциями. Я также написал серию под названием TypeScript для начинающих на Envato Tuts +, где вы можете сначала изучить основы TypeScript.

Начинаем

Если вы уже знакомы с TypeScript, вы можете просто начать свое первое приложение на Angular.

Первым шагом будет установка Node.js. Вы можете отправиться на официальный сайт и загрузить соответствующую версию. Менеджер пакетов узлов будет установлен как часть Node.js.

Следующий шаг - установить TypeScript, выполнив следующую команду. Я рекомендую вам установить версию TypeScript  2.1.

Наконец, вы должны установить Angular CLI, выполнив следующую команду. Установка Angular CLI упростит процесс создания вашего Angular приложения.

Теперь вы можете создать новое приложение Angular прямо из коробки, выполнив следующую команду внутри терминала. Перед запуском команды убедитесь, что вы переместились в каталог, в котором вы хотите создать приложение.

Установка всех зависимостей для проекта занимает некоторое время, поэтому, пожалуйста, будьте терпеливы, в то время как Angular CLI настроит ваше приложение. По завершении установки вы увидите папку с именем country-app в текущем каталоге. Вы можете запустить приложение прямо сейчас, перейдя в каталог country-app, а затем запустив ng serve в консоли.

Добавление --open автоматически откроет ваше приложение в браузере по адресу http://localhost:4200/.

Обзор информации о стране

Приложение для информации о стране, которое мы создаем, будет иметь три компонента. HomeComponent покажет топ три страны в разных категориях, таких как население, ВВП и область. Вы сможете щелкнуть название каждой страны, чтобы узнать больше о ней. Дополнительная информация о стране указана с использованием другого компонента, который мы назовем CountryDetailComponent. В нашем приложении будет еще один компонент, который будет использоваться для отображения списка всех стран, которые мы сохранили в нашем приложении.

Поскольку это ваше первое приложение с угловыми углами, наша главная цель - сохранить все просто, не добавляя никаких сложных функций. Когда вы хорошо разбираетесь в основах, создание более сложных приложений не будет представлять собой сложную задачу.

Ниже приведено изображение домашней страницы или HomeComponent в нашем информационном приложении для нашей страны. Как вы можете видеть, в каждой категории есть три страны, и они были помещены в порядке убывания. При создании HomeComponent вы узнаете, как сортировать разные страны, прежде чем отображать их внутри шаблона.

Country Information App OverviewCountry Information App OverviewCountry Information App Overview

На следующем рисунке показана страница «Все страны» или AllCountriesComponent нашего приложения. Макет этого компонента очень похож на HomeComponent. Единственное различие заключается в том, что на этот раз мы перечисляем все страны вместе со своими столицами.

Fun Facts About CountriesFun Facts About CountriesFun Facts About Countries

Если вы нажмете на поле какой-либо страны, отображенной внутри HomeComponent или AllCountriesComponent, вы попадете на страницу подробной информации или CountryDetailComponent. Информация, представленная о стране, не редактируется.

После подробных деталях каждой страны появляется кнопка вернуться назад. Эта кнопка возврата возвращает вас к предыдущему компоненту или странице. Если вы пришли в CountryDetailComponent из HomeComponent, вы вернетесь к HomeComponent. Если вы пришли в CountryDetailComponent из AllCountriesComponent, вы вернетесь к компоненту AllCountriesComponent.

Rendering InformationRendering InformationRendering Information

Обращение к различным компонентам, которые мы создаем как страницы, не является технически корректным. Тем не менее, я использую термины, такие как домашняя страница или HomeComponent, взаимозаменяемо, потому что просмотр многих незнакомых терминов, таких как маршрутизация, компоненты и декораторы, может напугать читателей, которые раньше никогда не создавали приложение Angular. Использование этих терминов в этой серии поможет вам быстро научиться Angular, а не запутает вас с жаргоном.

Основы Angular

Прежде чем мы начнем создавать наше приложение, вам нужно быть в курсе основных концепций Angular. В этом разделе очень кратко рассматриваются важные темы, такие как компоненты и шаблоны.

Компоненты являются строительными блоками приложения Angular. Они позволяют вам управлять пользовательским интерфейсом вашего приложения. Основной компонент состоит из двух частей: декоратора и определения класса. Вы можете указать логику приложения для компонента внутри класса.

Декоратор компонента используется для указания информации, например пользовательского селектора, для идентификации компонента, пути к шаблону HTML и правил стиля, применяемых к компоненту.

Вот декоратор базового компонента, который устанавливает все три значения для CountryDetailComponent:

Все компоненты, которые мы создаем, будут иметь настраиваемый селектор, который указывает тег, который отображает компонент внутри браузера. Эти пользовательские теги могут иметь любое имя, которое вы захотите. Например, мы создадим countryDetailComponent в третьем учебнике серии, и мы будем использовать наш собственный тег, называемый app-country-detail, для рендеринга этого компонента в браузере.

Любой компонент, который вы создадите, будет состоять из шаблона, который будет управлять тем, что отображается на странице приложения. Например, countryDetailComponent имеет два тега div, которые действуют как обертка вокруг основного содержимого компонента. Каждая часть информации о стране помещается внутри ее собственного тега p, а название страны помещается внутри тега h2. Все эти теги могут храниться вместе в качестве шаблона для countryDetailComponent и затем отображаться как единое целое. Этот шаблон компонента можно сохранить как файл HTML или указать непосредственно внутри декоратора, используя атрибут template.

Различные компоненты нашего приложения должны будут извлекать данные для отображения на экране. Мы будем создавать класс сервиса, содержащий функции, которые помогут нам получить эти данные и отсортировать или изменить их так или иначе. Затем мы будем использовать функциональность различных классов компонентов для отображения этих данных пользователю.

Вы можете рассматривать Service как просто любое значение, функцию или возможность, которые необходимы вашему приложению. Получение всех стран, хранящихся внутри нашего приложения, является сервисом, а так же сортировка и отображение их. Все три компонента нашего класса будут использовать функции нашего сервиса для извлечения данных.

При создании компонентов для вашего приложения вам придется импортировать зависимости из разных модулей. Например, мы будем импортировать Component из @angular/core всякий раз, когда мы создаем свой собственный компонент. Вы также можете использовать тот же синтаксис для импорта зависимостей, которые были созданы вами. Часть внутри фигурных скобок используется для указания зависимостей, которые вы хотите импортировать, а часть после from используется для указания того, где Angular может найти зависимость.

Вот фрагмент кода из проложения country-app, которое мы будем создавать. Как вы можете видеть, мы импортируем Component и OnInit из @angular/core. Аналогично, мы импортируем Country и CountryService из файлов, которые мы создали сами.

Оболочка приложения

После того как вы запустили команду ng new country-app, Angular CLI создаст для вас множество файлов и папок. Такое большое количество файлов может напугать новичка, но вам не нужно работать со всеми этими файлами. При создании нашего приложения мы будем изменять файлы, уже существующие в папке src/app, а также создавать новые файлы в том же каталоге. Прямо сейчас у вас должно быть пять разных файлов в папке src/app. Эти файлы создают оболочку приложения, которая будет использоваться для объединения остальной части нашего приложения.

Файл app.component.ts содержит логику для нашего компонента, написанного в TypeScript. Вы можете открыть этот файл и обновить свойство title класса AppComponent в «Интересные факты о странах». Файл app.component.ts теперь должен иметь следующий код.

Файл app.component.html содержит шаблон для нашего класса AppComponent. Откройте файл app.component.html и замените HTML-код шаблона внутри него следующей строкой:

Оборачивая title внутри фигурных скобок, мы сообщаем Angular о том, чтобы поместить значение свойства title класса AppComponent внутри тега h1.

Мы обновим этот файл в последнем уроке серии, чтобы отобразить новые компоненты, которые мы будем создавать. На данный момент просто нужно отобразить название нашего приложения.

Изменения, внесенные в этот файл, будут автоматически отображаться в браузере по адресу http://localhost:4200/. Просто убедитесь, что консоль все еще открыта, и вы уже набрали команду ng serve с начала учебника.

Различные функции приложения будут контролироваться несколькими более простыми компонентами, которые мы создадим позже. Вы можете подумать об этой оболочке приложения как о машине и о разных компонентах, которые мы будем создавать как о частях этого автомобиля, такие как двигатель и колеса. Каждый компонент выполняет свою конкретную функцию, и вы можете собрать все вместе, чтобы создать весь автомобиль.

Заключение

Цель этого урока заключалась в том, чтобы помочь вам установить все необходимые инструменты, необходимые для создания приложения Angular, и быстро перейти к некоторым фундаментальным концепциям.

Подводя итог, вам нужно знать основы TypeScript, прежде чем вы сможете создать приложение Angular. На следующем шаге вам необходимо установить Node.js, TypeScript и Angular CLI. После этого вы можете просто запустить кучу команд из раздела «Начало работы» этого руководства, и ваше первое приложение будет собрано и запущено.

Наше приложение стран будет делать гораздо больше, чем просто отображать свое название. В следующем учебном пособии вы создадите несколько классов и служб, которые будут использоваться для хранения и извлечения данных о разных странах. Эти классы и службы будут полезны в третьем и четвертом учебниках, где мы создадим различные компоненты.

Пока мы работаем над этой серией учебников, не забудьте проверить Envato Market, чтобы узнать, что доступно для использования и изучения как для Angular, так и для JavaScript в целом.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.