Dowiemy się czym jest Angular service, a następnie stworzymy przykład z wykorzystaniem najnowszej wersji Angular 9.

Usługa Angulara to singleton, który może być połączony z komponentami lub innymi usługami poprzez Dependency Injection.

> ✋✋ Dołącz do naszej grupy na Facebooku 👈 aby dyskutować o wszystkim co związane z Angular development.

Według Wikipedii:

W inżynierii oprogramowania, wstrzykiwanie zależności jest techniką, w której jeden obiekt dostarcza zależności innego obiektu.

Nie bądź zastraszony tym terminem, oznacza to po prostu, że Angular (lub część Angulara, injector) zajmuje się instancjonowaniem usług i dostarcza instancję do komponentu żądającego.

> ✋✋ Sprawdź również Angular 9/8 Services & Dependency Injection via providedIn, root & any Tutorial 👈

Według Angular docs:

DI jest wired into the Angular framework and used everywhere to provide new components with the services or other things they need. Komponenty zużywają usługi; to znaczy, że możesz wstrzyknąć usługę do komponentu, dając komponentowi dostęp do tej klasy usługi.

Możesz używać usług do organizowania i współdzielenia kodu w całej aplikacji

Jak zdefiniować usługę Angular?

Aby zdefiniować klasę jako usługę w Angularze, użyj dekoratora @Injectable(), aby dostarczyć metadane, które pozwalają Angularowi wstrzyknąć ją do komponentu jako zależność.

Musisz dostarczyć usługę, zanim będzie ona dostępna. Można to zrobić na trzy sposoby:

• Via metadane usługi przekazane do dekoratora @Injectable() (Usługa będzie dostępna wszędzie),
• Via tablica dostawców, w określonym module (Usługa jest dostępna tylko dla komponentów i usług modułu),
• Via tablica dostawców w określonym komponencie (Usługa jest dostępna tylko dla komponentu).

Angular 9 Service by Example

Twórzmy teraz usługę na przykładzie.

Upewnij się, że masz utworzony projekt Angular i zainstalowane Angular CLI v9.

Przejdź do swojego interfejsu wiersza poleceń i przejdź do folderu swojego projektu:

$ cd your-angular-project

Następnie wygeneruj nową usługę, uruchamiając następujące polecenie:

$ ng generate service my-example

Otwórz plik src/app/my-example.service.ts:

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

Dzięki właściwości providedIn nie musisz robić nic więcej, aby zacząć korzystać z tej usługi, poza zaimplementowaniem funkcjonalności, którą musi zapewnić. wartość root odnosi się do modułu głównego aplikacji.

Możesz również wstrzyknąć inne usługi do swojej nowej usługi – na przykład wbudowaną usługę HttpClient – poprzez jej konstruktor:

import { HttpClient } from '@angular/common/http';@Injectable({
providedIn: 'root'
})
export class MyExampleService { constructor(private httpClient: HttpClient) { }
}

Po zaimplementowaniu metod swojej usługi, możesz ją zaimportować i wstrzyknąć do innych komponentów oraz wywołać publiczne metody swojej usługi w swoim komponencie.

Zgodnie z Angular docs:

Typowo, zadaniem komponentu jest umożliwienie doświadczenia użytkownika i nic więcej. Komponent powinien prezentować właściwości i metody do wiązania danych, aby pośredniczyć między widokiem (renderowanym przez szablon) a logiką aplikacji.

Komponent może delegować pewne zadania do usług, takich jak pobieranie danych z serwera, sprawdzanie poprawności danych wejściowych użytkownika lub logowanie bezpośrednio do konsoli.

Definiując takie zadania przetwarzania w klasie usługi wstrzykiwalnej, udostępniasz te zadania każdemu komponentowi.