StandWithUkraine
Angular: Standalone Components
Завантаження автономних компонентів
В цьому розділі ми поговоримо про Bootstrapping application, чим являється NgModules і як ініціювати ваші програми без NgModules.
Bootstrapping та NgModule
«Bootstrapping application» (завантаження програми) зазвичай означає налаштовування початкової конфігурації та залежностей, необхідних для роботи програми. Залежно від специфіки програми та середовища, в якому вона розробляється або розгортається, визначається те, що потрібно для її запуску. Це може бути інсталяція необхідних програмних бібліотек або фреймворків, налаштування підключень до бази даних, налаштування початкових облікових записів користувачів або дозволів, а також встановлення параметрів або конфігурацій за замовчуванням.
NgModules — це клас Typescript, який створюється за допомогою декоратора «@NgModule». NgModule можна розглядати як контейнер і спосіб організації пов’язаного коду, такого як компоненти, директиви, служби та канали, у єдиний блок функціональності.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }У цьому прикладі декоратор @NgModule використовується для визначення модуля під назвою AppModule. Цей модуль імпортує BrowserModule, який надає основні служби для програм браузера, оголошує AppComponent, який є кореневим компонентом програми, і вказує, що AppComponent слід використовувати як компонент початкового завантаження. Root Module зазвичай є відправною точкою для початкового завантаження програми та налаштовує початковий стан програми шляхом створення кореневого компонента та ін’єкції будь-яких необхідних служб. Він імпортує будь-які додаткові модулі, які вимагає програма, і експортує компоненти, директиви та pipes, які мають бути доступні для інших частин програми. Angular використовує систему модулів і вимагає, щоб AppModule був визначений та імпортований у файл точки входу програми в main.ts.
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));У наведеному вище прикладі функція platformBrowserDynamic() використовується для завантаження модуля AppModule, який завантажує AppComponent та будь-які інші компоненти, директиви, служби та канали, визначені в модулі.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MyService } from './my.service';
@NgModule({
imports: [BrowserModule], // 2. Importing of other Modules
declarations: [AppComponent],// 1. Create the Root Component
providers: [MyService] // 3. Import of Services and other dependencies
bootstrap: [AppComponent] // 4. Attaching the root Component to the Dom
})
export class AppModule { }Чому виникає бажання замінити NgModule?
- Непотрібна складність. Може бути важко налагоджувати та підтримувати, оскільки NgModules вимагають багато шаблонного коду.
- Angular 9+ має компілятор Ivy, який надає компонентам власний контекст компіляції, тому програма працює без модулів під час виконання.
Тепер ми можемо розглянути використання автономних компонентів (Standalone components) у своїх проєктах.
Введення в Standalone Components
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent);У наведеному вище прикладі ви вже бачите, наскільки спрощений код. Тут ми видаляємо platformBrowserDynamic і замість цього імпортуємо bootstrapApplication. Далі вставляємо AppComponent у функцію bootstrapApplication().
Компоненти, директиви та пайпи можна оголошувати як автономні, подивимось приклад як це буде виглядати:
@Component({
selector: 'app-standalone',
standalone: true,// 1. instantiate standalone flag
imports: [CommonModule, StandaloneComponent, ChangeSizePipe,
ColorDirective], // 3. Import Dependencies
templateUrl: './standalone.component.html' // 2.Render the Dom,
providers:[MyService] // 4. Import of Services and other dependencies
})
export class StandaloneComponent {
}Як ви бачите, для нашого компонента прапор standalone встановлено в true. В імпорті ми маємо масив із директивою та пайпом. У нас також є загальний модуль із ‘@angular/common’, який надає нам неавтономні директиви ngIf, ngSwitch та кілька інших, але ми не можемо імпортувати лише окремі директиви, тому нам потрібно імпортувати весь модуль.
Providers та importProvidersFrom() для Standalone Components
В цьому розділі ми зробимо короткий огляд Angular Providers та те, як новий автономний API обробляє Angular провайдери за допомогою importProvidersFrom() всередині bootstrapApplication().
Angular Providers
В Angular провайдери використовуються для визначення того, як слід створити екземпляр залежності. Провайдер може бути будь-яким об’єктом або значенням, але в більшості випадків це клас, який надає послугу або функціональність. Є кілька способів визначення провайдерів в Angular, включаючи масив провайдерів у модулі Angular, властивість провайдерів у декораторі компонентів або за допомогою декоратора @Injectable для визначення служби.
Область дії провайдера залежить від області, в якій він зареєстрований і доступний для впровадження.
@NgModule({
declarations: [FeatureComponent],
imports: [FeatureModule],
providers: [DataService], // Add DataService to providers array
})
export class MyModule { }Коли компонент або служба запитують залежність, система впровадження залежностей Angular шукає постачальника, який може забезпечити цю залежність. Якщо постачальник знайдено, Angular створює екземпляр залежності та впроваджує його в компонент або службу.
Більше про впровадження залежностей можно знайти у статті Angular: Dependency injection | Впровадження залежностей
Впроваждення залежностей в Standalone RootComponent
BootstrapApplication приймає об’єкт як другий аргумент, який має властивість під назвою provider, подібну до provider у Component або @NgModule. Там ви можете надати інші модулі Angular, наприклад модулі зі сторонньої бібліотеки або власні бібліотеки, використовуючи новий ImportProvidersfrom():
bootstrapApplication(AppComponent, {
providers: [importProvidersFrom(MatButtonModule)]
});Сподіваюсь ця стаття була для вас корисною. Напишіть будь ласка в коментарях які питання стосовно Angular Ви маєте і на які теми бажали б отримати наступні статті.
Джерела: angular.io, dev.to