Standalone в Angular
Angular, один из самых популярных фреймворков для разработки одностраничных приложений (SPA), постоянно развивается, добавляя новые возможности и улучшая существующие. Одной из таких новых возможностей стали Standalone компоненты, представленные в Angular 14.
Что такое Standalone компоненты?
Standalone компоненты — это компоненты, которые могут использоваться без необходимости добавления их в модуль. Традиционно, в Angular каждый компонент должен быть объявлен в модуле (например, AppModule), чтобы его можно было использовать в приложении. Standalone компоненты позволяют упростить эту архитектуру, делая компоненты более автономными и модульными.
Преимущества Standalone компонентов
Упрощенная архитектура: Уменьшает количество связей между модулями и компонентами.
Уменьшение размера бандла: За счет того, что модули становятся менее громоздкими, уменьшается размер финального бандла.
Лучшая модульность: Упрощает создание и использование повторно используемых компонентов.
Создание Standalone компонента
Для создания Standalone компонента необходимо использовать свойство standalone в декораторе @Component. Рассмотрим пример создания простого Standalone компонента.
Шаг 1: Создание компонента
Создадим новый компонент, используя Angular CLI:
ng generate component standalone-example --standalone
Шаг 2: Настройка компонента
Angular CLI автоматически добавит свойство standalone: true в декоратор @Component:
import { Component } from '@angular/core';
@Component({
selector: 'app-standalone-example',
templateUrl: './standalone-example.component.html',
styleUrls: ['./standalone-example.component.css'],
standalone: true
})
export class StandaloneExampleComponent {
// Логика компонента
}
Шаг 3: Использование Standalone компонента
Теперь Standalone компонент можно использовать в других компонентах без необходимости его объявления в каком-либо модуле. Например, добавим его в главный компонент приложения AppComponent
import { Component } from '@angular/core';
import { StandaloneExampleComponent } from './standalone-example/standalone-example.component';
@Component({
selector: 'app-root',
template: `
standalone: true,
imports: [StandaloneExampleComponent]
})
export class AppComponent {
// Логика главного компонента
}
Шаг 4: Импорт необходимых модулей
Если ваш Standalone компонент использует директивы или другие Angular модули (например, FormsModule), их нужно явно импортировать в декораторе компонента:
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-standalone-example',
templateUrl: './standalone-example.component.html',
styleUrls: ['./standalone-example.component.css'],
standalone: true,
imports: [FormsModule]
})
export class StandaloneExampleComponent {
// Логика компонента
}
Что будет, если указать standalone: false
Если указать standalone: false (или не указывать этот параметр вовсе, так как по умолчанию он false), компонент будет считаться зависимым от модуля. Это значит, что для его использования в приложении, его нужно будет объявить в declarations соответствующего модуля. В общем тоже самое что и в традиционном варианте.
Easy
Как видите Standalone component всего лишь отличается тем что мы добавили в него параметр
standalone: true и imports: [ ] в который можно импортировать другие модули для собственного использование.Так же стоит заметить компонент автоматически экспортирует себя же. Если мы хотим использовать standalone компонент в другом компоненте то он должен быть импортирован в модуль этого компонента, а не задекларирован- это очень важно.
Миграция
Еще одна тема которую мы не затронули это миграция существующего приложения с модульной архитектурой на автономную. Но тема это на столько обширная что я просто оставлю тут ссылку на ru доку в которой все подробно описано. Если вкратце то там так же нет не чего сложного — просто выносите SharedModule и CommonModule и в место него все импортируете на прямую в компонент в котором это требуется. Есть нюансы с ленивой загрузкой, но там тоже не чего сложного, нужно просто переименовать метод. Вообще смысл всей миграции сводится к тому чтобы что-то переименовать-удалить-заменить. Математиком тут быть не надо)
Заключение
Standalone компоненты в Angular представляют собой мощный инструмент, упрощающий архитектуру приложений и улучшающий модульность. Они позволяют создавать более автономные и переиспользуемые компоненты, что делает разработку на Angular еще более эффективной.
Если вы только начинаете работать с Angular или уже опытный разработчик, Standalone компоненты могут значительно упростить вашу работу и улучшить структуру ваших приложений.
Вот такие пироги!
