Angular Academy · Lekcja

Dostawcy i zakresy

Kontroluj, gdzie usługi znajdują się w drzewie.

Dostawcy i zakresy 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.

Dostawcy i zakresy

Dostawca określa, jak Angular ma utworzyć zależność. Zakres, w którym dostawca zostanie zarejestrowany, określa liczbę tworzonych instancji i to, kto je współdzieli.

Zakres root

providedIn: root rejestruje usługę w głównym wstrzykiwaczu: powstaje jeden współdzielony singleton dla całej aplikacji. Jest to najczęściej wybierana opcja.

@Injectable({ providedIn: 'root' })
export class AppStore {}

Dostawcy komponentu

Zakres usługi można ograniczyć do komponentu, umieszczając ją w tablicy providers komponentu. Każda instancja tego komponentu otrzyma własną instancję usługi.

import { Component } from '@angular/core';
import { LocalStore } from './local-store';

@Component({
  selector: 'app-panel',
  providers: [LocalStore],
  template: ''
})
export class PanelComponent {}

Dlaczego zakres komponentu

Dostawców o zakresie komponentu należy używać, gdy każda instancja komponentu potrzebuje własnego, odizolowanego stanu, na przykład stanu formularza lub magazynu danych danego widżetu.

Root a komponent

Root: jedna instancja współdzielona w całej aplikacji. Component: jedna instancja na instancję komponentu i jego elementy potomne. Należy wybrać zakres zależnie od tego, czy stan ma być współdzielony, czy odizolowany.

Hierarchia wstrzykiwaczy

Wstrzykiwacze Angulara tworzą drzewo. Podczas rozwiązywania zależności Angular szuka jej w wstrzykiwaczu komponentu, następnie przechodzi w górę do elementów nadrzędnych, a na końcu do wstrzykiwacza root.

Komponenty potomne dziedziczą

Usługa dostarczona na poziomie komponentu jest również dostępna dla jego komponentów potomnych, chyba że komponent potomny dostarczy własną instancję, która przysłoni instancję nadrzędną.

Dostawcy na poziomie aplikacji

Dostawców można również rejestrować podczas uruchamiania aplikacji, w tablicy providers funkcji bootstrapApplication, podobnie jak w zakresie root, często za pomocą funkcji provide*.

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

useClass i useValue

Dostawcy mogą mapować token na klasę za pomocą useClass, na stałą wartość za pomocą useValue lub na funkcję fabrykującą za pomocą useFactory. Umożliwia to podmienianie implementacji i konfigurację.

// providers: [{ provide: Logger, useClass: ConsoleLogger }]

Podmienianie implementacji

Ponieważ dostawca mapuje token na implementację, można podmieniać implementacje, na przykład używać atrap w testach, bez zmieniania kodu korzystających z nich elementów.

Wybór zakresu

Domyślnie należy wybierać root dla współdzielonych singletonów. Po dostawców komponentu warto sięgać tylko wtedy, gdy potrzebny jest odizolowany stan przypisany do konkretnej instancji.

Szybkie sprawdzenie: zakresy

Stan przypisany do instancji.

Podsumowanie: dostawcy i zakresy

Poznali Państwo, że dostawcy opisują sposób tworzenia zależności, a zakres kontroluje tworzenie instancji: root służy do singletonów dostępnych w całej aplikacji, a dostawcy komponentu do izolowania stanu poszczególnych instancji. Angular rozwiązuje zależności za pomocą hierarchii wstrzykiwaczy, a useClass/useValue/useFactory umożliwiają podmienianie implementacji. Następnie: tokeny wstrzykiwania.

Często zadawane pytania

Czy lekcja „Dostawcy i zakresy” jest bezpłatna?

Tak — pełny tekst „Dostawcy i zakresy” 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 „Dostawcy i zakresy”?

Kontroluj, gdzie usługi znajdują się w drzewie. Ć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 „Dostawcy i zakresy”?

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