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

Dans la partie précédente de la série de tutoriels sur le blog Angular, vous avez appris à créer le ShowPostComponent pour afficher la liste des articles de blog sur la page d'accueil. Vous avez récupéré les enregistrements insérés à partir du shell MongoDB à l'aide du point de terminaison de l'API REST créé..

Dans ce tutoriel, vous allez créer un nouveau composant appelé AddPostComponent pour fournir une interface utilisateur permettant d'ajouter un nouveau blog à la base de données MongoDB.

Commencer

Commençons par cloner le code source de la partie précédente de la série de tutoriels..

git clone https://github.com/royagasthyan/ShowPost AddPost

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

Installation de cd AddPost / client npm Installation de cd AddPost / server npm

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

cd AddPost / client npm start cd Noeud de serveur AddPost / server app.js

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

Création du composant Add Post

Commençons par créer le AddPostComponent. Créez un dossier appelé ajouter-post à l'intérieur de src / app dossier. À l'intérieur de ajouter-post dossier, créer un fichier appelé add-post.component.ts et ajoutez le code suivant:

importer composant de '@ angular / core'; import Post from '… /models/post.model'; @Component (sélecteur: 'app-add-post', templateUrl: './add-post.component.html', styleUrls: ['./add-post.component.css'] de la classe d'exportation AddPostComponent constructeur ()  

Créez un fichier appelé add-post.component.html et le code HTML suivant:

 
 
 
 
Titre modal
  ×  
 
 
 
 Titre  
 
 La description   
 Ajouter 
 
 
 
 

Vous montrerez le composant ajouter une publication sous forme de popup.

Maintenant, vous devez ajouter le AddPostComponent au NgModule. Importer le AddPostComponent dans le app.module.ts fichier.

importer AddPostComponent de './add-post/add-post.component';

Ajouter le composant au NgModule déclarations liste. Voici à quoi ça ressemble:

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'; importer AddPostComponent de './add-post/add-post.component'; @NgModule (declarations: [RootComponent, LoginComponent, HomeComponent, ShowPostComponent, AddPostComponent], importations: [BrowserModule, ROUTING, FormsModule, HttpClientModule], fournisseurs: [], bootstrap: [RootConent]] énoncé de la langue. 

Pour déclencher l’ajout d’une publication, vous avez déjà ajouté le cible de données attribuer au bouton dans home.component.html.

 Ajouter 

Enregistrez les modifications ci-dessus et redémarrez l'application. Connectez-vous à l'application et cliquez sur le bouton Ajouter lien dans la page d'accueil. Vous aurez le AddPostComponent affiché sous forme de popup.

Implémentation de la fonctionnalité Ajouter une publication

Ajouter le ngModel directive aux éléments d'entrée pour Titre et la description.

Ajouter un Cliquez sur directive au bouton pour appeler la méthode pour enregistrer l'article de blog.

Ajouter

Importer le Poster modèle de src / app / models / post.model.ts dans le add-post.component.ts fichier.

import Post from '… /models/post.model';

Définir les poster variable dans le add-post.component.ts fichier.

poste publique: poste;

Définir les addPost méthode à l'intérieur du add-post.component.ts fichier. Du addPost méthode, vous allez valider la saisie Titre et la description et appelez la méthode de service pour appeler l'API REST. Voici à quoi ressemble la méthode:

addPost () if (this.post.title && this.post.description) // appelle la méthode de service pour ajouter post else alert ('Titre et description requis'); 

Créons le fichier de service pour le composant AddPostComponent. Créez un fichier appelé add-post.service.ts et ajoutez le code suivant:

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

À l'intérieur de AddPostService, créer une méthode appelée addPost faire l'appel API REST.

addPost (post: Post) return this.http.post ('/ api / post / createPost', titre: post.title, description: post.description)

Comme indiqué dans le code ci-dessus, vous avez utilisé le HttpClient faire l'appel API et renvoyer le Observable.

dans le add-post.component.ts déposer à l'intérieur du addPost méthode, vous vous abonnez à la addPost méthode de la add-post.service.ts fichier.

this.addPostService.addPost (this.post) .subscribe (res => // réponse de l'appel de l'API REST);

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

importer composant de '@ angular / core'; importer AddPostService à partir de './add-post.service'; import Post from '… /models/post.model'; @Component (sélecteur: 'app-add-post', templateUrl: './add-post.component.html', styleUrls: ['./add-post.component.css'], fournisseurs: [AddPostService] ) classe d'exportation AddPostComponent poste public: poste; constructeur (privé addPostService: AddPostService) this.post = new Post ();  addPost () if (this.post.title && this.post.description) this.addPostService.addPost (this.post) .subscribe (res => console.log ('réponse est', res)) ;  else alert ('Titre et description requis');  

Création de l'API REST pour Add Post

Créons un point de terminaison de l'API REST pour ajouter la publication de blog à la base de données MongoDB. dans le serveur / app.js fichier, créez un point de fin d’API comme indiqué:

app.post ('/ api / post / createPost', (req, res) => // insère les détails dans MongoDB)

Tout d’abord, vous devez vous connecter à la base de données MongoDB à l’aide du Mangouste client.

mongoose.connect (url, useMongoClient: true, fonction (err) if (err) renvoie err; console.log ('connexion établie'););

Une fois la connexion établie, vous devez créer un objet de modèle à l’aide de la Poster schéma défini dans le serveur / modèle / post.js fichier. 

const post = new Post (titre: req.body.title, description: req.body.description)

Comme indiqué dans le code ci-dessus, vous avez créé l’objet Post en utilisant le Titre et la description passé de la demande req objet.

Appeler le enregistrer Méthode sur l'objet Post pour enregistrer l'entrée dans MongoDB.

post.save ((err, doc) => si (err) renvoie une erreur; renvoie res.status (200) .json (status: 'succès', data: doc))

Comme on le voit dans le code ci-dessus, une fois que le enregistrer Le rappel de méthode est appelé sans erreur, il retournera le Succès message avec l'objet retourné doc.

Voici à quoi ressemble finalement le point final de l'API REST:

app.post ('/ api / post / createPost', (req, res) => mongoose.connect (url, useMongoClient: true, fonction (err) if (err) renvoie err; const post = new Post (titre: req.body.title, description: req.body.description) post.save ((err, doc) => if (err) renvoie une erreur; return res.status (200) .json (status : 'success', data: doc)));)

Enregistrez les modifications ci-dessus et redémarrez les serveurs Angular et Node. Connectez-vous à l'application et essayez d'ajouter un nouveau blog. Une fois que vous cliquez sur le Ajouter bouton, vérifiez la console du navigateur et vous aurez la réponse de réussite enregistré.

Une fois les détails de publication de blog correctement ajoutés à la base de données, vous devez fermer la fenêtre contextuelle. Pour fermer la fenêtre contextuelle, il existe un bouton de fermeture sur lequel vous devez cliquer par programme..

Vous utiliserez le @ViewChild décorateur pour accéder au bouton de fermeture.

Importation ViewChild et ElementRef dans AddPostComponent.

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

À l'intérieur de AddPostComponent, définir la variable suivante:

@ViewChild ('closeBtn') closeBtn: ElementRef;

Initier le closeBtn cliquez en utilisant le code suivant:

this.closeBtn.nativeElement.click ();

Ajoutez le code ci-dessus au rappel de succès du addPost méthode. Voici la addPost méthode de add-post.component.ts.

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

Enregistrez les modifications et redémarrez le serveur client. Connectez-vous à l'application et essayez d'ajouter un nouveau post de blog. Une fois que les détails de l'article du blog ont été enregistrés avec succès, la fenêtre contextuelle se ferme.

Actualiser la liste de blogs

Une chose à noter est que le blog ajouté ne figure pas dans la liste des blogs. Vous devez donc ajouter un déclencheur pour indiquer quand mettre à jour le ShowPostComponent. Vous utiliserez un service commun pour communiquer entre les deux composants.

Créez un dossier appelé un service à l'intérieur de src / app dossier. Créez un fichier appelé common.service.ts avec le code suivant:

import Injectable from '@ angular / core'; importer Subject de 'rxjs / Subject'; @Injectable () export class CommonService public postAddAdd_Observable = new Subject (); constructor ()  notifyPostAddition () this.postAdded_Observable.next (); 

Comme indiqué dans le code ci-dessus, vous avez déclaré Assujettir appelé postAdded_Observable suivre la nouvelle publication du blog dans la base de données. Chaque fois qu'un nouveau billet de blog est ajouté à la base de données, vous appelez le notifyPostAddition méthode, qui informera les abonnés de la mise à jour.

Importer le Service commun dans app.module.ts et l'inclure dans le NgModule liste du fournisseur. Voici à quoi ça ressemble:

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'; importer AddPostComponent de './add-post/add-post.component'; importer CommonService de './service/common.service'; @NgModule (declarations: [RootComponent, LoginComponent, HomeComponent, ShowPostComponent, AddPostComponent], importations: [BrowserModule, ROUTING, FormsModule, HttpClientModule], fournisseurs: [CommonServ], démarrage 

Importation Service commun dans le show-post.component.ts déposer et l'initialiser dans la méthode constructeur.

importer CommonService de '… /service/common.service';

constructeur (private showPostService: ShowPostService, commonService privé: CommonService) 

À l'intérieur de ngOnInit méthode, abonnez-vous à la postAdded_Observable variable et charger le getAllPost méthode. Voici comment ngOnInit la méthode ressemble:

ngOnInit () this.getAllPost (); this.commonService.postAdded_Observable.subscribe (res => this.getAllPost ();); 

Importation Service commun dans le add-post.component.ts déposer et appeler le notifyPostAddition méthode une fois que le blog a été ajouté. Voici comment addPost méthode de la AddPostComponent regards:

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

Enregistrez les modifications ci-dessus et redémarrez le serveur client. Connectez-vous à l'application et ajoutez un nouvel article de blog. Une fois ajoutée, la liste des articles de blog est mise à jour avec le nouvel article de blog..

Envelopper

Dans ce tutoriel, vous avez créé le AddPostComponent d'ajouter les détails de publication de blog à la base de données MongoDB. Vous avez créé l'API REST pour enregistrer une publication de blog dans la base de données MongoDB à l'aide du Mangouste client.

Dans la partie suivante de la série, vous implémenterez la fonctionnalité permettant de modifier et de mettre à jour les détails de publication de blog..

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.