Usługi i Injectable
Twórz usługi możliwe do wstrzykiwania dla współdzielonej logiki.
Usługi i Injectable 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.
Usługi i wstrzykiwanie
Usługa to klasa zawierająca wielokrotnie używaną logikę lub stan, na przykład pobieranie danych albo współdzielony magazyn. Angular tworzy usługi i udostępnia je za pomocą wstrzykiwania zależności.
Dlaczego usługi
Komponenty powinny koncentrować się na widoku. Logikę biznesową, wywołania API i współdzielony stan należy przenieść do usług, aby można było ich ponownie używać i niezależnie testować.
Dekorator Injectable
Oznacz klasę usługi za pomocą dekoratora @Injectable, aby Angular mógł ją tworzyć i wstrzykiwać tam, gdzie jest potrzebna.
import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class DataService {}providedIn root
providedIn: 'root' rejestruje usługę w głównym wstrzykiwaczu aplikacji. Angular tworzy jedną współdzieloną instancję (singleton) dla całej aplikacji.
Dostawcy usuwani przez tree-shaking
Ponieważ dostawca jest zadeklarowany w klasie za pomocą providedIn, nieużywane usługi mogą być automatycznie usuwane z bundla podczas tree-shakingu.
Usługa ze stanem
Usługi często przechowują stan. W przypadku signals należy udostępniać z usługi stan reaktywny.
import { Injectable, signal } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class CounterStore {
count = signal(0);
increment() { this.count.update(v => v + 1); }
}Usługa z metodami
Należy dodać metody, które komponenty mogą wywoływać w celu wykonywania operacji lub pobierania danych.
@Injectable({ providedIn: 'root' })
export class GreetingService {
greet(name: string): string {
return 'Hello, ' + name;
}
}Generowanie usługi
CLI tworzy szkielet usługi z dodanym już dekoratorem Injectable.
ng g service dataSingletony współdzielą stan
Ponieważ usługa w zakresie root jest singletonem, każdy komponent, który ją wstrzykuje, korzysta z tej samej instancji i tego samego stanu. W ten sposób komponenty współdzielą dane.
Usługi mogą wstrzykiwać inne usługi
Usługa może zależeć od innych usług. Na przykład usługa danych może używać usługi HttpClient do wykonywania żądań.
Usługi powinny mieć jasno określone zadania
Każdej usłudze należy przypisać jedną, jasno określoną odpowiedzialność. Małe, wyspecjalizowane usługi łatwiej testować i ponownie wykorzystywać niż duże usługi wykonujące wiele zadań.
Szybkie sprawdzenie: Injectable
Rejestrowanie usługi typu singleton.
Podsumowanie: usługi
Poznali Państwo, że usługi przechowują wielokrotnie używaną logikę i stan, są oznaczane za pomocą @Injectable, a parametr providedIn: root służy do rejestrowania singletonu dostępnego w całej aplikacji. Usługi współdzielą stan między komponentami i mogą zależeć od innych usług. Następnie: funkcja inject.
Często zadawane pytania
Czy lekcja „Usługi i Injectable” jest bezpłatna?
Tak — pełny tekst „Usługi i Injectable” 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 „Usługi i Injectable”?
Twórz usługi możliwe do wstrzykiwania dla współdzielonej logiki. Ć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 „Usługi i Injectable”?
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
- Usługi i Injectable
- Funkcja inject
- Dostawcy i zakresy
- Tokeny wstrzykiwania