Wat is een Angular Service – Angular 9 Service by Example
We leren wat een Angular service is en daarna maken we een voorbeeld met de nieuwste Angular 9 versie.
Een Angular service is een singleton die kan worden gekoppeld aan componenten of andere services via Dependency Injection.
> ✋✋ Word lid van onze Facebook-groep 👈 om te discussiëren over alles wat te maken heeft met Angular-ontwikkeling.
Volgens Wikipedia:
In software engineering is dependency injection een techniek waarbij een object de afhankelijkheden van een ander object levert.
Wees niet geïntimideerd door deze term, het betekent simpelweg dat Angular (of een onderdeel van Angular, de injector) de instantiatie van de services voor zijn rekening neemt en de instantie levert aan het aanvragende component.
> ✋✋ Bekijk ook Angular 9/8 Services & Dependency Injection via providedIn, root & any Tutorial 👈
Volgens de Angular-docs:
DI is ingebed in het Angular-framework en wordt overal gebruikt om nieuwe componenten te voorzien van de services of andere dingen die ze nodig hebben. Componenten consumeren services; dat wil zeggen, je kunt een service in een component injecteren, waardoor de component toegang krijgt tot die service class.
Je kunt services gebruiken om code in je app te organiseren en te delen
Hoe definieer je een Angular Service?
Om een klasse als een service in Angular te definiëren, gebruikt u de @Injectable() decorator om de metadata te verstrekken waarmee Angular de klasse als een dependency in een component kan injecteren.
U moet een service beschikbaar stellen voordat deze beschikbaar kan zijn. Dit kan op drie manieren:
- Via de metadata van de service die is doorgegeven aan de @Injectable() decorator (De service zal overal beschikbaar zijn),
- Via de array van de providers, in een specifieke module (De service is alleen beschikbaar voor de componenten en services van de module),
- Via de array van de providers in een specifieke component (De service is alleen beschikbaar voor de component).
Angular 9 Service by Example
Laten we nu een service by example maken.
Zorg ervoor dat u een Angular-project hebt gemaakt en Angular CLI v9 hebt geïnstalleerd.
Ga naar uw opdrachtregelinterface en navigeer naar de map van uw project:
$ cd your-angular-project
Naar aanleiding hiervan genereert u een nieuwe service door het volgende commando uit te voeren:
$ ng generate service my-example
Open het bestand src/app/mijn-voorbeeld.service.ts bestand:
@Injectable({
providedIn: 'root'
})
export class MyExampleService {
}
Dankzij de eigenschap providedIn hoeft u verder niets te doen om deze service te gaan gebruiken, behalve de functionaliteit te implementeren die moet worden geboden. de waarde root verwijst naar de hoofdmodule van de app.
U kunt ook andere services in uw nieuwe service injecteren – bijvoorbeeld de ingebouwde HttpClient-service – via de constructor:
import { HttpClient } from '@angular/common/http';@Injectable({
providedIn: 'root'
})
export class MyExampleService { constructor(private httpClient: HttpClient) { }
}
Nadat u de methoden van uw service hebt geïmplementeerd, kunt u deze importeren en in andere componenten injecteren en de openbare methoden van uw service in uw component aanroepen.
Volgens de Angular-documenten:
Typisch gezien is het de taak van een component om de gebruikerservaring mogelijk te maken en niets meer dan dat. Een component moet eigenschappen en methoden voor gegevensbinding presenteren, om te bemiddelen tussen de weergave (weergegeven door de sjabloon) en de applicatielogica.
Een component kan bepaalde taken delegeren aan services, zoals het ophalen van gegevens van de server, het valideren van gebruikersinvoer, of het direct loggen naar de console.
Door dergelijke verwerkingstaken te definiëren in een injecteerbare serviceklasse, maak je die taken beschikbaar voor elke component.