Vom învăța ce este un serviciu Angular și apoi vom crea un exemplu cu cea mai recentă versiune Angular 9.

Un serviciu Angular este un singleton care poate fi conectat cu componente sau alte servicii prin intermediul Injecției de dependență.

> ✋✋ Alăturați-vă grupului nostru de Facebook 👈 pentru a discuta orice are legătură cu dezvoltarea Angular.

Conform Wikipedia:

În ingineria software, injecția de dependență este o tehnică prin care un obiect furnizează dependențele unui alt obiect.

Nu vă lăsați intimidat de acest termen, înseamnă pur și simplu că Angular (sau o parte din Angular, injectorul) se ocupă de instanțierea serviciilor și furnizează instanța componentei solicitante.

> ✋✋ Verificați, de asemenea, Angular 9/8 Services & Dependency Injection via providedIn, root & orice Tutorial 👈

Conform documentelor Angular:

DI este conectat în cadrul Angular și este folosit peste tot pentru a furniza noilor componente serviciile sau alte lucruri de care au nevoie. Componentele consumă servicii; adică, puteți injecta un serviciu într-o componentă, oferind componentei acces la acea clasă de servicii.

Puteți utiliza serviciile pentru a organiza și partaja codul în întreaga aplicație

Cum se definește un serviciu Angular?

Pentru a defini o clasă ca serviciu în Angular, utilizați decoratorul @Injectable() pentru a furniza metadatele care îi permit lui Angular să o injecteze într-o componentă ca dependență.

Trebuie să furnizați un serviciu înainte ca acesta să fie disponibil. Acest lucru se poate face în trei moduri:

• Via metadatele serviciului transmise decoratorului @Injectable() (Serviciul va fi disponibil peste tot),
• Via matricea furnizorilor, într-un anumit modul (Serviciul este disponibil doar pentru componentele și serviciile din modul),
• Via matricea furnizorilor într-o anumită componentă (Serviciul este disponibil doar pentru componentele și serviciile din modul),
• Via matricea furnizorilor într-o anumită componentă (Serviciul este disponibil doar pentru componentă).

Angular 9 Service by Example

Să creăm acum un serviciu de exemplu.

Asigurați-vă că aveți un proiect Angular creat și Angular CLI v9 instalat.

Direcționați-vă către interfața de linie de comandă și navigați în folderul proiectului dumneavoastră:

$ cd your-angular-project

În continuare, generați un nou serviciu prin rularea următoarei comenzi:

$ ng generate service my-example

Deschideți fișierul src/app/my-example.service.ts:

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

Grație proprietății providedIn, nu trebuie să faceți nimic altceva pentru a începe să utilizați acest serviciu, cu excepția implementării funcționalității pe care trebuie să o furnizeze. valoarea root se referă la modulul rădăcină al aplicației.

De asemenea, puteți injecta alte servicii în noul dvs. serviciu – de exemplu, serviciul integrat HttpClient – prin intermediul constructorului său:

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

După ce ați implementat metodele serviciului dvs., îl puteți importa și injecta în alte componente și puteți apela metodele publice ale serviciului dvs. în componenta dvs.

Conform documentației Angular:

În mod obișnuit, sarcina unei componente este de a permite experiența utilizatorului și nimic mai mult. O componentă ar trebui să prezinte proprietăți și metode de legare a datelor, pentru a media între vizualizare (redată de șablon) și logica aplicației.

O componentă poate delega anumite sarcini către servicii, cum ar fi preluarea de date de pe server, validarea intrărilor utilizatorului sau înregistrarea direct în consolă.

Din definirea unor astfel de sarcini de procesare într-o clasă de serviciu injectabilă, faceți ca aceste sarcini să fie disponibile pentru orice componentă.

.