Share
Angular 2 è un framework potente e completo che puoi utilizzare per creare le migliori app web. In mente con TypeScript, Angular 2 sfrutta le caratteristiche del linguaggio futuristico come decoratori e interfacce, che rendono la codifica più veloce e semplice.
In questo video del mio corso, Modern Web Apps With Angular 2, ti mostrerò come utilizzare Angular 2 per creare un servizio che interagirà con il server. Nota che in questo video, stiamo costruendo sul codice di prima nel corso, e puoi trovare il codice sorgente completo per il corso su GitHub.
Nel corso finora, abbiamo creato un'applicazione per la gestione dei progetti. In questo momento, i progetti che stiamo visualizzando all'utente sono semplicemente codificati direttamente nel nostro componente di progetto. Tuttavia, questa non è una soluzione a lungo termine. Vogliamo avere un modo per ottenere una lista di progetti dal nostro server. Quindi in questo video, creeremo un servizio di progetto.
In Angular, un servizio è fondamentalmente un insieme di funzionalità che vogliamo essere disponibili a più componenti. È solo un modo semplice per concludere alcune funzionalità. Quindi all'interno della nostra directory app, creiamo un servizio di progetti. E chiameremo questo projects.service.ts.
Ora ovviamente un servizio non è un componente, quindi non è necessario importare il decoratore di componenti. Ma c'è un altro decoratore di cui abbiamo bisogno, e cioè iniettabili. Quindi importiamo iniettabili a partire dal angolare / core. Ora come ho detto, iniettabili è un decoratore e non ha alcuna proprietà. Quindi chiameremo iniettabili, e quindi esportare la nostra classe. Chiameremo la classe ProjectsService.
iniettabili rende questa classe qualcosa che Angular può usare come iniezione di dipendenza. Come vedremo un po 'più tardi, usiamo l'iniezione di dipendenza per ottenere un'istanza di questo servizio di progetto all'interno di un componente che utilizza il servizio del progetto. Una coda Angolare utilizza l'iniezione delle dipendenze in questo modo in modo che possa facilmente iniettare servizi di simulazione e cose del genere se si desidera testare i componenti.
Andiamo avanti e aggiungiamo alcuni metodi al nostro ProjectsService Qui. Prima di tutto avremo bisogno del Http modulo che ha Angular. Questo ci permetterà di effettuare richieste direttamente al server. Quindi importiamo Http, e importeremo anche la classe di risposta di cui avremo bisogno per un controllo di tipo. Ed entrambi provengono da @ Angolare / http.
Ora, dovremmo anche importare il Http modulo nel nostro file dei moduli dell'app. Quindi, andiamo avanti e fallo prima che dimentichiamo. Nei nostri moduli nativi nella parte superiore, importerò il HttpModule, e poi giù nelle nostre importazioni, includiamo il HttpModule.
Ora che l'abbiamo importato in entrambi i posti necessari, possiamo usare l'iniezione di dipendenza per iniettarla Http classe nel nostro ProjectsService. Quindi invece di fare qualcosa del genere nuovo Http () qui, quello che faremo è creare una funzione di costruzione. E questo costruttore avrà una proprietà di tipo Http.
Angular vedrà questo parametro quando sta creando il nostro ProjectsService istanza, e corrisponderà a questo Http classe al HttpModule che abbiamo importato nel nostro modulo app, e inietterà una sua istanza nel costruttore.
Ora potremmo scrivere this.http = http;per assegnare questo parametro a una proprietà della nostra classe. Ma TypeScript ha effettivamente una sintassi di scelta rapida per questo, quindi possiamo semplicemente applicare la parola chiave privato direttamente all'interno del costruttore e TypeScript lo renderà automaticamente una proprietà di classe. E ora dall'interno degli altri metodi della classe, possiamo usare this.http.
Quindi creiamo una funzione chiamata getProjects (). Questo sarà il metodo che chiameremo per ottenere il nostro elenco di progetti.
Ora con le funzioni in TypeScript, possiamo ancora usare il : Genere sintassi per specificare il tipo del valore di ritorno della funzione. E per getProjects () stiamo andando a restituire un Osservabile che avvolge Progetto.
Quindi, prima di parlare di cosa sia, importiamo queste due classi. Quindi ho intenzione di importare Osservabile a partire dal rxjs, e importiamo anche il nostro Progetto modello.
Quindi cos'è un osservabile? Sfortunatamente non c'è modo di darti un'introduzione completa agli osservabili qui, ma Angular 2 dipende un po 'da osservabili, e cercherò di renderli il più semplici possibile mentre passiamo attraverso questo.
Fondamentalmente, un osservabile è un wrapper simile a una promessa o un array. Entrambe le promesse, gli array e gli osservabili hanno altri elementi all'interno di essi. Nel caso di un array, abbiamo più elementi. Nel caso di una promessa, abbiamo fondamentalmente un valore singolo che otterremo in futuro.
Con osservabili, potrebbe essere un valore o potrebbero essere molti valori. Una definizione che a volte viene utilizzata è una matrice asincrona. Fondamentalmente, un osservabile è un flusso di dati che potremmo ottenere di più in qualsiasi momento. E penso che vedremo nel corso di alcune lezioni qui come possiamo usare le osservabili per rendere un po 'più facile ottenere e impostare alcuni dei nostri dati. Per ora, se non hai mai visto degli osservabili, puoi semplicemente considerarli come un tipo di promessa.
Quindi, cosa torneremo da questa funzione? Bene, possiamo fare this.http.get (), quindi prendiamo / API / progetti che restituirà la nostra lista di progetti. E poi quello che possiamo fare è mappare la risposta a una funzione che stiamo per scrivere chiamata this.extractData.
Puoi pensare al carta geografica() funzione qui come il poi() metodo su una promessa. Funziona proprio come su un array dove carta geografica() eseguirà alcune operazioni su ciascuno dei valori all'interno di quell'array e quindi restituirà un nuovo array con quei nuovi valori.
Quindi in poche parole, carta geografica() ti permette di eseguire qualche tipo di azione sui valori all'interno di un contenitore. E la stessa cosa è vera con il poi() metodo in una promessa. Puoi chiamare poi() su una promessa di chiamare qualche funzione sul valore all'interno di una promessa. E poi ciò restituisce una nuova promessa con qualunque nuovo valore tu abbia creato ...
È la stessa cosa con carta geografica() Qui. Chiameremo extractData () sulla risposta che è all'interno di questo osservabile, e ciò che ritorneremo da questo è un osservabile che avvolge un progetto.
Quindi creiamo un extractData () funzione, e questo richiederà una libreria HTTP angolare Risposta classe.
Quindi torneremo res.json (), e questo convertirà la risposta HTTP nel vero corpo JSON. Ora il valore da extractData () sarà restituito all'interno del nostro getProjects () chiama, e Angular vedrà che questo corrisponde al nostro tipo di ritorno qui perché sarà una serie osservabile di progetti.
Ora che abbiamo questo getProjects () funzione, passiamo al componente dei nostri progetti e importatelo. Prima di tutto, importiamo il ProjectsService.
Ora perché vogliamo iniettare a ProjectsService istanza in questo componente, dobbiamo dire ad Angular che dovrebbe fornire un'istanza per questo componente. Quindi aggiungiamo un fornitori proprietà al nostro decoratore di componenti, e diremo che ne avrà bisogno ProjectsService all'interno di questo componente. Quindi aggiungiamo un costruttore e possiamo usare dependency injection nello stesso modo in cui lo abbiamo fatto nel nostro servizio.
Creeremo un parametro chiamato servizio, e questo sarà a ProjectsService oggetto, e così Angular saprà iniettare uno dei nostri ProjectsService istanze in questa classe. Daremo questo parametro a privato parola chiave qui in modo che lo imposti immediatamente come una proprietà.
Con questo, possiamo andare avanti e usarlo dentro ngOnInit. Quindi qui possiamo chiamare this.service.getProjects ()-ricorda che questo restituisce un osservabile e il metodo che vogliamo chiamare qui sottoscrivi().
Puoi pensare al sottoscrivi() metodo come se stessimo chiamando poi() su una promessa che è stata restituita, o se pensi a questo come una matrice, sottoscrivi() è come il per ciascuno() metodo su un array. È un po 'come carta geografica() in quanto riceve ciò che è all'interno dell'array, o in questo caso l'osservabile.
però, per ciascuno() non restituisce un nuovo array, e sottoscrivi() non restituisce un nuovo osservabile. Quindi è un po 'come la fine della linea. Così sottoscrivi() sta per ottenere la lista dei nostri progetti come parametro, e possiamo solo dire this.projects, che si riferisce alla nostra gamma di progetti, sarà uguale progetti. In questo modo possiamo scartare il suo valore dall'osservabile e il valore sarà ora disponibile all'interno della classe.
E se torniamo al browser per vedere la nostra lista di progetti, vedremo i tre progetti che inserisco nel server.
Nel corso completo, Modern Web Apps With Angular 2, ti mostrerò come codificare un'app web completa con Angular 2, utilizzando le funzionalità e i modelli architettonici più attuali.
Puoi seguire insieme a me e creare un'app di gestione di progetti completa, con accesso utente, convalida e chat in tempo reale. Riceverai lezioni sul linguaggio dei modelli Angular 2, strutturando la tua app, il routing, la convalida dei moduli, i servizi, le osservabili e altro ancora.
Se non hai mai utilizzato Angular 2, impara tutto ciò che devi sapere nel nostro corso Inizia con Angular 2. Se vuoi migliorare la tua esperienza su Angular 2, perché non provarlo:
Accentsconagua