Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular 2+
Code

Come realizzare un Service in Angular 2

by
Difficulty:IntermediateLength:MediumLanguages:

Italian (Italiano) translation by Francesco Turlon (you can also view the original English article)

Angular 2 è un framework potente e completo di funzionalità che potete usare per sviluppare le migliori applicazioni web. Sviluppato avendo in mente TypeScript, Angular 2 sfrutta funzionalità di linguaggio futuristico come decoratori e interfacce, che rendono la programmazione più rapida e facile.

In questo video dal corso Modern Web Apps With Angular 2, vi mostreremo come usare Angular 2 per sviluppare un service che interagirà con il server. Notate che in questo video utilizzeremo codice sviluppato precedentemente nel corso che potrete trovare interamente su GitHub.

Come sviluppare un Service Angular 2

Come creare un Service Project

Finora nel corso abbiamo sviluppato un'applicazione per il project management. Ora, i progetti che mostreremo all'utente sono scritti nel nostro componente dei progetti. Comunque non si tratta di una soluzione a lungo termine. Vogliamo un modo per richiamare una lista di progetti dal nostro server. Così in questo video, creeremo un service project.

In Angular, un service è semplicemente qualsiasi set di funzionalità che vogliamo rendere disponibili a componenti multipli. È solo un modo semplice per accomunare alcune funzionalità. Così dentro la directory della nostra applicazione, creiamo un service projects. Lo chiameremo projects.service.ts.

Naturalmente un service non è un componente, così non c'è bisogno di importare il componente decoratore. C'è un altro decoratore di cui abbiamo bisogno, ed è Injectable. Importiamo quindi Injectable da angular/core. A questo punto come dicevamo, Injectable è un decoratore, e non vuole proprietà. Così chiameremo Injectable ed esporteremo la nostra classe. Chiameremo la classe ProjectsService.

Code to export our class ProjectsService

Injectable rende questa classe qualcosa che Angular può usare come dependency injection. Come vedremo più avanti, useremo la dependency injection per ottenere un'istanza di questo service project all'interno di un componente che usa il service di project. Una coda Angular sfrutta la dependency injection in questo modo così da ottenere facilmente un'injection di services fittizie o analoghi, qualora si desiderasse testare i componenti.

Aggiungere Metodi al Service

Procediamo oltre e aggiungiamo alcuni metodi al nostro ProjectsService. Prima di tutto abbiamo bisogno del modulo Http di Angular. Questo ci permetterà di fare richieste dirette al server. Importiamo quindi Http, e anche la classe di risposta di cui avremo bisogno per alcuni controlli. Entrambi provengono da @angular/http.

Ora, dovremmo anche importare il modulo Http nel file dei moduli della nostra applicazione. Così, andiamo avanti e facciamolo prima di dimenticarcene. In alto nei nostri moduli nativi, importeremo HttpModule, mentre in basso nelle nostre importazioni, includeremo HttpModule.

import the Http module

Ora che abbiamo importato il modulo in entrambi gli spazi necessari, possiamo usare la dependency injection per fare l'injection della classe Http nel nostro ProjectsService. Così invece di scrivere qualcosa come new Http(), quello che faremo sarà creare una funzione constructor. Questo constructor riceverà una proprietà di tipo Http.

inject the Http class into our ProjectsService

Angular vedrà questo parametro al momento della creazione della nostra istanza ProjectsService, metterà in relazione questa classe HttpHttpModule che abbiamo importato nel modulo della nostra applicazione, e ne farà un'injection dell'istanza nel costruttore.

Ora, potremmo scrivere this.http = http; per assegnare questo parametro a una proprietà della nostra classe. TypeScript fornisce attualmente delle scorciatoie sintattiche adatte a questo scopo, così possiamo applicare direttamente la keyword private dentro il constructor, e TypeScript la renderà automaticamente una proprietà di classe. A questo punto dall'interno degli altri metodi della classe, possiamo usare this.http.

Creiamo quindi una funzione chiamata getProjects(). Questo sarà il metodo che chiameremo per avere la nostra lista di progetti.

Ora con le funzioni in TypeScript possiamo ancora usare la sintassi :Type per specificare il tipo di valore restituito dalla funzione. E per getProjects() abbiamo intenzione di restituire un Observable che contenga Project.

Così prima di trattare cosa sia un observable, importiamo le due classi. Importiamo Observable da rxjs, e importiamo anche il nostro modello Project.

Code to import Observable

Lavorare con gli Observables

Cos'è un observable? Sfortunatamente non c'è modo per fornirvi un'introduzione completa agli observables in questa sede, ma Angular 2 dipende abbastanza dagli observables, quindi cercheremo di farlo e di rendere la spiegazione il più semplice possibile.

Fondamentalmente, un observable è un involucro simile a una promise o un array. Promises, arrays e observables hanno altri elementi al loro interno. Nel caso di un array, abbiamo molteplici elementi. Nel caso di una promise, abbiamo in pratica dei valori singoli che otterremo in qualche momento nel futuro.

Con gli observables, potrebbe essere un valore o potrebbero essere molteplici. A volte viene utilizzata la definizione di array asincrono. Fondamentalmente, un observable è un flusso di dati che possiamo ottenere più volte in qualsiasi momento. Vedrete nel corso di alcune lezioni come possiamo utilizzare facilmente gli observables per il getting e il setting di alcuni dati. Per ora, se non avete visto observables in passato, potete pensarli come una sorta di promise.

Quindi che risultato otterremo da questa funzione? Bene, possiamo scrivere this.http.get(), così da ottenere /api/projects con il nostro elenco di progetti. Possiamo poi mappare la risposta ad una funzione che abbiamo intenzione di scrivere denominata this.extractData.

map the response to thisextractData

Potete pensare alla funzione map() come al metodo then() in una promise. Funziona proprio come in un array dove map() eseguirà alcune operazioni su ognuno degli elementi all'interno di quell'array e restituirà un nuovo array con i nuovi valori. 

Così fondamentalmente map() vi permetterà di eseguire alcune azioni sui valori all'interno di un container. E la stessa cosa è vera con il metodo then() in una promise. Potete chiamare then() su una promise per richiamare qualche funzione sul valore dentro una promise. E poi questa restituisce una nuova promise con qualsivoglia nuovo valore abbiate creato..

È la stessa cosa con map(). Chiameremo extractData() alla risposta che è all'interno di questo observable, e quello che ci verrà restituito sarà un observable che contiene un progetto.

Creiamo quindi una funzione extractData(), che prenderà una classe Response dalla libreria HTTP di Angular.

Restituiremo res.json() che convertirà la risposta HTTP in linguaggio JSON. Ora il valore da extractData() sarà restituito dentro la nostra chiamata a getProjects(), e Angular vedrà che questo combacia con il tipo atteso perché sarà un array observable di progetti.

Code to convert the Http response that returns to the actual JSON body

Importare la Funzione nel Componente Projects

Ora che abbiamo questa funzione getProjects(), ritorniamo al nostro componente progetti e importiamola. Prima di tutto, importiamo ProjectsService.

Dal momento che vogliamo effettuare l'injection di un'istanza ProjectsService nel nostro componente, dobbiamo comunicare ad Angular che dovrebbe fornire un'istanza per questo componente. Aggiungiamo quindi una proprietà providers al nostro componente decoratore, e gli comunicheremo che avrà bisogno di ProjectsService all'interno del componente. Aggiungiamo quindi un costruttore, e possiamo usare la dependency injection nello stesso modo in cui l'abbiamo utilizzata nel nostro service. 

Creeremo un parametro chiamato service, che sarà un oggetto ProjectsService, e così Angular saprà di dover fare l'injection di una delle istanze di ProjectsService all'interno di questa classe. Daremo a questo parametro la keyword private in modo che venga impostato immediatamente come proprietà.

Sistemato questo, possiamo procedere oltre e usare il parametro dentro ngOnInit. All'interno di questo possiamo chiamare this.service.getProjects() — ricordate che restituirà un observable — e il metodo che vogliamo chiamare qui, subscribe()

Potete pensare al metodo subscribe() come se stessimo chiamando then() in una promise che è stata restituita, oppure, se pensate in termini di array, subscribe() è come il metodo forEach() in un array. È come map() che riceve ciò che è all'interno dell'array, o in questo caso un observable.

Comunque, forEach() non restituisce un nuovo array, e subscribe() non restituisce un nuovo observable. È come la fine della riga. Quindi subscribe() prenderà l'elenco dei nostri progetti come proprio parametro, e possiamo semplicemente scrivere che this.projects, che fa riferimento al nostro array di progetti, sarà uguale a projects. In questo modo siamo in grado di prelevare il valore dall'observable e questo sarà disponibile dall'interno della classe.

Summary of final code additions

Se torniamo al browser per vedere il nostro elenco di progetti, vedremo i tre progetti che abbiamo caricato sul server.

Front end view of three projects displayed in browser

Guarda l'intero corso

Nel corso intero, Modern Web Apps With Angular 2, vi mostreremo come programmare un'app completa con Angular 2, usando le più attuali funzionalità e patterns architettonici.

Potete proseguire e sviluppare un'applicazione di project management completa di funzionalità, con registrazione e validazione utenti e chat in real-time. Otterrete lezioni sul linguaggio di template di Angular 2, sulla struttura della vostra applicazione, il routing, la validazione dei form, services, observables e molto altro.

Se non avete mai usato Angular 2, imparerete tutto ciò di cui avrete bisogno nel nostro corso Get Started With Angular 2. Se volete approfondire la conoscenza di Angular 2 perché non consultate:

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.