Poznáme, co je to angulární služba, a poté vytvoříme příklad s nejnovější verzí Angularu 9.

Služba Angular je singleton, který lze propojit s komponentami nebo jinými službami pomocí Dependency Injection.

> ✋✋ Připojte se k naší skupině na Facebooku 👈 a diskutujte o všem, co se týká vývoje v Angularu.

Podle Wikipedie:

V softwarovém inženýrství je vstřikování závislostí technika, při které jeden objekt dodává závislosti jinému objektu.

Nenechte se tímto termínem zastrašit, jednoduše to znamená, že Angular (nebo jeho část, injektor) se postará o instanciaci služeb a poskytne instance žádající komponentě.

> ✋✋ Podívejte se také na Angular 9/8 Services & Dependency Injection via providedIn, root & any Tutorial 👈

Podle dokumentace Angularu:

DI je zapojen do frameworku Angular a používá se všude, aby poskytoval novým komponentám služby nebo jiné věci, které potřebují. Komponenty konzumují služby; to znamená, že do komponenty můžete injektovat službu, čímž komponentě poskytnete přístup k této třídě služby.

Služby můžete používat k organizaci a sdílení kódu napříč aplikací

Jak definovat službu Angular?

Chcete-li v Angularu definovat třídu jako službu, použijte dekorátor @Injectable() a poskytněte metadata, která Angularu umožní injektovat ji do komponenty jako závislost.

Předtím, než bude služba dostupná, ji musíte poskytnout. To lze provést třemi způsoby:

• Pomocí metadat služby předaných dekorátoru @Injectable() (Služba bude dostupná všude),
• Pomocí pole poskytovatelů, v konkrétním modulu (Služba je dostupná pouze pro komponenty a služby modulu),
• Pomocí pole poskytovatelů v konkrétní komponentě (Služba je dostupná pouze pro danou komponentu).

Služba Angular 9 na příkladu

Nyní vytvoříme službu na příkladu.

Ujistěte se, že máte vytvořený projekt Angular a nainstalované rozhraní Angular CLI v9.

Přejděte do rozhraní příkazového řádku a přejděte do složky projektu:

$ cd your-angular-project

Dále vytvořte novou službu spuštěním následujícího příkazu:

$ ng generate service my-example

Otevřete složku src/app/my-example.service.ts:

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

Díky vlastnosti providedIn nemusíte dělat nic dalšího, abyste mohli začít tuto službu používat, kromě implementace funkcí, které musí poskytovat. hodnota root odkazuje na kořenový modul aplikace.

Do své nové služby můžete také injektovat jiné služby – například vestavěnou službu HttpClient – prostřednictvím jejího konstruktoru:

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

Po implementaci metod své služby ji můžete importovat a injektovat do jiných komponent a volat veřejné metody své služby ve své komponentě.

Podle dokumentace Angular:

Typicky je úkolem komponenty umožnit uživatelské prostředí a nic víc. Komponenta by měla prezentovat vlastnosti a metody pro vazbu s daty, aby zprostředkovala spojení mezi pohledem (vykresleným šablonou) a aplikační logikou.

Komponenta může delegovat určité úlohy na služby, například načítání dat ze serveru, ověřování uživatelských vstupů nebo protokolování přímo do konzoly.

Definováním takových úloh zpracování v injektovatelné třídě služby zpřístupníte tyto úlohy libovolné komponentě.

Komponenta by měla být schopna zpracovávat data, která se nacházejí na serveru.