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: Mostrare i 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: Home
Creating a Blogging App Using Angular & MongoDB: Add Post

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

Nell'ultima parte della serie di tutorial, hai visto come scrivere un endpoint REST API per il riconoscimento dell'user. Hai usato Mongoose per interagire con MongoDB da Node. Dopo la validazione avvenuta con successo, hai visto come utilizzare il Router di Angular per navigare in HomeComponent.

In questa parte della serie di tutorial, creerai un componente per elencare i dettagli dei post del blog sulla home page.

Iniziamo

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

Navigare all'interno della directory del progetto e installare le dipendenze richieste.

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

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

Angular Blogging App

Creazione del componente Show Post

Una volta che l'utente è entrato nell'applicazione, mostrerai  HomeComponent. HomeComponent agisce come un componente contenitivo per tutti i componenti mostrati al suo interno. Potrai visualizzare l'elenco dei post del blog aggiunti dall'utente in HomeComponent.

Per mostrare i post del blog, creare un nuovo componente chiamato ShowPostComponent. Creare una cartella chiamata show-post all'interno della cartella src/app. All'interno della cartella show-post, creare un file chiamato show-post.component.html e aggiungere il seguente codice HTML:

Creare un file chiamato show-post.component.ts che conterrà la classe ShowPostComponent. Ecco come appare:

Importare ShowPostComponent nel file app.module.ts.

Aggiungere ShowPostComponent in NgModule nel file app.module.ts.

Modificare il file home.component.html per includere il selettore ShowPostComponent.

Ecco come il file modificato home.component.html appare:

Salvare le modifiche e aggiornare il client dell'applicazione. Visualizzando l'applicazione, si potrà vedere la lista dei post del blog.

Angular Blog App - Show Post Component

Creazione del Service del Componente Show Post

I dati visualizzati nel servizio ShowPostComponent consentono di visualizzare i dati hard-coded. È necessario un servizio per interrogare il database MongoDB per avere l'elenco dei post del blog. Creiamo un servizio per il ShowPostComponent.

Creare un file chiamato show-post.service.ts in src/app/show-post e aggiungere il seguente codice:

All'interno di ShowPostService, creare un metodo chiamato getAllPost, che eseguirà la chiamata REST API per avere la lista dei post del blog. Ecco come appare:

Ecco come il file show-post.service.ts appare:

Andiamo avanti, avrai bisogno di scrivere il REST API per interrogare la collection di MongoDB per avere la lista dei post del blog.

Dalla parte del server, iniziare creando il modello per il post. All'interno della cartella models, creare un file chiamato post.js. Richiedere il modulo Mongoose, creare uno schema per il post del blog e esportarlo. Ecco come /server/models/post.js appare:

Esportare il file post.js appena definito in app.js.

Creare un endpoint  API /api/post/getAllPost per recuperare la lista di post del blog. Usare il client mongoose per la connessione al database MongoDB.

Una volta stabilita la connessione, è possibile utilizzare il modello Post per trovare l'elenco dei post del blog.

Il callback .find restituisce l'elenco dei documenti.

I documenti restituiti saranno in ordine crescente, quindi aggiungere una condizione per ordinare i post del blog in ordine decrescente.

Una volta recuperato l'elenco dei documenti interrogati dal database, è possibile restituire i dati con status. Ecco come l'API REST appare:

Effettuare la chiamata API

Nel file show-post.component.ts, definire una lista array per mantenere i risultati della chiamata API.

Importare ShowPostService in ShowPostComponent.

Aggiungere ShowPostService come un provider per ShowPostComponent.

Definire un metodo chiamato getAllPost per fare una chiamata al metodo service. Ecco come appare:

Come visto nel codice precedente, i dati risultanti vengono impostati per la variabile posts.

Effettuare una chiamata al metodo precedentemente definito dal metodo ngOnInit, così che i dettagli dei post del blog vengano recuperati, non appena il componente viene inizializzato.

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

Rappresentazione dei Post del Blog

La collezione di MongoDB potrebbe non avere voci da interrogare. Quindi, aggiungere qualche voce in MongoDB tramite la shell mongo.

Entrare nella shell di MongoDB digitando il seguente comando:

Una volta entrati nella shell mongo, controllare il database disponibile nel database MongoDB.

Selezionare il database blogDb dalle voci elencate.

Creare una collezione chiamata post.

Inserire un paio di voci nella collezione post.

Ora colleghiamo la variabile posts in ShowPostComponent nel codice HTML.

Potrai fare uso della direttiva ngFor per scorrere tra la variabile posts e visualizzare i post del blog. Modificare il file post.component.html come illustrato:

Salvare le modifiche e riavviare il client e il server REST API. Accedendo all'applicazione avrete i record inseriti in MongoDB visualizzati sulla home page.

Angular Blog App - Dynamic Blog Post Listing

Concludendo

In questo tutorial, hai creato il componente ShowPostComponent per visualizzare i dettagli dei post del blog dal database MongoDB. Hai creato il REST API per interrogare il database MongoDB utilizzando il client Mongoose dal server Node.

Nella prossima parte della serie di tutorial, imparerai come creare il componente AddPostComponent per aggiungere nuovi post dall'interfaccia utente dell'applicazione.

Il codice sorgente di questo tutorial è disponibile su GitHub.

Come è stata la tua esperienza finora? Fammi conoscere i tuoi 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.