Установка и настройка Angular

Angular — это мощный фреймворк для разработки веб-приложений, созданный Google. Он позволяет создавать динамические одностраничные приложения (SPA) с высокой производительностью и удобством разработки. В этом руководстве мы подробно рассмотрим процесс установки и настройки Angular, а также основные шаги для начала работы с этим фреймворком.

1. Подготовка к установке

Перед установкой Angular необходимо убедиться, что на вашем компьютере установлены Node.js и npm (Node Package Manager). Node.js — это среда выполнения JavaScript, а npm — менеджер пакетов, который поставляется вместе с Node.js. Для проверки их наличия выполните следующие команды в терминале:

node -v
npm -v

Если команды возвращают версии Node.js и npm, значит, они уже установлены. Если нет, скачайте и установите Node.js с официального сайта: https://nodejs.org/.

2. Установка Angular CLI

Angular CLI (Command Line Interface) — это инструмент командной строки, который упрощает создание и управление проектами Angular. Для его установки выполните следующую команду:

npm install -g @angular/cli

Флаг -g означает, что Angular CLI будет установлен глобально на вашем компьютере. После завершения установки проверьте версию Angular CLI:

ng version

3. Создание нового проекта Angular

После установки Angular CLI можно создать новый проект. Для этого выполните команду:

ng new my-angular-app

Где my-angular-app — это название вашего проекта. Angular CLI предложит выбрать настройки для проекта, такие как использование Angular routing и стилей (CSS, SCSS и т. д.). После завершения создания проекта перейдите в его папку:

cd my-angular-app

4. Запуск проекта

Для запуска проекта выполните команду:

ng serve

Эта команда запустит сервер разработки, и ваше приложение будет доступно по адресу http://localhost:4200/. По умолчанию Angular автоматически перезагружает приложение при изменении файлов.

5. Структура проекта Angular

После создания проекта Angular CLI генерирует стандартную структуру папок и файлов. Вот основные из них:

• src/ — содержит исходный код приложения.
• src/app/ — основная папка с модулями, компонентами и сервисами.
• src/assets/ — для статических файлов (изображения, шрифты и т. д.).
• src/environments/ — настройки для разных сред (разработка, продакшн).
• angular.json — конфигурационный файл проекта.
• package.json — список зависимостей проекта.

6. Основные команды Angular CLI

Angular CLI предоставляет множество команд для упрощения разработки. Вот некоторые из них:

• ng generate component component-name — создает новый компонент.
• ng generate service service-name — создает новый сервис.
• ng generate module module-name — создает новый модуль.
• ng build — собирает проект для продакшна.
• ng test — запускает тесты.

7. Настройка Angular для продакшна

Для сборки проекта в продакшн-режиме выполните команду:

ng build --prod

Эта команда оптимизирует код, минифицирует файлы и создает папку dist/ с готовыми файлами для развертывания на сервере.

8. Дополнительные инструменты и плагины

Для удобства разработки можно использовать дополнительные инструменты, такие как:

• Angular DevTools — расширение для Chrome, которое помогает отлаживать приложения Angular.
• Prettier — инструмент для форматирования кода.
• ESLint — линтер для проверки качества кода.

9. Заключение

Angular — это мощный и гибкий фреймворк для создания современных веб-приложений. В этом руководстве мы рассмотрели основные шаги по установке и настройке Angular, а также основные команды Angular CLI. Теперь вы готовы начать разработку своих проектов с использованием Angular. Удачи в изучении этого замечательного инструмента!

Добавлено: 12.05.2025