Перехід до автономних компонентів
У попередніх версіях Angular кожен компонент мав бути частиною модуля. Навіть найпростіший компонент не міг існувати окремо — його потрібно було оголошувати всередині NgModule.
Це було схоже на необхідність мати цілу кухню лише для того, щоб приготувати чашку чаю. Звучить громіздко, чи не так?
Саме тому з часом команда Angular почала спрощувати структуру. Це призвело до впровадження нового підходу — Standalone Components.
Що таке Standalone Component?
Standalone Component — це компонент, який не потребує оголошення всередині модуля (NgModule). Він є самодостатнім, тобто містить усю інформацію про свої залежності у власній структурі.
Щоб створити такий компонент, достатньо додати прапорець standalone: true у декоратор @Component та вказати необхідні залежності у масиві imports:
example.ts
Тут додавання standalone: true — це спеціальна опція у декораторі @Component, яка повідомляє Angular, що цей компонент є незалежним — його не потрібно оголошувати в NgModule.
Також ми вказуємо список зовнішніх залежностей (imports), які потрібні компоненту. У традиційному підході на основі модулів ці залежності передавалися у імпорти модуля. Але коли компоненти працюють без модуля, їхні залежності потрібно оголошувати безпосередньо у компоненті — і Angular виступає як модуль внутрішньо для цього компонента.
Чому Angular відходить від NgModules?
NgModules відігравали важливу роль у великих застосунках:
-
Допомагали організовувати код;
-
Забезпечували контроль над областю видимості;
-
Були корисними для оптимізації.
Але з часом стало очевидно, що багато з цих речей можна реалізувати на рівні компонентів — простіше та інтуїтивніше.
Angular не видалив модулі — автономні компоненти просто пропонують більш гнучкий варіант.
Іншими словами, автономні компоненти — це сучасний спосіб створення компонентів без використання модулів. Вони спрощують структуру, роблять компоненти самодостатніми та легшими у використанні.
Angular продовжує підтримувати модулі, але рекомендує використовувати автономні компоненти для нового коду.
1. Що робить standalone: true у декораторі компонента?
2. Чому властивість imports потрібна в автономному компоненті?
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
What are the main benefits of using standalone components in Angular?
How do I migrate an existing component to be standalone?
Are there any limitations or caveats with standalone components?
Awesome!
Completion rate improved to 3.13Перехід до автономних компонентів
Свайпніть щоб показати меню
У попередніх версіях Angular кожен компонент мав бути частиною модуля. Навіть найпростіший компонент не міг існувати окремо — його потрібно було оголошувати всередині NgModule.
Це було схоже на необхідність мати цілу кухню лише для того, щоб приготувати чашку чаю. Звучить громіздко, чи не так?
Саме тому з часом команда Angular почала спрощувати структуру. Це призвело до впровадження нового підходу — Standalone Components.
Що таке Standalone Component?
Standalone Component — це компонент, який не потребує оголошення всередині модуля (NgModule). Він є самодостатнім, тобто містить усю інформацію про свої залежності у власній структурі.
Щоб створити такий компонент, достатньо додати прапорець standalone: true у декоратор @Component та вказати необхідні залежності у масиві imports:
example.ts
Тут додавання standalone: true — це спеціальна опція у декораторі @Component, яка повідомляє Angular, що цей компонент є незалежним — його не потрібно оголошувати в NgModule.
Також ми вказуємо список зовнішніх залежностей (imports), які потрібні компоненту. У традиційному підході на основі модулів ці залежності передавалися у імпорти модуля. Але коли компоненти працюють без модуля, їхні залежності потрібно оголошувати безпосередньо у компоненті — і Angular виступає як модуль внутрішньо для цього компонента.
Чому Angular відходить від NgModules?
NgModules відігравали важливу роль у великих застосунках:
-
Допомагали організовувати код;
-
Забезпечували контроль над областю видимості;
-
Були корисними для оптимізації.
Але з часом стало очевидно, що багато з цих речей можна реалізувати на рівні компонентів — простіше та інтуїтивніше.
Angular не видалив модулі — автономні компоненти просто пропонують більш гнучкий варіант.
Іншими словами, автономні компоненти — це сучасний спосіб створення компонентів без використання модулів. Вони спрощують структуру, роблять компоненти самодостатніми та легшими у використанні.
Angular продовжує підтримувати модулі, але рекомендує використовувати автономні компоненти для нового коду.
1. Що робить standalone: true у декораторі компонента?
2. Чому властивість imports потрібна в автономному компоненті?
Дякуємо за ваш відгук!
