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

Angular предоставляет структуру проекта, оптимизированную для создания масштабируемых веб-приложений. Важным аспектом является то, что Angular использует модульный подход, который позволяет легко управлять зависимостями и организовывать код. При создании нового проекта Angular с помощью командного инструмента Angular CLI (например, команды ng new), проект генерирует определенную структуру каталогов и файлов. Эта структура служит основой для организации всего приложения.

Основные директории и файлы

После создания проекта структура будет выглядеть примерно следующим образом:

my-angular-app/
├── e2e/
├── node_modules/
├── src/
│   ├── app/
│   ├── assets/
│   ├── environments/
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── styles.css
│   └── tsconfig.app.json
├── angular.json
├── package.json
└── tsconfig.json
  • e2e/ — директория для тестов на уровне пользовательского интерфейса (end-to-end). В ней содержатся файлы для тестирования интерфейса с использованием инструмента Protractor.
  • node_modules/ — директория с зависимостями, которые устанавливаются через NPM.
  • src/ — основная директория, где находится вся исходная кодовая база приложения.
  • angular.json — конфигурационный файл Angular CLI, который управляет настройками проекта, такими как параметры компиляции, пути к файлам и используемые библиотеки.
  • package.json — файл, содержащий метаданные о проекте, включая его зависимости и скрипты сборки.
  • tsconfig.json — конфигурация TypeScript, определяющая параметры компиляции.

Директория src

Директория src/ является основным местом для работы над проектом. Внутри этой папки находятся несколько ключевых компонентов:

  • app/ — основная директория для исходного кода приложения, которая содержит компоненты, сервисы, модули и прочие важные части проекта.
  • assets/ — здесь хранятся все статические файлы, такие как изображения, шрифты и другие ресурсы, которые могут быть использованы в приложении.
  • environments/ — файлы, связанные с настройками окружений (например, для разработки и продакшн). В этой папке могут быть такие файлы, как environment.ts для локальной разработки и environment.prod.ts для продакшн-версии.

Основные файлы

  • index.html — основной HTML-файл, который служит точкой входа в приложение. В этом файле подключаются стили и скрипты.
  • main.ts — основной файл TypeScript, который служит точкой входа для Angular-приложения. Он запускает и инициализирует главный модуль приложения (обычно это AppModule).
  • styles.css — файл глобальных стилей для всего приложения.
  • favicon.ico — иконка, отображаемая в браузере.

Модули

Angular — это модульный фреймворк. Каждый Angular-приложение должно иметь хотя бы один модуль — корневой модуль. По умолчанию это AppModule, который находится в файле app.module.ts внутри директории app/. Модуль определяет:

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

В app.module.ts модули и компоненты обычно импортируются и декларируются. Модуль также определяет, какие части приложения доступны для использования в других частях проекта.

Компоненты

Каждое Angular-приложение состоит из множества компонентов. Каждый компонент описан в файле с расширением .ts и представляет собой класс с декоратором @Component. Структура компонента включает:

  • Шаблон (HTML) — описывает структуру DOM для отображения данных.
  • Классы (TypeScript) — логика компонента, которая управляет состоянием и поведением.
  • Стили (CSS/SCSS) — стили, связанные с данным компонентом.

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

Сервисы

Сервисы предназначены для хранения логики, которая не относится напрямую к представлению данных (например, работа с API, обработка данных, управление состоянием). Сервисы обычно инжектируются в компоненты или другие сервисы через механизм зависимостей Angular (Dependency Injection).

Сервисы обычно определяются с использованием декоратора @Injectable и предоставляются через providers в соответствующем модуле или компоненте.

Директивы и пайпы

  • Директивы — это классы, которые позволяют изменять поведение DOM-элементов. Например, директива ngIf управляет видимостью элемента, а директива ngFor используется для повторяющегося отображения элементов.
  • Пайпы — классы для преобразования данных. Например, пайп DatePipe используется для форматирования дат, а пайп CurrencyPipe — для отображения валютных значений.

Роутинг

Для работы с навигацией в Angular используется модуль RouterModule, который позволяет определить маршруты для разных компонентов. Роутинг в Angular предоставляет возможность динамически загружать компоненты на основе URL.

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

Тестирование

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

  • Юнит-тестирование (Unit testing) — проверка отдельных частей приложения, таких как компоненты и сервисы.
  • Интеграционное тестирование — проверка взаимодействия различных частей приложения.
  • E2E-тестирование — проверка работы всего приложения как единого целого, как если бы это был реальный пользовательский сценарий.

Для юнит-тестирования Angular использует фреймворк Jasmine, а для работы с компонентами в тестах используется TestBed.

Заключение

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

Оглавление