Перехід до автономних компонентів
У попередніх версіях 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 в автономному компоненті?
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
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 в автономному компоненті?
Дякуємо за ваш відгук!
