Introduzioni ai services in Angular 4 e ad RxJS

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

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.

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".

1.
CREARE UN SERVICE

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
----...

Il nome del ﬁle deve rispecchiare
il seguente pattern:
service-name.service.ts
7
-src
--app
---shared
----logging.service.ts

/* src/app/shared/logging.service.ts */
export class LoggingService {
}

providers
Il service, per poter essere
utilizzato, va prima deﬁnito
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 {
}

Il service va poi iniettato, tramite
dependency injection, nel
componente tramite il suo
costruttore
10
core';
@Component({
...
})
export class AppComponent {
constructor(private ls:
LoggingService) {}
}

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

Se ChildComponent è ﬁglio di
AppComponent (dove è stato
iniettato il servizio) allora non è
necessario includerlo nell'array
providers
12
core';
@Component({
...
})
export class ChildComponent {
LoggingService) {}
}

AppComponent
Child1Component Child2Component
ChildChild1Component
LoggingService
OtherService
AppModule
GlobalService

2.
DECORATOR

@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()
constructor(private os:
OtherService) {}
}

3.
OBSERVABLES

Creare applicazioni moderne signiﬁca 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.

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

Tutti noi abbiamo già utilizzato questi ﬂussi asincroni senza
rendersene conto:

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 modiﬁche di A1 e B1 ed esegue il calcolo se uno dei valori cambia
Le celle A1 e B1 notiﬁcano il proprio valore a tutti colori che sono in ascolto

Observables
RxJS
http://reactivex.io/

OBSERVABLE
OBSERVER
HANDLE ERROR COMPLETION

4.
HTTP

È 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

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
],
...
})

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
],
...
})

È 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
*/
core';
import { Http } from '@angular/http';
@Injecatable()
constructor(private http: Http) {}
getMessage(): Observable<...> {
return this.http.get(`...`);
}
}

Le stesse modalità sono presenti
in HttpClient.
L'unica differenza è che con
HttpClient è possibile utilizzare
gli interceptor.
28
*/
core';
import { HttpClient } from '@angular/
common/http';
@Injecatable()
constructor(private http:
HttpClient) {}
getMessage(): Observable<...> {
return this.http.get(`...`);
}
}

Finché non sottoscriviamo un
Observable, esso non viene creato
e, per cui, nessun valore viene
emesso ai subscribers
29
...
LoggingService) {}
ngOnInit() {
this.ls.getMessage()
.subscribe();
}
...

All'interno di subscribe()
possiamo utilizzare tre metodi
✴success: I dati vengono inviati
correttamente ai subscribers
✴error: c'è un errore che viene
notiﬁcato ai subscribers
✴complete: viene chiamata
quando l'observable viene chiuso
30
...
LoggingService) {}
ngOnInit() {
.subscribe(
(success) => {},
(error) => {},
() => {}
);
}
...

In qualunque momento è
possibile rimuovere la
sottoscrizione ad un observable.
Se non ci sono altri subscribers,
l'observable viene rimosso dalla
memoria
31
...
LoggingService) {}
ngOnDestroy() {
.unsubscribe();
}
...

Introduzioni ai services in Angular 4 e ad RxJS

More Related Content

What's hot (15)

Similar to Introduzioni ai services in Angular 4 e ad RxJS (17)

More from Giovanni Buffa (18)

Introduzioni ai services in Angular 4 e ad RxJS