Introduzione ai services in Angular 4 e agli Observables utilizzati con la libreria RxJS

1. Angular 4
Services

2. in collaborazione conServices 2
È una classe Angular utilizzata per implementare funzionalità
indipendenti da una view specifica, o per fornire dati e logica
condivisi per più componenti.
I services vengono iniettati in altri componenti o servizi tramite
dependency injection.

3. in collaborazione conServices 3
La dependecy injection è un design pattern e un meccanismo
per la creazione e la distribuzione di parti di una applicazione
all'interno di altre parti che le richiedono.

4. in collaborazione conServices 4
Un componente potrebbe avere la necessità di utilizzare un
service per ottenere dei dati o per utilizzare delle funzioni.
Se un componente "A" si affida ad un altra entità "B", si dice
che "A" dipende da "B" e che "B" è una dipendenza di "A".

5. 1.
CREARE UN SERVICE
in collaborazione conServices 5

6. in collaborazione conServices
Solitamente, i services sono parti
di logica o dati che vengono
condivisi in più componenti.
È logico inserirli in una cartella
shared.
Non sempre, un service è
condiviso per l'intera
applicazione.
6
-src
--app
---shared
----...

7. in collaborazione conServices
Il nome del file deve rispecchiare
il seguente pattern:
service-name.service.ts
7
-src
--app
---shared
----logging.service.ts

8. in collaborazione conServices 8
/* src/app/shared/logging.service.ts */
export class LoggingService {
}

9. in collaborazione conServices
providers
Il service, per poter essere
utilizzato, va prima definito
nell'array providers, all'interno
del decorator @Component
9
/* src/app/app.component.ts */
import { Component } from '@angular/
core';
import { LoggingService } from '../
shared/logging.service';
@Component({
providers:[LoggingService],
...
})
export class AppComponent {
}

10. in collaborazione conServices
Il service va poi iniettato, tramite
dependency injection, nel
componente tramite il suo
costruttore
10
/* src/app/app.component.ts */
import { Component } from '@angular/
core';
import { LoggingService } from '../
shared/logging.service';
@Component({
...
})
export class AppComponent {
constructor(private ls:
LoggingService) {}
}

11. in collaborazione conServices 11
La dependency injection in Angular è di tipo gerarchica: i figli del
componente nel quale viene iniettato il service riceveranno
automaticamente le funzionalità del servizio stesso.

12. in collaborazione conServices
Se ChildComponent è figlio di
AppComponent (dove è stato
iniettato il servizio) allora non è
necessario includerlo nell'array
providers
12
/* src/app/app.component.ts */
import { Component } from '@angular/
core';
import { LoggingService } from '../
shared/logging.service';
@Component({
...
})
export class ChildComponent {
constructor(private ls:
LoggingService) {}
}

13. in collaborazione conServices 13
AppComponent
Child1Component Child2Component
ChildChild1Component
LoggingService
OtherService
AppModule
GlobalService

14. 2.
DECORATOR
in collaborazione conServices 14

15. in collaborazione conServices
@Injectable()
Il service, grazie ad @Injectable,
può ricevere, tramite dependency
injection, un altro service.
15
/* src/app/shared/logging.service.ts
*/
import { Injectable } from '@angular/
core';
import { OtherService } from '../
shared/other.service';
@Injecatable()
export class LoggingService {
constructor(private os:
OtherService) {}
}

16. 3.
OBSERVABLES
in collaborazione conServices 16

17. in collaborazione conServices 17
Creare applicazioni moderne significa fare un passo avanti
anche sui concetti oramai consolidati in programmazione.
Con le attuali esigenze degli utenti, le applicazioni devono
essere sempre più reattive e, allo stesso tempo, essere leggere
da caricare ed eseguire.

18. in collaborazione conServices 18
Con queste problematiche è nata la programmazione reattiva
(Reactive Programming): un paradigma di programmazione
che, più che basarsi sugli oggetti, si basa su flussi di dati
(tipicamente asincroni) e sulla possibilità che più entità
possano "abbonarsi" (subscribe) a questi flussi.

19. in collaborazione conServices 19
Tutti noi abbiamo già utilizzato questi flussi asincroni senza
rendersene conto:

20. in collaborazione conServices 20
A B C
1 4 90
2
3 A1 + B1
La cella C3 calcola automaticamente la somma quando uno dei due parametri cambia
La cella C3 osserva le modifiche di A1 e B1 ed esegue il calcolo se uno dei valori cambia
Le celle A1 e B1 notificano il proprio valore a tutti colori che sono in ascolto

21. Observables
RxJS
http://reactivex.io/
in collaborazione conServices 21

22. OBSERVABLE
OBSERVER
HANDLE ERROR COMPLETION
in collaborazione conServices 22

23. 4.
HTTP
in collaborazione conServices 23

24. in collaborazione conServices 24
È molto probabile che un'applicazione Angular, anche la più
semplice, necessiti di recuperare delle informazioni da un server
remoto.
Per poter utilizzare le richieste HTTP, Angular ci mette a
disposizione due servizi appositi: Http e HttpClient

25. in collaborazione conServices
Per poter utilizzare il servizio
Http è necessario includere il
modulo HttpModule
25
/* src/app/app.module.ts */
import { NgModule } from '@angular/
core';
import { HttpModule } from
'@angular/http';
@NgModule({
...
imports: [
BrowserModule,
HttpModule
],
...
})

26. in collaborazione conServices
Per poter utilizzare il servizio
HttpClient è necessario
includere il modulo
HttpClientModule
26
/* src/app/app.module.ts */
import { NgModule } from '@angular/
core';
import { HttpClientModule } from
'@angular/common/http';
@NgModule({
...
imports: [
BrowserModule,
HttpClientModule
],
...
})

27. in collaborazione conServices
È possibile utilizzare tutti i
termini HTTP più comuni: get,
post, put, delete, patch, head,
options
Il servizio Http ritorna sempre un
Observable.
Con Angular 5 Http è stato
deprecato in favore di
HttpClient
27
/* src/app/shared/logging.service.ts
*/
import { Injectable } from '@angular/
core';
import { Http } from '@angular/http';
@Injecatable()
export class LoggingService {
constructor(private http: Http) {}
getMessage(): Observable<...> {
return this.http.get(`...`);
}
}

28. in collaborazione conServices
Le stesse modalità sono presenti
in HttpClient.
L'unica differenza è che con
HttpClient è possibile utilizzare
gli interceptor.
28
/* src/app/shared/logging.service.ts
*/
import { Injectable } from '@angular/
core';
import { HttpClient } from '@angular/
common/http';
@Injecatable()
export class LoggingService {
constructor(private http:
HttpClient) {}
getMessage(): Observable<...> {
return this.http.get(`...`);
}
}

29. in collaborazione conServices
Finché non sottoscriviamo un
Observable, esso non viene creato
e, per cui, nessun valore viene
emesso ai subscribers
29
/* src/app/app.component.ts */
...
constructor(private ls:
LoggingService) {}
ngOnInit() {
this.ls.getMessage()
.subscribe();
}
...

30. in collaborazione conServices
All'interno di subscribe()
possiamo utilizzare tre metodi
✴success: I dati vengono inviati
correttamente ai subscribers
✴error: c'è un errore che viene
notificato ai subscribers
✴complete: viene chiamata
quando l'observable viene chiuso
30
/* src/app/app.component.ts */
...
constructor(private ls:
LoggingService) {}
ngOnInit() {
this.ls.getMessage()
.subscribe(
(success) => {},
(error) => {},
() => {}
);
}
...

31. in collaborazione conServices
In qualunque momento è
possibile rimuovere la
sottoscrizione ad un observable.
Se non ci sono altri subscribers,
l'observable viene rimosso dalla
memoria
31
/* src/app/app.component.ts */
...
constructor(private ls:
LoggingService) {}
ngOnDestroy() {
this.ls.getMessage()
.unsubscribe();
}
...

32. in collaborazione conComponents
© 2017 - Giovanni Buffa
32