Компоненты в Angular 18: пошаговое руководство

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

Введение: что такое standalone-компоненты в Angular 18?

В предыдущих версиях Angular компоненты объединялись в модули, которые, как правило, управлялись через файл app.module.ts. Однако в Angular 18 были представлены standalone-компоненты — это значительное изменение. Они упрощают процесс разработки, позволяя компонентам напрямую указывать свои зависимости без использования NgModules. Это делает архитектуру приложений на Angular проще и понятнее, а разработку — более интуитивной и эффективной.

Почему произошёл переход к standalone-компонентам?

Standalone-компоненты были введены, чтобы:

• Упростить архитектуру приложений на Angular.
• Улучшить читаемость и поддержку кода.
• Сделать фреймворк более доступным для новичков, устранив систему модулей, которая часто казалась слишком сложной.
• Обеспечить более быстрое начальное выполнение в крупных приложениях.

Теперь перейдём к практической части и начнём использовать эти компоненты в Angular 18.

Настройка проекта на Angular 18

Прежде чем перейти к standalone-компонентам, нужно создать проект на Angular 18. Если Angular 18 ещё не установлен, выполните следующие шаги:

Установите Angular CLI. Откройте терминал и выполните:

npm install -g @angular/cli

Создайте новый проект Angular: после установки CLI создайте новый проект с помощью команды:

ng new angular18-standalone

Следуйте инструкциям в терминале, чтобы настроить проект. Обратите внимание: в Angular 18 проект автоматически создаётся без файла app.module.ts.

Перейдите в каталог проекта:

cd angular18-standalone

Запустите проект: чтобы убедиться, что всё работает правильно, выполните команду:

ng serve

Откройте в браузере адрес http://localhost:4200, чтобы увидеть ваше Angular-приложение в действии.

Что такое компонент в Angular?

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

Компоненты в Angular — это многократно используемые, инкапсулированные единицы UI-логики. Они определяют, что отображается на экране и как пользователь может с этим взаимодействовать. Например, кнопка, форма или даже целая страница — всё это может быть компонентом. Каждый компонент объявляется с помощью декоратора @Component, который позволяет Angular управлять этим компонентом в контексте приложения.

Роль компонента

• Вид: компонент управляет тем, что отображается на экране (HTML-шаблон)
• Логика: он отвечает за поведение и действия элемента интерфейса (класс на TypeScript)
• Данные: компонент может содержать данные или получать их из сервисов динамически

Файлы, входящие в компонент

Когда вы создаёте компонент в Angular, автоматически генерируются несколько файлов, каждый из которых выполняет свою задачу. Эти файлы вместе определяют структуру, стиль и поведение компонента. Ниже перечислены основные файлы, которые входят в Angular-компонент:

Класс компонента (.ts-файл). Содержит TypeScript-класс, в котором описана логика компонента. Он обрабатывает взаимодействие с пользователем, работу с данными, а также взаимодействие с сервисами для получения или отправки информации. Также в этом файле указывается метаинформация о компоненте — селектор, шаблон и файл (ы) со стилями.

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component', // The name you use to embed this component in HTML
  standalone: true, // Declares that this is a standalone component in Angular 18
  templateUrl: './my-component.component.html', // Links to the HTML template
  styleUrls: ['./my-component.component.css'], // Links to the CSS file for styling
})
export class MyComponent {
  title: string = 'Hello from MyComponent'; // A simple property bound to the template

  constructor() {
    console.log('Component initialized');
  }
}

Ключевые элементы:

• Selector: имя, с помощью которого компонент вставляется в шаблон другого компонента (например, ).
• templateUrl: указывает внешний HTML-файл, содержащий разметку интерфейса для этого компонента.
• styleUrls: ссылки на внешние CSS-файлы, отвечающие за стилизацию компонента.

HTML-шаблон компонента (.html-файл). Файл шаблона содержит структуру и содержимое, которое будет отображаться в представлении компонента. В нём используется синтаксис шаблонов Angular для динамического отображения данных, привязки переменных из класса компонента и обработки событий.

<div>
  <h1>{{ title }}</h1> <!-- Interpolation to display the title from the component class -->
  <button (click)="changeTitle()">Click Me</button> <!-- Event binding to a method -->
</div>

Ключевые возможности:

• Интерполяция: {{ title }} отображает значение свойства title из класса компонента.
• Привязка событий: (click)="changeTitle()" связывает событие клика с методом changeTitle в классе компонента.
• Директивы: синтаксис шаблонов Angular поддерживает встроенные директивы, такие как *ngIf и *ngFor, позволяющие управлять DOM в зависимости от условий или перебора данных.

Стили компонента (.css-файл). Файл содержит стили для компонента. Angular использует ограниченную область видимости стилей, то есть стили, описанные здесь, применяются только к шаблону текущего компонента и не затрагивают остальные части приложения.

h1 {
  color: blue;
  font-size: 24px;
}

button {
  background-color: green;
  color: white;
  padding: 10px;
}

Ключевые преимущества:

• Стили инкапсулированы на уровне компонента, что предотвращает конфликты с глобальными стилями.
• Также можно использовать привязку стилей ([style]) и классов ([class]) прямо в HTML-шаблоне для динамической стилизации.

Файл тестов компонента (.spec.ts). Angular также создаёт файл с тестами для каждого компонента. В нём содержатся модульные тесты, которые проверяют, правильно ли работает компонент. Такой файл важен для подхода разработки через тестирование (TDD) и позволяет убедиться, что поведение компонента остаётся надёжным при изменениях.

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MyComponent } from './my-component.component';

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ MyComponent ]
    })
    .compileComponents();

    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should have title as "Hello from MyComponent"', () => {
    expect(component.title).toBe('Hello from MyComponent');
  });
});

Назначение:

• Обеспечивает корректную работу компонента в разных ситуациях
• Помогает находить ошибки на ранних этапах разработки

Подробное описание структуры компонента

Когда Angular создаёт компонент, он генерирует следующие основные файлы:

Класс компонента (.ts):

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

Файл шаблона (.html):

Определяет, что пользователь увидит на странице. Использует мощные возможности привязки данных Angular, включая интерполяцию ({{ }}), привязку событий ((click)) и структурные директивы, такие как *ngIf и *ngFor.

Файл стилей (.css /.scss):

Содержит все стили, относящиеся к компоненту. Инкапсуляция Angular гарантирует, что эти стили останутся локальными и не повлияют на другие части приложения.

Файл тестов (.spec.ts):

Предназначен для проверки корректной работы компонента. По умолчанию Angular использует фреймворк Jasmine для написания тестов.

Создание standalone-компонентов

Теперь, когда проект настроен, давайте разберёмся, как создавать standalone-компоненты.

Шаг 1: Сгенерировать standalone-компонент.

Чтобы создать standalone-компонент, используйте следующую команду Angular CLI:

ng generate component my-component --standalone

Эта команда создаёт компонент с именем MyComponent. Обратите внимание, что он не ссылается ни на один модуль в проекте.

Шаг 2: Понимание структуры.

Сгенерированный файл my-component.component.ts будет выглядеть примерно так:

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  standalone: true,
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  title = 'Standalone Component in Angular 18';
}

standalone: true — это то, что отличает компонент от прежних компонентов в Angular.

Вы можете импортировать другие компоненты, пайпы или директивы напрямую внутри декоратора @Component.

Шаг 3: Bootstrap standalone-компонента.

В Angular 18 запуск standalone-компонента — это просто. Откройте файл main.ts и измените его следующим образом, чтобы запустить новый компонент:

import { bootstrapApplication } from '@angular/platform-browser';
import { MyComponent } from './app/my-component/my-component.component';

bootstrapApplication(MyComponent)
  .catch(err => console.error(err));

Вызов bootstrapApplication(MyComponent) сообщает Angular, что MyComponent — это корневой компонент приложения.

Шаг 4: Использование сервисов в standalone-компонентах.

Standalone-компоненты позволяют определять сервисы прямо внутри самого компонента. Вот пример, как внедрить сервис в standalone-компонент:

import { Component } from '@angular/core';
import { MyService } from './my-service.service';

@Component({
  selector: 'app-my-component',
  standalone: true,
  providers: [MyService],
  template: `
    <h1>{{ data }}</h1>
  `,
})
export class MyComponent {
  data: string;
  constructor(private myService: MyService) {
    this.data = this.myService.getData();
  }
}

В этом примере MyService передаётся через декоратор @Component, что упрощает процесс внедрения зависимости.

Шаг 5: Маршрутизация с использованием standalone-компонентов.

Чтобы использовать маршрутизацию со standalone-компонентами, настройте маршруты в файле main.ts. Вот как это сделать в Angular 18:

import { provideRouter, Route } from '@angular/router';
import { MyComponent } from './app/my-component/my-component.component';
import { AnotherComponent } from './app/another-component/another-component.component';

const routes: Route[] = [
  { path: '', component: MyComponent },
  { path: 'another', component: AnotherComponent }
];

bootstrapApplication(MyComponent, {
  providers: [provideRouter(routes)],
})
  .catch(err => console.error(err));

Этот пример показывает, как настроить маршрутизацию со standalone-компонентами, что делает навигацию в Angular проще и понятнее.

Шаг 6: Повторное использование компонентов.

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

import { MyComponent } from 'path/to/my-component';

Преимущества standalone-компонентов

С Angular 18 standalone-компоненты дают несколько важных преимуществ:

• Не нужны NgModules: компоненты полностью автономны и сами управляют своими зависимостями
• Проще в понимании и использовании: особенно для новичков, так как нет необходимости разбираться в модульной системе
• Более модульные и переиспользуемые: компоненты можно использовать в разных приложениях без переработки структуры модулей

Это делает standalone-компоненты более простым и интуитивным способом создания приложений в Angular 18.

Рекомендации по работе со standalone-компонентами

При использовании standalone-компонентов придерживайтесь следующих лучших практик:

• Делайте компоненты узкоспециализированными: компонент должен выполнять одну чётко определённую задачу
• Логику — в сервисы: выносите сложную бизнес-логику в сервисы, а компоненты оставляйте для отображения данных
• Используйте Angular CLI: CLI оптимизирован для работы со standalone-компонентами, поэтому пользуйтесь командами вроде ng generate
• Используйте ленивую загрузку: загружайте компоненты по требованию, чтобы повысить производительность
• Структурируйте проект: даже без NgModules важно поддерживать чистую и логичную структуру директорий для удобства сопровождения

Заключение

Standalone-компоненты в Angular 18 — это современный и эффективный способ разработки приложений. Убирая необходимость в app.module.ts и NgModules, Angular упростил процесс разработки, сделав фреймворк более доступным для новичков и более гибким для опытных разработчиков.

Пробуйте standalone-компоненты в Angular 18, изучайте, как они упрощают ваш рабочий процесс. Соблюдая лучшие практики и используя новые возможности, вы сможете создавать масштабируемые, удобные в поддержке и производительные Angular-приложения.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.