In questa guida ai Servizi in Angular, ti mostrerò come creare un semplice componente che recupera un elenco di prodotti da un servizio Angular e lo visualizza nel nostro template.
Il componente dovrà essere dedicato aulla presentazione dei dati all’utente. L’attività dedita all’ottenimento dei dati dal server back-end deve essere delegata ad un’altra classe. Tale classe si definisce “service class”. Poiché consente al servizio di fornire dati a tutti i componenti che ne hanno bisogno.
Questa guida fa parte di Angular: la guida definitiva
Index
Cos’è un servizio in Angular
Un servizio è un pezzo di codice riutilizzabile con uno scopo ben definito. Un codice che utilizzerai in molti componenti della tua applicazione.
A cosa servono i servizi in Angular
- Ad ottenere funzionalità indipendenti dai componenti
- Alla condividisione di logica o dati tra i componenti
- Ad incapsulare interazioni esterne
Quali sono i vantaggi nell’utilizzare servizi in Angular
- I servizi sono più facili da testare.
- I servizi sono facilmente riutilizzabili
Come creare un servizio in Angular
Un servizio in Angular è semplicemente una funzione Javascript. Tutto quello che dobbiamo fare è creare una classe e aggiungere metodi e proprietà. Possiamo quindi creare un’istanza di questa classe nel nostro componente e chiamarne i metodi. Uno dei migliori utilizzi dei servizi è quello dedicato all’ottenimento di dati. Creiamo un servizio semplice, che ottiene dati li trasmette al nostro componente.
Prodotto
Crea un nuovo file nella cartella src/app e chiamalo prodotto.model.ts
export class Prodotto {
constructor(ID:number, nome: string, prezzo:number) {
this.ID=ID;
this.nome=nome;
this.prezzo=prezzo;
}
ID:number ;
nome: string ;
prezzo:number;
}
La classe Prodotto sarà il nostro modello
ProdottoService
Costruiamo un servizio Angular, che restituisce un elenco di prodotti.
Crea un nuovo file nella cartella src/app e chiamalo prodotto.service.ts
import {Prodotto} from './Prodotto'
export class ProdottoService{
public getProdotti() {
let prodotti:Prodotto[];
prodotti=[
new Prodotto(1,'Matita',1€),
new Prodotto(2,'Gomma',1€),
new Prodotto(3,'Penna',1€),
]
return prodotti;
}
}
Innanzitutto, ho importato il modello prodotto.
Ho creato la classe ProdottoService e l’ho esportata.
Ho creato un metodo getProdotti, che restituisce appunto i prodotti.
In questo esempio, ho inserito direttamente nel codice i prodotti. Nella vita reale, invieresti una richiesta HTTP all’API back-end per ottenere i dati.
Ora il nostro servizio è pronto.
Nota che la classe appena definita è una semplice funzione JavaScript. Non c’è nulla di Angular.
Invocare il servizio ProdottoService
Il passaggio successivo consiste nel richiamare ProdottoService dal componente. Apri app.componet.ts e aggiungi il seguente codice.
import { Component } from '@angular/core';
import { ProdottoService } from './prodotto.service';
import { Prodotto } from './prodotto.model';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent
{
prodotti:Prodotto[];
prodottoService;
constructor(){
this.prodottoService=new ProdottoService();
}
getProdotti() {
this.prodotti=this.prodottoService.getProdotti();
}
}
Innanzitutto, ho importato sia Prodotto che ProdottoService.
Nel costruttore di AppComponet, ho creato l’istanza di ProdottoSerivce.
Il metodo getProdotti chiama il metodo getProdotti di ProdottoService. L’elenco di prodotti restituito viene salvato.
Template
Il prossimo passo sarà mostrare i Prodotti all’utente.
Apri il file app.component.html e aggiungi il seguente codice.
<div class="container">
<h1 class="heading"><strong>Servizi in Angular</strong></h1>
<button type="button" (click)="getProdotti()">Carica Prodotti</button>
<div class='table-responsive'>
<table class='table'>
<thead>
<tr>
<th>ID</th>
<th>Nome</th>
<th>Prezzo</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let prodotto of prodotti;">
<td>{{prodotto.ID}}</td>
<td>{{prodotto.nome}}</td>
<td>{{prodotto.prezzo}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Sto usando bootstrap 3 per dare uno stile al template
Ho aggiunto un pulsante “Carica Prodotti”, che è collegato al metodo getProdotti tramite event binding.
Visualizzo i prodotti restituiti tramite la direttiva ngFor.
Dependency Injection in Angular
Nell’esempio, ho creato un’istanza di ProdottoService nel componente direttamente come mostrato di seguito.
this.prodottoService=new ProdottoService();
L’istanza diretta del servizio, come mostrato sopra, presenta molti svantaggi:
- ProdottoService è strettamente legato al Componente. Se cambiamo la definizione della classe ProdottoService, allora dobbiamo aggiornare ogni parte dell’applicazione in cui viene utilizzato il servizio
- Se vogliamo cambiare ProdottoService con MiglioriProdottiService, dobbiamo cercare ovunque sia utilizzato ProdottoService e cambiarlo manualmente
- Rende difficile il test. Potrebbe essere necessario fornire mockProdottoService per i test e utilizzare ProdottoService in produzione.
Questo problema può essere risolto mediante Dependency Injection. Puoi imparare come utilizzare le Dependency Injection in Angular nella guida dedicata.