Angular Academy · Lekcja

Dlaczego komponenty standalone

Zobacz, jak komponenty standalone upraszczają Angular.

Dlaczego komponenty standalone to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Dlaczego komponenty standalone

Komponenty standalone pozwalają budować aplikacje Angular bez NgModules. Komponent deklaruje własne zależności, dzięki czemu elementy składowe są samowystarczalne i łatwiejsze do zrozumienia.

Era NgModule

Tradycyjnie każdy komponent, dyrektywa i pipe musiały być zadeklarowane wewnątrz @NgModule. Moduły grupowały deklaracje oraz zarządzały importami i eksportami.

Dodawało to kod pomocniczy i dodatkową warstwę pośrednią.

Problemy powodowane przez NgModules

NgModules powodowały typowe trudności: można było zapomnieć o zadeklarowaniu komponentu, zadeklarować go w dwóch modułach, pomylić importy z deklaracjami albo utworzyć duże współdzielone moduły, które wciągały zbyt wiele zależności.

Koncepcja standalone

W przypadku komponentów standalone każdy komponent dokładnie wymienia swoje zależności we własnej tablicy imports. Nie ma centralnego modułu, który musi o nim wiedzieć.

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

@Component({
  selector: 'app-hello',
  standalone: true,
  template: '<p>Hello</p>'
})
export class HelloComponent {}

Samowystarczalne zależności

Ponieważ komponent standalone deklaruje własne zależności, wystarczy przeczytać jeden plik, aby wiedzieć, od czego zależy. Poprawia to przejrzystość kodu i działanie narzędzi.

Mniej kodu pomocniczego

Nie trzeba już dopasowywać deklaracji i eksportów w różnych modułach. Komponent importuje się bezpośrednio tam, gdzie jest używany, podobnie jak działają moduły ES.

Lepsze tree-shaking

Komponenty standalone sprawiają, że graf zależności jest jawny, co pomaga bundlerom usuwać nieużywany kod i może prowadzić do mniejszych bundle’ów.

Prostsze lazy loading

Trasy mogą leniwie ładować komponent standalone bezpośrednio za pomocą dynamicznego importu, bez konieczności tworzenia opakowującego modułu funkcjonalności.

// route: loadComponent: () => import('./page.component').then(m => m.PageComponent)

Nowy domyślny sposób

W nowszych wersjach Angulara standalone jest domyślną opcją dla nowo generowanych komponentów. NgModules nadal działają, ale standalone jest zalecaną ścieżką rozwoju.

Współpraca z NgModules

Kod standalone i kod oparty na modułach mogą ze sobą współpracować. Komponent standalone można importować do NgModule, a komponent oparty na NgModule może korzystać z importów standalone, co ułatwia migrację.

Co nadal trzeba konfigurować

Konfigurację obejmującą całą aplikację, taką jak router lub klient HTTP, udostępnia się za pomocą providerów bootstrapApplication zamiast modułu głównego, co zobaczą Państwo później.

Szybkie sprawdzenie: dlaczego standalone

Jaka jest główna korzyść z używania komponentów standalone?

Podsumowanie: dlaczego standalone

Komponenty standalone eliminują kod pomocniczy NgModule, ponieważ każdy komponent może deklarować własne zależności. Zapewnia to czytelniejszy kod, łatwiejsze lazy loading i lepsze tree-shaking. Standalone jest obecnie opcją domyślną. Dalej: tworzenie komponentu standalone.

Często zadawane pytania

Czy lekcja „Dlaczego komponenty standalone” jest bezpłatna?

Tak — pełny tekst „Dlaczego komponenty standalone” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Dlaczego komponenty standalone”?

Zobacz, jak komponenty standalone upraszczają Angular. Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Dlaczego komponenty standalone”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?

Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Angular Academy