Oppiessamme, mikä Angular-palvelu on ja luomme sen jälkeen esimerkin viimeisimmällä Angular 9 -versiolla.

An Angular service on singleton, joka voidaan kytkeä komponentteihin tai muihin palveluihin Dependency Injectionin avulla.

> ✋✋ Liity Facebook-ryhmäämme 👈 keskustelemaan kaikesta Angular-kehitykseen liittyvästä.

Wikipedian mukaan:

Ohjelmistotekniikassa riippuvuusinjektio (dependency injection) on tekniikka, jossa yksi objekti toimittaa toisen objektin riippuvuudet.

Ei kannata pelästyä tätä termiä, se tarkoittaa yksinkertaisesti sitä, että Angular (tai Angularin osa, injektoija) huolehtii palveluiden instanttisoinnista ja toimittaa instanssin sitä pyytävälle komponentille.

> ✋✋ Tutustu myös Angular 9/8 Services & Dependency Injection via providedIn, root & any Tutorial 👈

According to the Angular docs:

DI on kytketty osaksi Angularin viitekehystä ja sitä käytetään kaikkialla, jotta uusille komponenteille voidaan tarjota niiden tarvitsemia palveluita tai muita asioita. Komponentit kuluttavat palveluita, eli voit injektoida palvelun komponenttiin, jolloin komponentti pääsee käyttämään kyseistä palveluluokkaa.

Voit käyttää palveluita organisoimaan ja jakamaan koodia sovelluksessasi

Miten Angular-palvelu määritellään?

Määrittääksesi luokan palveluksi Angularissa, käytä @Injectable()-dekoraattoria antaaksesi metatiedot, joiden avulla Angular voi injektoida sen komponenttiin riippuvuutena.

Palvelu täytyy tarjota, ennen kuin se voi olla käytettävissä. Tämä voidaan tehdä kolmella tavalla:

• Palvelun metatietojen kautta, jotka välitetään @Injectable()-dekoraattorille (Palvelu on käytettävissä kaikkialla),
• Palveluntarjoajien joukon kautta, tietyssä moduulissa (Palvelu on käytettävissä vain moduulin komponenteille ja palveluille),
• Palveluntarjoajien joukon kautta tietyssä komponentissa (Palvelu on käytettävissä vain komponentissa).

Angular 9 Service by Example

Luotaan nyt palvelu esimerkin avulla.

Varmista, että Angular-projekti on luotu ja Angular CLI v9 on asennettu.

Siirry komentorivikäyttöliittymään ja navigoi projektisi kansioon:

$ cd your-angular-project

Luo seuraavaksi uusi palvelu suorittamalla seuraava komento:

$ ng generate service my-example

Avaa src/app/my-example.service.ts-tiedosto:

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

Tämän providedIn-ominaisuuden ansiosta sinun ei tarvitse tehdä mitään muuta, jotta voit aloittaa tämän palvelun käytön, paitsi toteuttaa toiminnallisuus, joka tarvitsee tarjota. root-arvo viittaa sovelluksen juurimoduuliin.

Voit myös injektoida muita palveluita uuteen palveluun – esimerkiksi sisäänrakennetun HttpClient-palvelun – sen konstruktorin kautta:

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

Toteutettuasi palvelusi metodit voit tuoda ja injektoida sen muihin komponentteihin ja kutsua palvelusi julkisia metodeja komponentissasi.

Angularin dokumenttien mukaan:

Tyypillisesti komponentin tehtävänä on mahdollistaa käyttäjäkokemus eikä mitään muuta. Komponentin tulisi esittää ominaisuuksia ja metodeja tietojen sitomista varten, jotta se voi toimia välittäjänä (mallin renderöimän) näkymän ja sovelluslogiikan välillä.

Komponentti voi delegoida tiettyjä tehtäviä palveluille, kuten tietojen noutaminen palvelimelta, käyttäjän syötteen validointi tai kirjaaminen suoraan konsoliin.

Määrittelemällä tällaiset prosessointitehtävät injektoitavissa olevalla palveluluokalla annat nämä tehtävät minkä tahansa komponentin käyttöön.

Komponentti voi delegoida tiettyjä tehtäviä palveluille.