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

Creare un App per Blogging Utilizzando Angular e MongoDB: Modificare Post

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Creating a Blogging App Using Angular & MongoDB.
Creating a Blogging App Using Angular & MongoDB: Add Post
Creating a Blogging App Using Angular & MongoDB: Delete Post

Italian (Italiano) translation by Stefano Pizzacalla (you can also view the original English article)

Nella precedente parte di questa serie di tutorial hai imparato come creare il componente per aggiungere nuovi post al blog. Hai imparato come creare l'endpoint REST API per aggiungere nuovi post al database MongoDB.

In questa parte della serie di tutorial, imparerai come implementare la funzionalità per modificare un'esistente post del blog.

Iniziamo

Cominciamo clonando il codice sorgente dall'ultima parte di questa serie di tutorial.

Navigare nella directory del progetto e installare le dipendenze richieste.

Una volta che le dipendenze sono state installate, riavviare il client e il server dell'applicazione.

Puntare il browser all'indirizzo http://localhost:4200 e dovresti vedere l'applicazione in esecuzione.

Aggiungere la View Edit Post

In ShowPostComponent, aggiungere due icone per la modifica e la cancellazione dei post del blog. Assicurati di utilizzare Font Awesome per visualizzare le icone di modifica e cancellazione.

Scaricare e includere la cartella font awesome nella cartella assets.

Font Awesome In Assets Folder

Nella pagina src/app/index.html, includere un riferimento allo stile CSS di font awesome.

Ora modificare il file show-post/show-post.component.html per includere l'HTML per le icone di modifica e cancellazione.

Ecco come il file show-post.component.html appare:

Salvare le modifiche e riavviare il client dell'applicazione. Entrando nell'applicazione si dovrebbero vedere le corrispondenti icone di modifica e cancellazione vicino ogni post del blog.

Angular Blog App - Edit And Delete Icon

Inserire i dettagli di modifica in una finestra Popup

Quando l'utente fa clic sull'icona di modifica corrispondente ad un qualsiasi post del blog, è necessario inserire i dettagli del post del blog nella finestra popup di add post per l'aggiornamento.

Aggiungere un metodo click sull'icona di modifica.

All'interno del CommonService, è necessario definire un oggetto osservabile per tenere traccia di quando si fa clic sul pulsante modifica. Definire gli oggetti osservabili come illustrato:

Definire un'altra variabile che tenga traccia della modifica del post.

Quando si fa clic sul pulsante modifica, il post verrà conservato per essere modificato in CommonService e innescherà l'osservabile per la notifica della modifica post. Definire due metodi per impostare la modifica del post e per notificarne la modifica.

All'interno del metodo click, chiamerai il metodo setPostToEdit da CommonService. Ecco come il metodo editPost appare:

Si avrà il dettaglio del post nel service comune quando l'utente fa clic sul pulsante modifica. Per visualizzare il popup di add post per l'aggiornamento, è necessario fare clic sul pulsante add post a livello di codice.

All'interno del file home/home.component.html, aggiungere un identificatore # al pulsante add post.

Importare ViewChild e ElementRef nel file home.component.ts.

Definire una reference al pulsante add all'interno del file home.component.ts.

All'interno del costruttore HomeComponent, sottoscrivere postEdit_Observable da CommonService. Chiamando il callback di sottoscrizione postEdit_Observable, invocare il clic sul pulsante add per visualizzare il popup. Ecco come appare il file home.component.ts:

È necessario iscriversi a postEdit_Observable nel file add-post.component.ts per impostare il post da modificare sulla variabile post. Ecco come appare il metodo ngOnInit in post.component.ts:

Salvare le modifiche e riavviare il server client. Accedere all'applicazione e fare clic sul pulsante modifica su qualsiasi post del blog. Sarai in grado di visualizzare i dettagli del post inseriti nella finestra popup di add post.

Angular Blog App - Update Post

Creazione del REST API per l'aggiornamento Post

All'interno di server/app.js, definire un altro endpoint REST API per aggiornare i dettagli del post in base all'ID. Ecco come appare:

Prima di tutto utilizziamo Mongoose per la connessione al database MongoDB.

Una volta stabilita la connessione, fate uso del metodo update sul modello Post.

Il post verrà aggiornato in base all'ID del post passato. Come si vede nel codice precedente, hai specificato il post _id per l'aggiornamento. Nella seconda opzione, vengono specificati i campi da aggiornare, che sono title e description.

Una volta aggiornati i dettagli, ti verrà restituito lo status insieme con il numero di righe affette dall'aggiornamento. Ecco come appare l'endpoint REST API per l'aggiornamento post:

Effettuare la chiamata REST API per l'aggiornamento

L'ID restituito per ogni post da MondgoDB è _id, così hai bisogno di modificare l'id del nostro modello src/app/models/post.model.ts. Ecco come appare:

Quando si clicca il pulsante add post, il metodo chiamato sarà addPost. All'interno del metodo addPost in add-post.component.ts, dovrai controllare se l'oggetto post ha un _id. Se un _id è presente allora dovrai chiamare il metodo di aggiornamento dal servizio, altrimenti chiamerai il metodo del servizio add post.

Creare un metodo chiamato updatePost all'interno del file add-post.service.ts.

Ecco come il metodo modificato addPost dal file add-post.component.ts appare:

Salvare le modifiche e riavviare il server Node e Angular. Accedere all'applicazione e provare a modificare un post. Ti verrà mostrata una finestra popup per modificare i dettagli facendo clic sul pulsante modifica. Fare clic sul pulsante add e i dettagli saranno aggiornati e visualizzati nell'elenco dei post del blog.

Concludendo

In questo tutorial, hai implementato la funzionalità per aggiornare i dettagli dei post del blog. Hai creato l'endpoint del back-end del REST API per aggiornare i dettagli dei post del blog in base all'ID dei post. Hai fatto uso del client Mongoose per aggiornare i dettagli dei post del blog nel database MongoDB.

Nella prossima parte, implementerai la cancellazione dei post e la funzionalità di log-out.

Come è stata la tua esperienza finora? Facci conoscere i tuoi pensieri, suggerimenti o eventuali correzioni nei commenti qui sotto. 

Il codice sorgente di questo tutorial è disponibile su GitHub.

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.