Angular Academy · Lekcja

Angular bez Zone.js

Uruchamiać Angulara bez Zone.js

Angular bez Zone.js to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 3 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.

Poza Zone.js

Zone.js generuje dodatkowy narzut i modyfikuje globalne API. Nowoczesny Angular oferuje tryb zoneless, w którym wykrywanie zmian jest sterowane przez sygnały i jawne powiadomienia zamiast modyfikowania działania stref.

Włączanie trybu zoneless

Dostawcę wykrywania zmian w trybie zoneless należy dodać w konfiguracji uruchamiania aplikacji.

bootstrapApplication(AppComponent, {
  providers: [
    provideExperimentalZonelessChangeDetection()
  ]
});

Usuwanie Zone.js

W trybie zoneless należy również usunąć polyfill zone.js z konfiguracji kompilacji, zmniejszając rozmiar pakietu i koszt uruchamiania aplikacji.

// angular.json: remove "zone.js" from polyfills
// main.ts: do not import 'zone.js'

Co teraz uruchamia wykrywanie zmian?

Bez stref Angular planuje wykrywanie zmian, gdy: zmieni się sygnał odczytany w szablonie, potok async wyemituje wartość, wystąpi zdarzenie powiązane w szablonie lub zostanie wywołane markForCheck().

Sygnały są kluczowe

Aplikacje zoneless w dużej mierze polegają na sygnałach do przechowywania stanu. Odczytanie sygnału w szablonie tworzy zależność, a jego aktualizacja powiadamia Angular o konieczności odświeżenia tego widoku.

count = signal(0);
// template: {{ count() }}
this.count.set(5); // schedules CD

Zdarzenia nadal powiadamiają

Wiązania zdarzeń w szablonie bezpośrednio powiadamiają Angular, dlatego interakcje użytkownika nadal aktualizują interfejs bez stref.

<button (click)="count.update(c => c + 1)">+</button>

Operacje asynchroniczne bez stref

Bezpośrednie użycie setTimeout lub operacje asynchroniczne niezwiązane z sygnałami nie uruchamiają już automatycznie wykrywania zmian. Taki stan należy opakować w sygnały albo wywołać markForCheck().

setTimeout(() => this.ready.set(true), 1000);

Zgodność potoku async

Potok async nadal działa w trybie zoneless, ponieważ jawnie oznacza widok do sprawdzenia po każdej emisji.

<p>{{ data$ | async }}</p>

Biblioteki innych firm

Niektóre biblioteki zakładały, że Zone.js automatycznie wykrywa zmiany. W trybie zoneless może być konieczne opakowanie ich callbacków w taki sposób, aby aktualizowały sygnał, albo ręczne wywoływanie markForCheck().

Korzyści

Tryb zoneless oznacza mniejsze pakiety, szybsze uruchamianie, mniej nieoczekiwanych dodatkowych przebiegów oraz bardziej przejrzysty model działania: interfejs jest aktualizowany tylko wtedy, gdy rzeczywiście zmieni się śledzony stan.

Status eksperymentalny

Dostawca nosi nazwę provideExperimentalZonelessChangeDetection, ponieważ API jest nadal stabilizowane. Należy stosować go w nowych aplikacjach opartych przede wszystkim na sygnałach i dokładnie je testować.

Szybki test

Sprawdź swoją wiedzę na temat Angulara w trybie zoneless.

Podsumowanie

Dowiedziałeś się, że provideExperimentalZonelessChangeDetection() eliminuje potrzebę używania Zone.js, sterując aktualizacjami za pomocą sygnałów, zdarzeń, potoku async i markForCheck(), co pozwala tworzyć mniejsze, szybsze i bardziej przewidywalne aplikacje.

Często zadawane pytania

Czy lekcja „Angular bez Zone.js” jest bezpłatna?

Tak — pełny tekst „Angular bez Zone.js” 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 „Angular bez Zone.js”?

Uruchamiać Angulara bez Zone.js Ć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 3 z 4.

Ile czasu zajmuje lekcja „Angular bez Zone.js”?

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