Création d'une application de blogging à l'aide de Angular & MongoDB Afficher le message

Dans la dernière partie de la série de didacticiels, vous avez vu comment écrire le point de terminaison de l'API REST pour la connexion de l'utilisateur. Vous avez utilisé Mongoose pour interagir avec MongoDB à partir de Node. Après validation réussie, vous avez vu comment utiliser Angular Routeur pour naviguer vers le AccueilComposant.

Dans cette partie de la série de didacticiels, vous allez créer un composant pour répertorier les détails de publication de blog sur la page d'accueil..

Commencer

Commençons par cloner le code source de la dernière partie de la série de tutoriels..

clone git https://github.com/royagasthyan/AngularBlogApp-Home AngularBlogApp-Post

Accédez au répertoire du projet et installez les dépendances requises.

cd AngularBlogApp-Post / client npm installer cd AngularBlogApp-Post / serveur npm installer

Une fois les dépendances installées, redémarrez l'application cliente et serveur..

cd AngularBlogApp-Post / client npm démarrer cd AngularBlogApp-Post / noeud de serveur app.js

Pointez votre navigateur sur http: // localhost: 4200 et vous devriez avoir l'application en cours d'exécution.

Création du composant Afficher les publications

Une fois que l'utilisateur est connecté à l'application, vous affichez le AccueilComposant. AccueilComposant agit comme un composant wrapper pour tous les composants affichés à l'intérieur de celui-ci. Vous allez afficher la liste des articles de blog ajoutés par l'utilisateur dans le menu AccueilComposant.

Pour afficher les articles du blog, créons un nouveau composant appelé ShowPostComponent. Créez un dossier appelé show-post à l'intérieur de src / app dossier. À l'intérieur de show-post dossier, créer un fichier appelé show-post.component.html et ajoutez le code HTML suivant:

  
 
En-tête d'élément de groupe de liste
 Il ya 3 jours 
 
Donec id elit non porta gravida à eget metus. Les mécènes ont perdu leur risus varius blandit.
 Identifiant de lieu non portuaire.   
 
En-tête d'élément de groupe de liste
 Il ya 3 jours 
 
Donec id elit non porta gravida à eget metus. Les mécènes ont perdu leur risus varius blandit.
 Identifiant de lieu non portuaire.   
 
En-tête d'élément de groupe de liste
 Il ya 3 jours 
 
Donec id elit non porta gravida à eget metus. Les mécènes ont perdu leur risus varius blandit.
 Identifiant de lieu non portuaire.  

Créez un fichier appelé show-post.component.ts qui contiendra le ShowPostComponent classe. Voici à quoi ça ressemble:

importer Component, OnInit à partir de '@ angular / core'; @Component (sélecteur: 'app-show-post', templateUrl: './show-post.component.html') La classe d'exportation ShowPostComponent implémente OnInit constructor ()  ngOnInit ()  

Importer le ShowPostComponent dans le app.module.ts fichier.

importer ShowPostComponent de './show-post/show-post.component';

Ajouter ShowPostComponent dans le NgModule dans le app.module.ts fichier. 

importer BrowserModule de '@ angular / platform-browser'; importer NgModule de '@ angular / core'; importer ROUTING depuis './app.routing'; importer FormsModule à partir de '@ angular / forms'; importer HttpClientModule à partir de '@ angular / common / http'; import RootComponent de './root/root.component'; importer LoginComponent de './login/login.component'; importer HomeComponent de './home/home.component'; importer ShowPostComponent de './show-post/show-post.component'; @NgModule (declarations: [RootComponent, LoginComponent, HomeComponent, ShowPostComponent]], importations: [BrowserModule, ROUTING, FormsModule, HttpClientModule], fournisseurs: [], bootstrap: [RootComponent]) export class AppModule . 

Modifier le home.component.html fichier à inclure ShowPostComponent sélecteur.

Voici comment le modifié home.component.html fichier regarde:

  
App blog angulaire
  
  
 

Enregistrez les modifications ci-dessus et actualisez l'application cliente. En vous connectant à l'application, vous pourrez voir les articles de blog répertoriés.

Création du service de composant Show Post

Les données affichées dans le ShowPostComponent service affiche les données codées en dur. Vous aurez besoin d'un service pour interroger la liste d'articles de blog de la base de données MongoDB. Créons un service pour votre ShowPostComponent.

Créez un fichier appelé show-post.service.ts dans src / app / show-post et ajoutez le code suivant:

import Injectable from '@ angular / core'; importer HttpClient à partir de '@ angular / common / http'; @Injectable () export class ShowPostService constructeur (http privé: HttpClient) 

À l'intérieur de ShowPostService, créer une méthode appelée getAllPost, qui appellera l’API REST pour obtenir la liste des articles de blog. Voici à quoi ça ressemble:

getAllPost () return this.http.post ('/ api / post / getAllPost', )

Voici comment show-post.service.ts fichier regarde:

import Injectable from '@ angular / core'; importer HttpClient à partir de '@ angular / common / http'; import Post from '… /models/post.model'; @Injectable () export class ShowPostService constructeur (http privé: HttpClient)  getAllPost () return this.http.post ('/ api / post / getAllPost', )

Ensuite, vous devez écrire l'API REST pour interroger la collection MongoDB afin d'obtenir la liste des articles de blog..

Côté serveur, commençons par créer le modèle pour la publication. À l'intérieur de des modèles dossier, créer un fichier appelé post.js. Exiger le Mangouste module, créez un schéma pour la publication de blog et exportez-le. Voici comment /server/models/post.js regards:

const mangouste = require ('mangouste'); const Schema = mongoose.Schema; // crée un schéma const postSchema = new Schema (titre: type: chaîne, obligatoire: true, description: type: chaîne, obligatoire: true, collection: 'post'); const Post = mongoose.model ('Post', postSchema); module.exports = Post;

Exporter le défini ci-dessus post.js déposer dans app.js.

const Post = require ('./ model / post');

Créer un point de terminaison API / api / post / getAllPost pour récupérer la liste des articles de blog. Utilisez le mangouste client pour se connecter à la base de données MongoDB.

app.post ('/ api / post / getAllPost', (req, res) => mongoose.connect (url, useMongoClient: true, function (err) if (err) renvoie err; console.log (' connexion établie avec succès '););)

Une fois la connexion établie, vous pouvez utiliser le Poster modèle pour trouver la liste des articles de blog.

Post.find (, [], , (err, doc) => si (err) renvoie err; console.log ('result is', doc);)

le .trouver callback renvoie la liste des documents.

Les documents renvoyés seront dans l'ordre croissant, ajoutez donc une condition pour trier les articles de blog dans l'ordre décroissant..

Post.find (, [], sort: _id: -1, (err, doc) => if (err) renvoie err;)

Une fois que vous avez la liste des documents demandés à partir de la base de données, renvoyez les données avec le statut. Voici à quoi ressemble l'API REST:

app.post ('/ api / post / getAllPost', (req, res) => mongoose.connect (url, useMongoClient: true, function (err) if (err) renvoie err; Post.find ( , [], sort: _id: -1, (err, doc) => if (err) renvoie une erreur; renvoie le statut res.status (200) .json (status: 'success', données: doc)));)

Faire l'appel API

dans le show-post.component.ts file, définir une liste de tableaux pour conserver les résultats de l'appel API.

messages publics: tout [];

Importer le ShowPostService dans le ShowPostComponent.

importer ShowPostService depuis './show-post.service';

Ajouter le ShowPostService en tant que fournisseur de ShowPostComponent.

@Component (sélecteur: 'app-show-post', templateUrl: './show-post.component.html', styleUrls: ['./show-post.component.css'], fournisseurs: [ShowPostService] )

Définir une méthode appelée getAllPost faire un appel à la méthode de service. Voici à quoi ça ressemble:

getAllPost () this.showPostService.getAllPost (). subscribe (result => this.posts = result ['data'];); 

Comme indiqué dans le code ci-dessus, les données de résultat sont définies sur des postes variable.

Appelez la méthode définie ci-dessus à partir du ngOnInit méthode, de sorte que les détails de publication de blog soient récupérés dès que le composant est initialisé.

ngOnInit () this.getAllPost (); 

Voici comment show-post.component.ts fichier regarde:

importer Component, OnInit à partir de '@ angular / core'; importer ShowPostService depuis './show-post.service'; @Component (sélecteur: 'app-show-post', templateUrl: './show-post.component.html', styleUrls: ['./show-post.component.css'], fournisseurs: [ShowPostService] ) la classe d'exportation ShowPostComponent implémente OnInit public posts: any []; constructeur (showPostService privé: ShowPostService)  ngOnInit () this.getAllPost ();  getAllPost () this.showPostService.getAllPost (). subscribe (result => this.posts = result ['data'];);  

Rendre les articles du blog

La collection MongoDB peut ne pas avoir d'entrées à interroger. Ajoutons donc quelques entrées dans MongoDB à partir de la mongo coquille.

Entrez le shell MongoDB en tapant la commande suivante:

mongo

Une fois que vous entrez dans le mongo shell, vérifiez la base de données disponible dans la base de données MongoDB.

montrer des collections;

Sélectionnez le blogDb base de données à partir des entrées énumérées.

utiliser blogDb

Créer une collection nommée poster.

db.createCollection ('post')

Insérer quelques entrées dans le poster collection.

db.post.insert (titre: 'Entrée TutsPlus Python', description: 'Bienvenue sur l'entrée officielle de la session de programmation TutsPlus Python')

Maintenant, lions notre des postes variable dans le ShowPostComponent au code HTML.

Vous allez utiliser le ngFor directive d'itérer sur le des postes variable et afficher les articles du blog. Modifier le show-post.component.html fichier comme indiqué:

  
 
titre de l'article
 Il ya 3 jours 
 
post.description
 Lire la suite…   

Enregistrez les modifications ci-dessus et redémarrez le client et le serveur d'API REST. Connectez-vous à l'application et les enregistrements insérés de MongoDB seront affichés sur la page d'accueil..

Envelopper

Dans ce tutoriel, vous avez créé le ShowPostComponent pour afficher les détails de la publication de blog à partir du MongoDB base de données. Vous avez créé l'API REST pour interroger la base de données MongoDB à l'aide du Mangouste client du serveur de noeud.

Dans la partie suivante de la série de didacticiels, vous apprendrez à créer le AddPostComponent pour ajouter de nouveaux messages à partir de l'interface utilisateur de l'application.

Le code source de ce tutoriel est disponible sur GitHub.

Comment était votre expérience jusqu'à présent? Faites-moi savoir vos suggestions précieuses dans les commentaires ci-dessous.