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

Dans la partie précédente de cette série de didacticiels, vous avez appris à créer le composant d'ajout de publication pour ajouter de nouvelles publications de blog. Vous avez appris à créer le point de terminaison de l'API REST pour ajouter une nouvelle publication à la base de données MongoDB..

Dans cette partie de la série de didacticiels, vous apprendrez à implémenter la fonctionnalité permettant de modifier un article de blog existant à partir de la liste des articles de blog..

Commencer

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

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

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

cd EditPost / client npm installer cd EditPost / serveur npm installer

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

cd EditPost / client npm démarrer cd EditPost / server node app.js

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

Ajout de la vue Modifier une publication

dans le ShowPostComponent, vous ajouterez deux icônes pour éditer et supprimer le post de blog. Vous utiliserez Font Awesome pour afficher les icônes de modification et de suppression..

Téléchargez et incluez le dossier de polices génial dans le les atouts dossier.

dans le src / app / index.html page, inclure une référence à la police génial CSS style.

Maintenant, modifiez le show-post / show-post.component.html fichier pour inclure le code HTML pour les icônes d'édition et de suppression.

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

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

Enregistrez les modifications ci-dessus et redémarrez l'application cliente. Connectez-vous à l'application et vous pourrez afficher les icônes d'édition et de suppression correspondant à chaque article de blog répertorié..

Remplir le détail de la modification dans une fenêtre contextuelle

Lorsque l'utilisateur clique sur l'icône d'édition correspondant à un article de blog, vous devez renseigner les détails de l'article de blog dans le menu contextuel d'ajout de message afin de le mettre à jour..

Ajouter une méthode de clic à l'icône d'édition.

À l'intérieur de Service commun, vous devez définir un observable pour savoir quand vous cliquez sur le bouton Modifier. Définissez l'observable comme indiqué:

postEdit_Observable public = nouveau sujet ();

Définir une autre variable pour garder une trace de la publication à modifier.

public post_to_be_edited; constructor () this.post_to_be_edited = new Post (); 

Chaque fois que vous cliquez sur le bouton Modifier, vous conservez le message à modifier dans la liste. Service commun et déclencher l'observable pour notifier la post-édition. Définissez deux méthodes pour définir le message à modifier et pour notifier le modifier..

notifyPostEdit () this.postEdit_Observable.next ();  setPostToEdit (post: Post) this.post_to_be_edited = post; this.notifyPostEdit (); 

Dans la méthode du clic, vous appelez le setPostToEdit méthode de Service commun. Voici comment editPost la méthode ressemble:

editPost (post: Post) this.commonService.setPostToEdit (post); 

Vous aurez les détails de la publication dans le service commun lorsque l'utilisateur clique sur le bouton Modifier. Pour afficher le menu contextuel d'ajout de publication à mettre à jour, vous devez cliquer sur le bouton d'ajout de publication par programme..

À l'intérieur de home / home.component.html fichier, ajouter un # identifiant au bouton d'ajout de message.

  Ajouter 

Importation ViewChild et ElementRef à l'intérieur de home.component.ts fichier.

import Component, ViewChild, ElementRef à partir de '@ angular / core';

Définir une référence au bouton d’ajout à l’intérieur du home.component.ts fichier.

@ViewChild ('addPost') addBtn: ElementRef;

À l'intérieur de AccueilComposant constructeur, abonnez-vous au postEdit_Observable de Service commun. En appelant le postEdit_Observable rappel d'abonnement, invoquez le bouton d'ajout cliquez pour afficher la fenêtre contextuelle. Voici comment home.component.ts fichier regarde:

import Component, ViewChild, ElementRef à partir de '@ angular / core'; importer CommonService de '… /service/common.service'; @Component (sélecteur: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css']) classe d'exportation HomeComponent @ViewChild ('addPost') addBtn: ElementRef; constructeur (private commonService: CommonService) this.commonService.postEdit_Observable.subscribe (res => this.addBtn.nativeElement.click (););  

Vous devez vous abonner à postEdit_Observable dans le add-post.component.ts fichier pour définir le poste à modifier sur le poster variable. Voici comment ngOnInit méthode en add-post.component.ts regards:

ngOnInit () this.commonService.postEdit_Observable.subscribe (res => this.post = this.commonService.post_to_be_edited;); 

Enregistrez les modifications ci-dessus et redémarrez le serveur client. Connectez-vous à l'application et cliquez sur le bouton de modification en regard d'un article de blog. Vous serez en mesure d'afficher les détails de la publication renseignés dans la fenêtre d'ajout de publication.

Création de l'API de mise à jour post-REST

À l'intérieur serveur / app.js, Définissons un autre point de terminaison de l'API REST pour mettre à jour les détails de la publication en fonction de l'ID de la publication. Voici à quoi ça ressemble:

app.post ('/ api / post / updatePost', (req, res) => )

Utilisons d'abord Mangouste se connecter à la base de données MongoDB.

app.post ('/ api / post / updatePost', (req, res) => mongoose.connect (url, useMongoClient: true, fonction (err) console.log ('connexion établie');) ;)

Une fois la connexion établie, vous utilisez le mettre à jour méthode sur le modèle Post.

Post.update (_id: req.body.id, titre: req.body.title, description: req.body.description, (err, doc) => if (err) renvoie err;)

Vous mettrez à jour le message en fonction du ID du poste passé. Comme indiqué dans le code ci-dessus, vous avez spécifié le message _id à mettre à jour. Dans la deuxième option, vous avez spécifié les champs à mettre à jour, qui sont Titre et la description.

Une fois les détails mis à jour, vous renverrez le statut ainsi que le nombre de lignes affectées lors de la mise à jour. Voici à quoi ressemble le point de terminaison de l'API REST pour la post-mise à jour:

app.post ('/ api / post / updatePost', (req, res) => mongoose.connect (url, useMongoClient: true, function (err) si (err) renvoie err; Post.update ( _id: req.body.id, titre: req.body.title, description: req.body.description, (err, doc) => if (err) renvoie err; renvoie res.status (200). json (status: 'success', data: doc))))

Appel de l'API REST à mettre à jour

le ID renvoyé pour chaque message de MongoDB est _id, vous devez donc modifier le identifiant de notre modèle src / app / models / post.model.ts. Voici à quoi ça ressemble:

classe d'exportation Post constructor () this._id = "; this.title ="; this.description = "; public _id; titre public; description publique;

Lorsque vous cliquez sur le bouton Ajouter un message, la méthode appelée sera addPost. À l'intérieur de addPost méthode en add-post.component.ts, vous allez vérifier si le poster l'objet a un _id. Si un _id est présent, vous devez appeler la méthode de mise à jour à partir du service, sinon vous appelez la méthode d'ajout de service.

Créez une méthode appelée updatePost à l'intérieur de add-post.service.ts fichier.

updatePost (post: Post) return this.http.post ('/ api / post / updatePost', id: post._id, titre: post.title, description: post.description)

Voici comment le modifié addPost méthode de la add-post.component.ts fichier regarde:

addPost () if (this.post.title && this.post.description) if (this.post._id) this.addPostService.updatePost (this.post) .subscribe (res => this.closeBtn.nativeElement .click (); this.commonService.notifyPostAddition (););  else this.addPostService.addPost (this.post) .subscribe (res => this.closeBtn.nativeElement.click (); this.commonService.notifyPostAddition (););  else alert ('Titre et description requis'); 

Enregistrez les modifications ci-dessus et redémarrez le serveur angulaire et le serveur de noeud. Connectez-vous à l'application et essayez de modifier un message. Une fenêtre contextuelle s'affichera pour modifier les détails en cliquant sur le bouton de modification. Cliquez sur le bouton Ajouter et les détails seront mis à jour et affichés dans la liste des publications du blog..

Envelopper

Dans ce didacticiel, vous avez implémenté la fonctionnalité pour mettre à jour les détails de publication de blog existants. Vous avez créé le point de terminaison de l'API REST principale pour mettre à jour les détails de publication de blog en fonction de l'ID de publication de blog. Vous avez utilisé le Mangouste client pour mettre à jour les détails de la publication de blog dans la base de données MongoDB.

Dans la partie suivante, vous implémenterez la fonctionnalité de suppression de publication et de déconnexion..

Comment était votre expérience jusqu'à présent? Faites-nous savoir vos pensées, suggestions ou corrections dans les commentaires ci-dessous.

Le code source de ce tutoriel est disponible sur GitHub.