Servizi e Dependency Injection in Angular
Download as PPTX, PDF1 like362 views
Il documento descrive l'implementazione di servizi e dependency injection in Angular, evidenziando importanti concetti e pratiche. Viene presentato come creare servizi utilizzando Angular CLI, gestire le chiamate HTTP e utilizzare dependency injection per migliorare la testabilità del codice. Infine, il documento propone sfide pratiche per applicare le nozioni apprese.
![Dependency Injection
DI in Angular
Utilizzando Angular CLI
Creare un Service
Definire un provider per l’injector
Registrare un Service
…
providers: [LoggerService]
…](https://image.slidesharecdn.com/3-180420103908/85/Servizi-e-Dependency-Injection-in-Angular-26-320.jpg)
![HTTP
HttpModule
@NgModule({
declarations: [
AppComponent,
LinkListComponent,
LinkItemComponent,
MomentPipe
],
imports: [
BrowserModule,
HttpModule
],
providers: [ApiService, LoggerService],
bootstrap: [AppComponent]
})
Definire in import di @NgModule dopo
BrowserModule
Importare HttpModule da @angular/http
Iniettare nel costruttore di un componente
o di un altro servizio
Iniettare il servizio Http
GET, POST, PUT, DELETE, gestione degli
HEADER
Gestire le chiamate HTTP](https://image.slidesharecdn.com/3-180420103908/85/Servizi-e-Dependency-Injection-in-Angular-32-320.jpg)
![HTTP
HttpModule
import {Http, HTTP_PROVIDERS} from '@angular/http';
import 'rxjs/add/operator/map'
@Component({
selector: 'http-app',
viewProviders: [HTTP_PROVIDERS],
templateUrl: 'people.html'
})
class PeopleComponent {
constructor(http: Http) {
http.get('people.json')
// Effettua il parsing sul response body e restituisce un oggetto
.map(res => res.json())
// Subscribe all’observable per acquisire l’oggetto restituito dalla
funzione map
.subscribe(people => this.people = people);
}
}
Definire in import di @NgModule dopo
BrowserModule
Importare HttpModule da @angular/http
Iniettare nel costruttore di un componente
o di un altro servizio
Iniettare il servizio Http
GET, POST, PUT, DELETE, gestione degli
HEADER
Gestire le chiamate HTTP](https://image.slidesharecdn.com/3-180420103908/85/Servizi-e-Dependency-Injection-in-Angular-34-320.jpg)
![HTTP
HttpClientModule dalla versione 4.3 in poi
@NgModule({
declarations: [
AppComponent,
LinkListComponent,
LinkItemComponent,
MomentPipe
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [ApiService, LoggerService],
bootstrap: [AppComponent]
})
Importare HttpClientModule da
@angular/common/http
Iniettare nel costruttore di un componente
o di un altro servizio
Iniettare il servizio HttpClient
GET, POST, PUT, DELETE, gestione degli
HEADER
Gestire le chiamate HTTP](https://image.slidesharecdn.com/3-180420103908/85/Servizi-e-Dependency-Injection-in-Angular-35-320.jpg)
Servizi e Dependency Injection in Angular
- 1. Servizi Service e Dependency Injection ApuliaSoft apuliasoft.com
- 2. Agenda Servizi Cosa sono e perché 01 Dependency Injection Concetti chiave e implementazione in Angular 02 HTTP Gestione chiamate HTTP 03
- 3. Servizi
- 4. Big Picture L’idea alla base Components TemplateDirectives Services Injector Event binding Property binding
- 5. Servizi Classe ben definite e con uno scopo specifico Logica di business 01 Riuso all’interno dell’applicazione DRY 02 Facile da testare Unit Test 03
- 6. Servizi Genera il file nome-del-servizio.service.ts ng generate service nome-del-servizio import { Injectable } from '@angular/core'; @Injectable() export class LoggerService { constructor() { } }
- 7. Servizi Genera il file nome-del-servizio.service.ts ng generate service nome-del-servizio import { Injectable } from '@angular/core'; @Injectable() export class LoggerService { constructor() { } } Metadati per Dependency Injection @Injectable()
- 9. Challenge VS Code • Fare il checkout dal tag services-start • Creare un nuovo servizio con nome Api utilizzando Angular CLI. Il servizio dovrà implementare le chiamate alle API per otterene i dati e effettuare l’upvote. • Importare il database nel servizio • Definire il metodo pubblico getLinks(page: number) nel servizio creato. Dovrà restituire i Link dal database • Rimuovere DATABASE da link-list.component.ts, istanziare il servizio e utilizzare il metodo getLinks • Definire il metodo pubblico upvote(id: number) nel servizio. Dovrà implementare la logica di upvoted, definita in link-list.component.ts • Istanziare il servizio e utilizzare il metodo upvote, ridefinendo l'implementazione di upvote in link-item.component.ts. Eliminare la proprietà upvoted di tipo EventEmitter in questo componente Adesso tocca a voi
- 11. Dependency Injection “dependency injection is a technique whereby one object (or static method) supplies the dependencies of another object.” Definizione
- 12. Dependency Injection “dependency injection is a technique whereby one object (or static method) supplies the dependencies of another object.” “A dependency is an object that can be used (a service). An injection is the passing of a dependency to a dependent object (a client) that would use it. The service is made part of the client's state. Passing the service to the client, rather than allowing a client to build or find the service, is the fundamental requirement of the pattern” Wikipedia Definizione
- 13. Dependency Injection • Design pattern (a.k.a. DI) • Disaccoppiamento tra gli oggetti • Interface • Implementazione Inversion of Control (IoC) • Tre tipologie di Injector • Setter • Interface • Constructor • Built-in in Angular Concetti chiave
- 14. Perché DI?
- 15. Dependency Injection Perché DI? export class Car { engine: Engine; steering: SteeringWheel; constructor() { this.engine = new Engine(); this.steering = new SteeringWheel(); } powerOn() { this.engine.powerOn(); } }
- 16. Dependency Injection Perché DI? Classe difficile da testare Test export class Car { engine: Engine; steering: SteeringWheel; constructor() { this.engine = new Engine(); this.steering = new SteeringWheel(); } powerOn() { this.engine.powerOn(); } }
- 17. Dependency Injection Perché DI? Classe difficile da testare Test Non aperta al cambiamento Fragile export class Car { engine: Engine; steering: SteeringWheel; constructor() { this.engine = new Engine(); this.steering = new SteeringWheel(); } powerOn() { this.engine.powerOn(); } }
- 18. Dependency Injection Perché DI? Classe difficile da testare Test Non aperta al cambiamento Fragile export class Car { engine: Engine; steering: SteeringWheel; constructor() { this.engine = new Engine(); this.steering = new SteeringWheel(); } powerOn() { this.engine.powerOn(); } } Legata alla implementazione della dipendenza Non flessibile
- 19. Dependency Injection Perché DI? Passo le dipendenze al costruttore Dipendenze nel costruttore Semplifico il test, mockando le dipendenze Test export class Car { constructor( public engine: Engine, public steering: SteeringWheel ) {} powerOn() { this.engine.powerOn(); } } Utilizzo di interface al posto di classe concrete Estendibile
- 20. Dependency Injection Perché DI? Passo le dipendenze al costruttore Dipendenze nel costruttore Semplifico il test, mockando le dipendenze Test export class Car { constructor( public engine: Engine, public steering: SteeringWheel ) {} powerOn() { this.engine.powerOn(); } } let car = new Car(new Engine(), new SteeringWheel()) ; Utilizzo di interface al posto di classe concrete Estendibile
- 21. Dependency Injection Perché DI? Espone metodi per creare gli oggetti necessari Factory Pattern export class CarFactory { createCar() { return new Car( this.createEngine(), this.createSteeringWheel() ); } createEngine() { return new Engine(); } createSteeringWheel() { return new SteeringWheel(); } }
- 22. Dependency Injection Perché DI? Espone metodi per creare gli oggetti necessari Factory Pattern La classe factory può crescere con lo sviluppo del progetto Code smell export class CarFactory { createCar() { return new Car( this.createEngine(), this.createSteeringWheel() ); } createEngine() { return new Engine(); } createSteeringWheel() { return new SteeringWheel(); } } let car = new CarFactory().createCar();
- 23. Dependency Injection Perché DI? Espone metodi per creare gli oggetti necessari Factory Pattern La classe factory può crescere con lo sviluppo del progetto Code smell let car = container.get(Car); Chiedo al container una istanza di Car DI
- 24. DI in Angular
- 25. Dependency Injection DI in Angular import { Injectable } from '@angular/core'; @Injectable() export class LoggerService { constructor() { } log(msg: any) { console.log(msg); } error(msg: any) { console.error(msg); } warn(msg: any) { console.warn(msg); } } Utilizzando Angular CLI Creare un Service
- 26. Dependency Injection DI in Angular Utilizzando Angular CLI Creare un Service Definire un provider per l’injector Registrare un Service … providers: [LoggerService] …
- 27. Dependency Injection DI in Angular Utilizzando Angular CLI Creare un Service Definire un provider per l’injector Registrare un Service … constructor(private logger: LoggerService) { } … Definire il paramentro tipo richiesto nel costruttore della classe dipendente Ingettare il Service
- 28. Dependency Injection DI in Angular • Registrare un Service Provider • @Component • @ngModule • Dependency Injection Gerarchica • Tree-model • Child Injector • Injector bubbling • Singleton nello scope • Testabilità • @Injectable()
- 29. Challenge Utilizziamo la Dependency Injection
- 30. Challenge VS Code • Aggiungere il provider per ApiService in app.module.ts • Iniettare il servizio ApiService nel costruttore dei componenti che lo utilizzano. Rimuovere l'istanziazione di ApiService, sostituendola con il servizio iniettato • Creare un nuovo servizio con nome Logger utilizzando Angular CLI • Implementare in LoggerService la proprietà privata counter • Implementare in LoggerService le seguenti funzioni. Ogni funzione deve incrementare la proprietà counter, stampare il valore di counter e del messaggio • log(e) • warn(e) • error(e) • Definire il provider di LoggerService nel decoratore @NgModule • Iniettare il servizio LoggerService nel costruttore dei componenti • Utilizzare la funzione log di LoggerService nei metodi changePage e upvote definiti nei component • Sperimenta! Definire il provider di LoggerService nel decoratore @Component in uno due componenti. Cosa accade? Adesso tocca a voi
- 31. HTTP
- 32. HTTP HttpModule @NgModule({ declarations: [ AppComponent, LinkListComponent, LinkItemComponent, MomentPipe ], imports: [ BrowserModule, HttpModule ], providers: [ApiService, LoggerService], bootstrap: [AppComponent] }) Definire in import di @NgModule dopo BrowserModule Importare HttpModule da @angular/http Iniettare nel costruttore di un componente o di un altro servizio Iniettare il servizio Http GET, POST, PUT, DELETE, gestione degli HEADER Gestire le chiamate HTTP
- 33. HTTP HttpModule class Http { constructor(_backend: ConnectionBackend, _defaultOptions: RequestOptions) request(url: string|Request, options?: RequestOptionsArgs) : Observable<Response> get(url: string, options?: RequestOptionsArgs) : Observable<Response> post(url: string, body: any, options?: RequestOptionsArgs) : Observable<Response> put(url: string, body: any, options?: RequestOptionsArgs) : Observable<Response> delete(url: string, options?: RequestOptionsArgs) : Observable<Response> patch(url: string, body: any, options?: RequestOptionsArgs) : Observable<Response> head(url: string, options?: RequestOptionsArgs) : Observable<Response> options(url: string, options?: RequestOptionsArgs) : Observable<Response> } Definire in import di @NgModule dopo BrowserModule Importare HttpModule da @angular/http Iniettare nel costruttore di un componente o di un altro servizio Iniettare il servizio Http GET, POST, PUT, DELETE, gestione degli HEADER Gestire le chiamate HTTP
- 34. HTTP HttpModule import {Http, HTTP_PROVIDERS} from '@angular/http'; import 'rxjs/add/operator/map' @Component({ selector: 'http-app', viewProviders: [HTTP_PROVIDERS], templateUrl: 'people.html' }) class PeopleComponent { constructor(http: Http) { http.get('people.json') // Effettua il parsing sul response body e restituisce un oggetto .map(res => res.json()) // Subscribe all’observable per acquisire l’oggetto restituito dalla funzione map .subscribe(people => this.people = people); } } Definire in import di @NgModule dopo BrowserModule Importare HttpModule da @angular/http Iniettare nel costruttore di un componente o di un altro servizio Iniettare il servizio Http GET, POST, PUT, DELETE, gestione degli HEADER Gestire le chiamate HTTP
- 35. HTTP HttpClientModule dalla versione 4.3 in poi @NgModule({ declarations: [ AppComponent, LinkListComponent, LinkItemComponent, MomentPipe ], imports: [ BrowserModule, HttpClientModule ], providers: [ApiService, LoggerService], bootstrap: [AppComponent] }) Importare HttpClientModule da @angular/common/http Iniettare nel costruttore di un componente o di un altro servizio Iniettare il servizio HttpClient GET, POST, PUT, DELETE, gestione degli HEADER Gestire le chiamate HTTP
- 37. Challenge VS Code • Importare il modulo HttpModule da @angular/http e dichiararlo nell'array imports del decoratore @NgModule in app.module.ts • Iniettare il servizio Http, importato da @angular/http, nel costruttore di ApiService • Creare il file constant.ts e esportare una costante, API_URI, il cui valore é https://as-hackernews.herokuapp.com • Modificare il metodo getLinks di ApiService affinché effettui una chiamata GET al server alla URL API_URI/link?q=page e ne gestisca opportunamente il risultato • Modificare il metodo upvote di ApiService affinché salvi l'upvote con una chiamata POST al server alla URL API_URI/link/id/upvote e ne gestisca opportunamente il risultato Adesso tocca a voi
- 38. Grazie per la partecipazione
Editor's Notes
- #34: https://v2.angular.io/docs/ts/latest/api/http/index/Http-class.html