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: Add Post

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Creating a Blogging App Using Angular & MongoDB.
Creating a Blogging App Using Angular & MongoDB: Show Post
Creating a Blogging App Using Angular & MongoDB: Edit Post

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

Nella precedente parte della serie di tutorial per il blog Angular, hai imparato come creare ShowPostComponent per mostrare la lista dei post del blog sulla home page. Hai raccolto i dati che hai inserito nella shell di MongoDB utilizzando l'endpoint REST API creato.

In questo tutorial, creeremo un nuovo componente chiamato AddPostComponent per fornire l'interfaccia utente utile ad aggiungere nuovi post al blog nel database MongoDB.

Iniziamo

Cominciamo clonando il codice sorgente dalla precedente parte della serie di tutorial.

Navigare nella directory del progetto e installare le dipendenze richieste.

Una volta installate le dipendenze richieste, riavviare il client e il server dell'applicazione.

Puntando il browser all'indirizzo http://localhost:4200 dovresti vedere l'applicazione funzionare.

Creazione componente Add Post

Iniziamo creando AddPostComponent. Creare una cartella chiamata add-post all'interno della cartella src/app. All'interno della cartella add-post, creare un file chiamato add-post.component.ts e aggiungere il seguente codice:

Creare un file chiamato add-post.component.html e aggiungere il seguente codice HTML:

Mostrerai il componente add post come una finestra popup.

Ora bisogna aggiungere AddPostComponent a NgModule. Importare AppPostComponent nel file app.module.ts.

Aggiungere il componente in NgModule alla lista di declarations. Ecco come appare:

Per innescare il popup dell'add post, hai già aggiunto l'attributo data-target al pulsante in home.component.html.

Salvare le modifiche e riavviare l'applicazione. Accedere all'applicazione e fare clic sul link Add in home page. Si vedrà AddPostComponent visualizzato come un popup.

Angular Blog Application - Add Post Popup

Implementazione della Funzionalità Add Post

Aggiungere la direttiva ngModel agli elementi input per title e description.

Aggiungere un direttiva click sul pulsante per la chiamata al metodo per salvare il post del blog.

Importare il modello Post da src/app/models/post.model.ts nel file add-post.component.ts.

Definire la variabile post nel file add-post.component.ts.

Definire il metodo addPost nel file add-post.component.ts. Dal metodo addPost, dovrai validare il title e description inseriti e eseguire una chiamata al metodo service per chiamare il REST API. Ecco come appare il metodo:

Andiamo a creare il file service per il componente AddPostComponent. Creare un file chiamato add-post.service.ts e aggiungere il seguente codice:

All'interno di AddPostService, creare un metodo chiamato addPost per effettuare la chiamata al REST API.

Come visto nel codice precedente, hai fatto uso di HttpClient per effettuare la chiamata API e per ottenere l'Observable.

Nel file add-post.component.ts, nel metodo addPost, bisognerà iscriversi al metodo addPost dal file add-post.service.ts.

 Ecco come il file add-post.component.ts appare:

Creazione del REST API per Add Post

Creiamo l'end point REST API per aggiungere il post del blog al database MongoDB. Nel file server/app.js, creare un end point API come mostrato:

Per primo, è necessario connettersi al database MongoDB utilizzando il client Mongoose.

Una volta che la connessione è stata stabilita, bisogna creare un modello oggetto utilizzando lo schema Post definito nel file server/model/post.js.

Come visto nel codice precedente, hai creato l'oggetto Post utilizzando title e description passati dalla richiesta oggetto req.

Chiamare il metodo save nell'oggetto Post per salvare la voce in MongoDB.

Come si vede nel codice precedente, una volta che il metodo callback save viene chiamato senza errori, esso restituirà un messaggio success insieme all'oggetto doc.

Ecco come in definitiva appare l'end point REST API:

Salvare le modifiche e riavviare server Angular e Node. Accedi all'applicazione e prova ad aggiungere un nuovo post nel blog. Una volta che si fa clic sul pulsante Add, controllare la console del browser e si avrà la risposta di successo registrata.

Quando i dettagli del post del blog vengono aggiunti al database correttamente, è necessario chiudere il popup. Per chiudere il popup, c'è un pulsante di chiusura da premere necessariamente a livello codice.

Dovrai utilizzare il decorator @ViewChild per accedere al pulsante di chiusura.

Importare ViewChild e ElementRef in AddPostComponent.

All'interno di AddPostComponent, definire la seguente variabile:

Inizializzare il click closeBtn utilizzando il seguente codice:

Aggiungere il sopra citato codice al callback di successo del metodo addPost. Ecco il metodo addPost da add-post.component.ts.

Salvare le modifiche e riavviare il server client. Accedere all'applicazione e provare ad aggiungere un nuovo post nel blog. Una volta che i dettagli del post blog sono stati salvati con successo, si chiuderà il popup.

Aggiornamento della Lista Blog

Una cosa da notare è che il post del blog appena aggiunto non compare nell'elenco dei post del blog. Quindi è necessario aggiungere un trigger per notificare quando aggiornare ShowPostComponent. Potrai fare uso di un servizio comune per la comunicazione tra i due componenti.

Creare una cartella chiamata service nella cartella src/app. Creare un file chiamato common.service.ts con all'interno il seguente codice:

Come si vede nel codice precedente, è stata dichiarato un Subject chiamato postAdded_Observable per tenere traccia dell'aggiunta di nuovi post del blog nel database. Ogni volta che un nuovo post viene aggiunto al database, chiameremo il metodo notifyPostAddition, che notificherà gli iscritti sull'aggiornamento.

Importare CommonService in app.module.ts e includerlo nell'elenco dei provider NgModule. Ecco come appare:

Importare CommonService nel file show-post.component.ts e inizializzarlo nel metodo del costructor.

All'interno del metodo ngOnInit, sottoscrivere la variabile postAdded_Observable e caricare il metodo getAllPost. Ecco come appare il metodo ngOnInit:

Importare CommonService nel file add-post.component.ts e chiamare il metodo notifyPostAddition dopo che il post è stato aggiunto nel blog. Ecco come appare il metodo addPost dal AddPostComponent:

Salvare le modifiche e riavviare il server client. Accedere all'applicazione e aggiungere un nuovo post nel blog. Una volta aggiunto, l'elenco di post nel blog viene aggiornato con il nuovo post.

Concludendo

In questo tutorial, è stato creato AddPostComponent per aggiungere i dettagli del post del blog nel database MongoDB. È stato creato il REST API per il salvataggio di un post del blog nel database MongoDB utilizzando il client Mongoose.

Nella parte successiva della serie, verranno implementate le funzionalità per modificare e aggiornare i dettagli dei post del blog.

Il codice sorgente di questo tutorial è disponibile su GitHub.

Come è stata la vostra esperienza finora? Fateci conoscere i vostri preziosi suggerimenti nei commenti qui sotto.

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.