7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Angular

Creando un blog usando Angular & MondoDB: Editar publicación

Read Time: 7 mins
This post is part of a series called Creating a Blogging App Using Angular & MongoDB.
Creating a Blogging App Using Angular & MongoDB: Add Post
Creating a Blogging App Using Angular & MongoDB: Delete Post

Spanish (Español) translation by Juan Pablo Diaz Cuartas (you can also view the original English article)

En la parte anterior de esta serie de tutoriales, usted aprendió a crear el componente agregar publicación para agregar nuevas publicaciones en un blog. Aprendió cómo crear el punto final de la API REST para agregar una nueva publicación a la base de datos MongoDB.

En esta parte de la serie de tutoriales, usted aprenderá cómo implementar la funcionalidad para editar una publicación de un blog existente en la lista de publicaciones del blog.

empezemos

Empecemos por clonar el código fuente de la última parte de la serie de tutoriales.

Navega al directorio del proyecto e instala las dependencias requeridas

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

Apunte su navegador a http://localhost:4200 y tendrá la aplicación ejecutándose.

Agregar la vista Editar publicación

En ShowPostComponent, agregará dos iconos para editar y eliminar la publicación del blog. Utilizará Font Awesome para mostrar los iconos de edición y eliminación.

Descargue e incluya la fuente de la carpeta awesome en la carpeta assets

Font Awesome In Assets FolderFont Awesome In Assets FolderFont Awesome In Assets Folder

En la página src/app/index.html, incluya una referencia al estilo CSS de la fuente awesome.

Ahora modifique el archivo show-post/show-post.component.html para incluir el HTML para los iconos de edición y eliminación.

Así es como se ve el archivo show-post.component.html

Guarde los cambios anteriores y reinicie la aplicación cliente. Inicie sesión en la aplicación y podrá ver los íconos de edición y eliminación correspondientes a cada publicación de blog listada.

Angular Blog App - Edit And Delete IconAngular Blog App - Edit And Delete IconAngular Blog App - Edit And Delete Icon

Llenar el detalle de edición en una ventana emergente

Cuando el usuario hace clic en el icono de edición correspondiente a cualquier publicación de blog, debe completar los detalles de la publicación de blog en la ventana emergente de agregar publicación para actualizar.

Agregue un método de clic al ícono de edición.

Dentro de CommonService, necesita definir un observable para realizar un seguimiento de cuándo se hace clic en el botón editar. Defina el observable como se muestra:

Defina otra variable para realizar un seguimiento de la publicación que se va a editar.

Cada vez que se haga clic en el botón editar, mantendrá la publicación editada en CommonService y activará el observable para notificar la edición posterior. Defina dos métodos para configurar la publicación que se va a editar y notificar la edición de la publicación.

Dentro del método de clic, llamarás al método setPostToEdit desde CommonService. Así es como se ve el método editPost:

Usted tendrá los detalles de la publicación en el servicio común cuando el usuario haga clic en el botón Editar. Para mostrar la ventana emergente de agregar publicación para actualizar, debe hacer clic en el botón Agregar publicación programáticamente.

Dentro del archivo home/home.component.html, agregue un identificador # al botón Agregar mensaje.

Importar ViewChild y ElementRef dentro del archivo home.component.ts.

Defina una referencia al botón Agregar dentro del archivo home.component.ts.

Dentro del constructor HomeComponent, suscríbase a postEdit_Observable desde CommonService. Al llamar a la devolución de llamada postEdit_Observable, invoque el botón Agregar para mostrar la ventana emergente. Así es como se ve el archivo home.component.ts:

Usted necesita suscribirse a postEdit_Observable en el archivo add-post.component.ts para configurar la publicación que se editará en la variable de publicación. Así es como se ve el método ngOnInit en add-post.component.ts:

Guarde los cambios anteriores y reinicie el servidor del cliente. Inicie sesión en la aplicación y haga clic en el botón Editar contra cualquier publicación de blog. Podrá ver los detalles de la publicación rellenos en la ventana emergente de agregar publicación.

Angular Blog App - Update PostAngular Blog App - Update PostAngular Blog App - Update Post

Creación de la API REST de actualización de publicación

Dentro del servidor /app.js, definamos otro punto final de la API REST para actualizar los detalles de la publicación según el ID de la publicación. Así es como se ve:

Primero usemos Mongoose para conectarnos a la base de datos MongoDB.

Una vez que se establece la conexión, utiliza el método update en el modelo de publicación.

Actualizarás la publicación según el ID de la publicación aprobada. Como se ve en el código anterior, ha especificado la publicación _id para actualizar. En la segunda opción, ha especificado los campos que se actualizarán, que son title y description.

Una vez que los detalles se actualicen, devolverá el status junto con la cantidad de filas afectadas durante la actualización. Así es como se ve el punto final de la API REST para la actualización de la publicación:

Hacer la llamada REST API para actualizar

La ID devuelta para cada publicación de MongoDB es _id, por lo que debe modificar el id de nuestro modelo src/app/models /post.model.ts. Así es como se ve:

Cuando haga clic en el botón Agregar mensaje, el método llamado será addPost. Dentro del método addPost en add-post.component.ts, verificará si el objeto post tiene un _id. Si un _id está presente, entonces necesita llamar al método de actualización desde el servicio, de lo contrario, llamará al método de agregar correo de servicio.

Cree un método llamado updatePost dentro del archivo add-post.service.ts.

Así es como se ve el método addPost modificado del archivo add-post.component.ts:

Guarde los cambios anteriores y reinicie los servidores Angular y Node. Inicie sesión en la aplicación e intente editar una publicación. Usted tendrá una ventana emergente para editar los detalles al hacer clic en el botón Editar. Haga clic en el botón Agregar y los detalles se actualizarán y se mostrarán en la lista de publicaciones del blog.

Para concluir

En este tutorial, implementó la funcionalidad para actualizar los detalles de la publicación de blog existente. Creó el back-end de la API REST de fondo para actualizar los detalles de la publicación del blog en función de la ID de la publicación del blog. Hizo uso del cliente Mongoose para actualizar los detalles de la publicación del blog en la base de datos MongoDB.

En la siguiente parte, implementará la funcionalidad eliminar publicación y cerrar sesión.

¿Cómo fue tu experiencia hasta ahora? Háganos saber sus pensamientos, sugerencias o cualquier corrección en los comentarios a continuación.

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

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.