Megtanuljuk, mi az az Angular szolgáltatás, majd létrehozunk egy példát a legújabb Angular 9-es verzióval.

Az Angular szolgáltatás egy singleton, amelyet Dependency Injection segítségével komponensekkel vagy más szolgáltatásokkal lehet összekötni.

> ✋✋ Csatlakozz Facebook csoportunkhoz 👈, hogy megvitassunk mindent, ami az Angular fejlesztéssel kapcsolatos.

A Wikipedia szerint:

A szoftverfejlesztésben a függőségi injektálás egy olyan technika, amelynek során egy objektum egy másik objektum függőségeit szolgáltatja.

Ne ijedjünk meg ettől a kifejezéstől, egyszerűen azt jelenti, hogy az Angular (vagy az Angular egy része, az injektor) gondoskodik a szolgáltatások példányosításáról, és a példányt az igénylő komponens számára biztosítja.

> ✋✋ Nézd meg az Angular 9/8 Services & Dependency Injection via providedIn, root & any Tutorial 👈

Az Angular docs szerint:

ADI be van drótozva az Angular keretrendszerbe és mindenhol arra használják, hogy az új komponenseket ellátják a szükséges szolgáltatásokkal vagy egyéb dolgokkal. A komponensek szolgáltatásokat fogyasztanak, azaz egy szolgáltatást be tudsz injektálni egy komponensbe, így a komponens hozzáférhet az adott szolgáltatási osztályhoz.

A szolgáltatások segítségével megszervezheted és megoszthatod a kódot az alkalmazásodban

Hogyan definiáljunk egy Angular szolgáltatást?

Hogy egy osztályt szolgáltatásként definiáljon az Angularban, használja a @Injectable() dekorátort a metaadatok megadásához, amelyek lehetővé teszik az Angular számára, hogy függőségként injektálja azt egy komponensbe.

Egy szolgáltatást meg kell adnia, mielőtt az elérhetővé válna. Ezt háromféleképpen lehet megtenni:

• A szolgáltatás metaadatain keresztül, amelyeket a @Injectable() dekorátornak adunk át (A szolgáltatás mindenhol elérhető lesz),
• A szolgáltatók tömbjén keresztül, egy adott modulban (A szolgáltatás csak a modul komponensei és szolgáltatásai számára elérhető),
• A szolgáltatók tömbjén keresztül egy adott komponensben (A szolgáltatás csak a komponens számára elérhető).

Angular 9 Service by Example

Létrehozunk most egy szolgáltatást egy példán keresztül.

Győződjünk meg róla, hogy létrehoztunk egy Angular projektet és telepítettük az Angular CLI v9-et.

Lépjünk a parancssori felületünkre, és navigáljunk a projektünk mappájába:

$ cd your-angular-project

Majd hozzunk létre egy új szolgáltatást a következő parancs futtatásával:

$ ng generate service my-example

Nyissuk meg a src/app/my-example.service.ts fájlt:

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

A providedIn tulajdonságnak köszönhetően a szolgáltatás használatának megkezdéséhez semmi mást nem kell tennie, kivéve a biztosítandó funkciók megvalósítását. a root érték az alkalmazás gyökérmoduljára utal.

Az új szolgáltatásba – például a beépített HttpClient szolgáltatásba – a konstruktorán keresztül más szolgáltatásokat is injektálhat:

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

A szolgáltatás metódusainak implementálása után importálhatja és injektálhatja más komponensekbe, és meghívhatja a szolgáltatás nyilvános metódusait a saját komponensében.

Az Angular dokumentáció szerint:

Tipikusan egy komponens feladata, hogy lehetővé tegye a felhasználói élményt és semmi több. Egy komponensnek tulajdonságokat és metódusokat kell bemutatnia az adatkötéshez, hogy közvetítsen a (sablon által renderelt) nézet és az alkalmazási logika között.

Egy komponens delegálhat bizonyos feladatokat szolgáltatásokra, mint például adatok lekérése a szerverről, a felhasználói bemenet hitelesítése vagy közvetlen naplózás a konzolra.

Az ilyen feldolgozási feladatok injektálható szolgáltatásosztályban történő definiálásával ezeket a feladatokat bármelyik komponens számára elérhetővé teszi.