Creación de una aplicación de blogs usando Angular y MongoDB Agregar publicación

En la parte anterior de la serie de tutoriales del blog Angular, aprendiste a crear el ShowPostComponent para mostrar la lista de publicaciones del blog en la página de inicio. Obtuvo los registros que se insertaron desde el shell MongoDB utilizando el punto final de la API REST creada.

En este tutorial, crearás un nuevo componente llamado AddPostComponent para proporcionar la interfaz de usuario para agregar una nueva publicación de blog a la base de datos MongoDB.

Empezando

Comencemos clonando el código fuente de la parte anterior de la serie de tutoriales.

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

Vaya al directorio del proyecto e instale las dependencias necesarias.

cd AddPost / client npm install cd AddPost / server npm install

Una vez que tenga instaladas las dependencias, reinicie la aplicación cliente y servidor.

cd AddPost / client npm start cd AddPost / server node app.js

Dirija su navegador a http: // localhost: 4200 y debería tener la aplicación en ejecución.

Creación del componente Agregar publicación

Empecemos creando la AddPostComponent. Crea una carpeta llamada agregar-publicar dentro de src / app carpeta. Dentro de agregar-publicar carpeta, crea un archivo llamado add-post.component.ts y añada el siguiente código:

importar Componente desde '@ angular / core'; importar Post desde '… /models/post.model'; @Component (selector: 'app-add-post', templateUrl: './add-post.component.html', styleUrls: ['./add-post.component.css']) clase de exportación AddPostComponent constructor ()  

Crear un archivo llamado add-post.component.html y el siguiente código HTML:

 
 
 
 
Título modal
  ×  
 
 
 
 Título  
 
 Descripción   
 Añadir 
 
 
 
 

Mostrarás el componente Agregar post como una ventana emergente.

Ahora necesitas añadir el AddPostComponent al NgModule. Importar el AddPostComponent en el app.module.ts expediente.

importe AddPostComponent desde './add-post/add-post.component';

Agregue el componente a la NgModule declaraciones lista. Aquí está cómo se ve:

importe BrowserModule desde '@ angular / platform-browser'; importe NgModule desde '@ angular / core'; importar ROUTING desde './app.routing'; importe FormsModule desde '@ angular / forms'; importe HttpClientModule desde '@ angular / common / http'; importe RootComponent desde './root/root.component'; importe LoginComponent desde './login/login.component'; importe HomeComponent desde './home/home.component'; importe ShowPostComponent desde './show-post/show-post.component'; importe AddPostComponent desde './add-post/add-post.component'; @NgModule (declaraciones: [RootComponent, LoginComponent, HomeComponent, ShowPostComponent, AddPostComponent], importa: [BrowserModule, ROUTING, FormsModule, HttpClientModule], proveedores: [], bootstrap: [RootComponent]) clase de exportación AppModule  

Para activar la ventana emergente de adición de publicación, ya ha agregado la objetivo de datos atribuir al botón en home.component.html.

 Añadir 

Guarde los cambios anteriores y reinicie la aplicación. Inicie sesión en la aplicación y haga clic en el Añadir Enlace en la página de inicio. Tendras el AddPostComponent mostrado como una ventana emergente.

Implementando la funcionalidad de añadir publicación

Añade el ngModel Directiva a los elementos de entrada para título y descripción.

Agrega un hacer clic Directiva al botón para llamar al método para guardar la publicación del blog.

Añadir

Importar el Enviar modelo de src / app / models / post.model.ts en el add-post.component.ts expediente.

importar Post desde '… /models/post.model';

Definir el enviar variable en el add-post.component.ts expediente.

Public post: Post;

Definir el addPost metodo dentro del add-post.component.ts expediente. Desde el addPost Método, se validará el ingresado. título y descripción y realice una llamada al método de servicio para llamar a la API REST. Aquí es cómo se ve el método:

addPost () if (this.post.title && this.post.description) // llame al método de servicio para agregar la publicación else alert ('Título y descripción requeridos'); 

Vamos a crear el archivo de servicio para el componente AddPostComponent. Crear un archivo llamado add-post.service.ts y añada el siguiente código:

importar Inyectable desde '@ angular / core'; importe HttpClient desde '@ angular / common / http'; importar Post desde '… /models/post.model'; @Injectable () exportar clase AddPostService constructor (http privado: HttpClient) 

Dentro de AddPostService, crear un método llamado addPost para hacer la llamada API REST.

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

Como se ve en el código anterior, ha hecho uso de la HttpClient para hacer la llamada a la API y devolver el Observable.

En el add-post.component.ts archivo dentro de la addPost Método, te suscribirás a la addPost método de la add-post.service.ts expediente.

this.addPostService.addPost (this.post) .subscribe (res => // respuesta de la llamada de REST API);

Aquí es cómo el add-post.component.ts aspecto del archivo:

importar Componente desde '@ angular / core'; importe AddPostService desde './add-post.service'; importar Post desde '… /models/post.model'; @Componente (selector: 'app-add-post', templateUrl: './add-post.component.html', styleUrls: ['./add-post.component.css'], proveedores: [AddPostService] ) clase de exportación AddPostComponent public post: Post; constructor (addPostService privado: AddPostService) this.post = new Post ();  addPost () if (this.post.title && this.post.description) this.addPostService.addPost (this.post) .subscribe (res => console.log ('response is', res)) ;  else alert ('Título y descripción requeridos');  

Creando la API REST para agregar publicación

Vamos a crear un punto final de REST API para agregar la publicación del blog a la base de datos MongoDB. En el servidor / app.js archivo, cree un punto final de API como se muestra:

app.post ('/ api / post / createPost', (req, res) => // inserta los detalles en MongoDB)

Primero, necesita conectarse a la base de datos MongoDB usando el Mangosta cliente.

mongoose.connect (url, useMongoClient: true, function (err) if (err) throw err; console.log ('conexión establecida'););

Una vez establecida la conexión, debe crear un objeto modelo utilizando el Enviar esquema definido en el servidor / modelo / post.js expediente. 

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

Como se ve en el código anterior, creó el objeto Publicar utilizando el título y descripción pasado de la solicitud req objeto.

Llama a salvar Método en el objeto Post para guardar la entrada en MongoDB.

post.save ((err, doc) => if (err) throw err; return res.status (200) .json (status: 'success', data: doc))

Como se ve en el código anterior, una vez que el salvar método de devolución de llamada se llama sin error, devolverá el éxito mensaje junto con el objeto devuelto Doc.

Aquí es cómo se ve finalmente el punto final de la API REST:

app.post ('/ api / post / createPost', (req, res) => mongoose.connect (url, useMongoClient: true, function (err) if (err) throw err; const post = new Post (title: req.body.title, descripción: req.body.description) post.save ((err, doc) => if (err) throw err; return res.status (200) .json (status : 'éxito', datos: doc)));)

Guarde los cambios anteriores y reinicie los servidores Angular y Node. Inicie sesión en la aplicación e intente agregar una nueva publicación de blog. Una vez que haga clic en el Añadir botón, verifique la consola del navegador y tendrá la respuesta de éxito registrada.

Cuando los detalles de la publicación del blog se agregan correctamente a la base de datos, debe cerrar la ventana emergente. Para cerrar la ventana emergente, hay un botón de cierre en el que debe hacer clic mediante programación.

Estarás usando el @ViewChild Decorador para acceder al botón de cierre..

Importar ViewChild y ElementRef en AddPostComponent.

importe Component, ViewChild, ElementRef desde '@ angular / core';

Dentro de AddPostComponent, define la siguiente variable:

@ViewChild ('closeBtn') closeBtn: ElementRef;

Iniciar el cerrarBtn haga clic usando el siguiente código:

this.closeBtn.nativeElement.click ();

Agregue el código anterior a la devolución de llamada exitosa del addPost método. Aquí está el addPost método 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 ('Título y descripción requeridos'); 

Guarde los cambios y reinicie el servidor cliente. Inicie sesión en la aplicación e intente agregar una nueva publicación de blog. Una vez que los detalles de la publicación del blog se hayan guardado correctamente, la ventana emergente se cerrará.

Actualizar la lista de blogs

Una cosa a tener en cuenta es que la nueva publicación del blog no aparece en la lista de publicaciones del blog. Por lo tanto, debe agregar un disparador para notificar cuándo actualizar el ShowPostComponent. Utilizará un servicio común para comunicarse entre los dos componentes..

Crea una carpeta llamada Servicio dentro de src / app carpeta. Crear un archivo llamado common.service.ts con el siguiente código:

importar Inyectable desde '@ angular / core'; importar Asunto desde 'rxjs / Asunto'; @Injectable () exportar clase CommonService public postAdded_Observable = new Subject (); constructor ()  notifyPostAddition () this.postAdded_Observable.next (); 

Como se ve en el código anterior, ha declarado un Tema llamado postAdded_Observable para realizar un seguimiento de la nueva publicación de blog además de la base de datos. Cada vez que se agrega una nueva entrada de blog a la base de datos, llamará a NotifyPostAddition Método, que notificará a los suscriptores sobre la actualización..

Importar el CommonService en app.module.ts e incluirlo en el NgModule lista de proveedores Aquí está cómo se ve:

importe BrowserModule desde '@ angular / platform-browser'; importe NgModule desde '@ angular / core'; importar ROUTING desde './app.routing'; importe FormsModule desde '@ angular / forms'; importe HttpClientModule desde '@ angular / common / http'; importe RootComponent desde './root/root.component'; importe LoginComponent desde './login/login.component'; importe HomeComponent desde './home/home.component'; importe ShowPostComponent desde './show-post/show-post.component'; importe AddPostComponent desde './add-post/add-post.component'; importe CommonService desde './service/common.service'; @NgModule (declaraciones: [RootComponent, LoginComponent, HomeComponent, ShowPostComponent, AddPostComponent], importaciones: [BrowserModule, ROUTING, FormsModule, HttpClientModule], proveedores: [CommonService], [RootComponent]]) export class Appomodule Appartodice] 

Importar CommonService en el show-post.component.ts Archivo e inicializarlo en el método constructor..

importe CommonService desde '… /service/common.service';

constructor (showPostService privado: ShowPostService, commonService: CommonService) 

Dentro de ngOnInit método, suscribirse a la postAdded_Observable variable y cargar el getAllPost método. Aquí es cómo el ngOnInit método se ve:

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

Importar CommonService en el add-post.component.ts archiva y llama al NotifyPostAddition Método una vez que la publicación del blog ha sido añadida. Aquí es cómo el addPost método de la AddPostComponent miradas

addPost () if (this.post.title && this.post.description) this.addPostService.addPost (this.post) .subscribe (res => this.closeBtn.nativeElement.click (); this.commonService. notifyPostAddition (););  else alert ('Título y descripción requeridos'); 

Guarde los cambios anteriores y reinicie el servidor cliente. Inicia sesión en la aplicación y agrega una nueva publicación de blog. Una vez que se agrega, la lista de publicaciones del blog se actualiza con la nueva publicación del blog.

Envolviendolo

En este tutorial, creaste el AddPostComponent para agregar los detalles de la publicación del blog a la base de datos MongoDB. Usted creó la API REST para guardar una publicación de blog en la base de datos MongoDB usando la Mangosta cliente.

En la siguiente parte de la serie, implementará la funcionalidad para editar y actualizar los detalles de la publicación del blog..

El código fuente de este tutorial está disponible en GitHub.

¿Cómo fue tu experiencia hasta ahora? Hazme saber tus valiosas sugerencias en los comentarios a continuación..