Введение
Angular — это мощная платформа с открытым исходным кодом, разработанная Google для создания динамических веб-приложений. Он предоставляет простой способ создания интерактивных одностраничных приложений, а также поддерживает адаптивный веб-дизайн, поэтому веб-приложение подходит для любого устройства. В этой статье я проведу вас через настройку среды разработки и создание вашего первого приложения Angular.
Предпосылки
Прежде чем мы углубимся в Angular, необходимо ознакомиться с HTML, CSS и JavaScript, поскольку Angular построен на этих веб-технологиях. Знакомство с TypeScript также полезно, поскольку приложения Angular обычно пишутся на TypeScript.
Настройка среды разработки
Первым шагом к началу работы с Angular является настройка среды разработки. Нам понадобится Node.js и npm (менеджер пакетов Node), который поставляется в комплекте с Node.js. Если вы их еще не установили, вы можете скачать и установить Node.js с его официального сайта. Вы можете проверить свою установку, выполнив следующие команды в терминале:
node -v npm -v
Следующим шагом будет установка Angular CLI (интерфейс командной строки). Angular CLI — это мощный инструмент, который позволяет вам инициализировать, разрабатывать, формировать и поддерживать приложения Angular непосредственно из командной оболочки. Установите его глобально, используя npm:
npm install -g @angular/cli
Создание вашего первого приложения Angular
Теперь давайте создадим наше первое приложение Angular с помощью Angular CLI. Перейдите в каталог, в котором вы хотите создать приложение, и выполните следующую команду:
ng new my-first-app
Эта команда создает новый каталог с именем my-first-app, инициализирует репозиторий git и настраивает все необходимые файлы для приложения Angular. Перейдите в новый каталог проекта:
cd my-first-app
Запустите ваше приложение, запустив:
ng serve
Если все прошло хорошо, вы должны увидеть сообщение о том, что приложение работает на http://localhost:4200/. Откройте этот URL-адрес в своем веб-браузере, и вы увидите свое новое приложение Angular!
Понимание структуры Angular
Когда вы создаете новое приложение Angular, оно имеет определенную структуру:
my-first-app/ |-- e2e/ |-- node_modules/ |-- src/ | |-- app/ | |-- assets/ | |-- environments/ | |-- favicon.ico | |-- index.html | |-- main.ts | |-- polyfills.ts | |-- styles.css |-- .editorconfig |-- .gitignore |-- angular.json |-- package.json |-- README.md |-- tsconfig.json
Вот краткий обзор некоторых важных файлов и каталогов:
e2e/: Содержит сквозные тесты.node_modules/: содержит все пакеты npm, необходимые для вашего приложения.src/: содержит исходные файлы для вашего приложения.src/app/: Этот каталог включает файлы компонентов, где каждый компонент соответствует определенному представлению в вашем приложении.src/main.ts: основная точка входа для вашего приложения.angular.json: Конфигурация для Angular CLI. В этом файле вы можете установить несколько значений по умолчанию, а также указать, какие файлы будут включены при сборке вашего проекта.package.json: содержит список зависимостей npm.
Создание вашего первого компонента
Приложения Angular являются модульными, а Angular изначально имеет модульную структуру. Приложения разделены на отдельные модули, где каждый модуль отвечает за связную функциональность или функцию. Каждый модуль далее делится на компоненты и сервисы. Компоненты управляют частью страницы (представлением), а службы предоставляют части функциональности, которые могут совместно использоваться несколькими компонентами.
Давайте создадим новый компонент с именем hello-world. В терминале выполните следующую команду:
ng generate component hello-world
Или вы можете использовать более короткую версию:
ng g c hello-world
Эта команда создает новый каталог hello-world внутри каталога src/app/ и четыре файла: hello-world.component.css, hello-world.component.html, hello-world.component.spec.ts, hello-world.component.ts. Перейдите к hello-world.component.html и замените его содержимое на:
<h1>Hello, World!</h1>
Чтобы отобразить этот компонент, откройте app.component.html и замените его содержимое на:
<app-hello-world></app-hello-world>
Теперь, если вы посетите http://localhost:4200/, вы увидите «Hello, World!».
Поздравляем, вы только что создали свой первый компонент Angular!
Заключение
Это руководство было нежным введением в Angular. Мы рассмотрели базовую настройку и структуру приложения Angular и создали простой компонент. Конечно, Angular может предложить гораздо больше, например, директивы, маршрутизацию, формы, HTTP-сервисы и многое другое. Это мощная платформа, которая хорошо масштабируется в зависимости от сложности и размера приложения. Удачного кодирования!
