Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Construyendo un front-end con WordPress: Mensajes, categorías y controladores de usuarios

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Building a WordPress-Powered Front End With the WP REST API and AngularJS.
Building a WordPress-Powered Front End: A Custom Directive for Post Listing

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

En la parte anterior de la serie, hemos creado una directiva personalizada para los anuncios de anuncios en la parte delantera. Esta directiva toma argumentos directamente en el atributo HTML, así como en la URL para recuperar las publicaciones del servidor. La construcción de la directiva nos ha permitido mostrar la función de publicación de anuncios en cualquier lugar de nuestra aplicación mediante la reutilización de la lógica de negocio y la lógica de representación proporcionada por la directiva.

En esta parte concluyente de la serie, trabajaremos en la parte restante de nuestra aplicación y crearemos controladores para la lista de correos, la publicación individual, el autor y la página de categorías. También trabajaremos en las plantillas de estos controladores y mostraremos en ellos los datos proporcionados por los controladores.

Para ser específico, en la parte actual de la serie, vamos a:

  • Nos presentamos a los controladores AngularJS
  • Construir controladores para publicaciones, categorías y usuarios
  • Plantillas de enlace a los datos proporcionados por el controlador

Comencemos por introducirnos en los controladores AngularJS.

Introducción a los controladores AngularJS

Los controladores en AngularJS son uno de los principales bloques de construcción de la aplicación. Contienen lógica de negocios que decide qué datos mostrar al usuario. Ellos manejan gran parte de la funcionalidad relacionada con la interfaz de usuario de la aplicación y también proporcionan soporte para la interacción del usuario.

Los controladores están estrechamente vinculados a DOM y pegan el modelo de la aplicación -donde reside los datos- a la vista de la aplicación.

En nuestro caso, en el que estamos construyendo la aplicación impulsada por la API WP REST, los controladores son donde se muestran los datos recuperados a través de la API y diferentes servicios para el usuario final.

Creación de un controlador para la vista de publicaciónes

Los controladores en AngularJS se definen en el módulo, y usaremos la misma notación del estilo seguro de la inyección de dependencia como lo hicimos para declarar la directiva personalizada. Considere el siguiente código, en el que estamos declarando un controlador para la página de listado de entradas:

Los controladores se definen en un módulo que utiliza el método .controller() que está disponible en el módulo. El nombre del controlador que definimos anteriormente es PostListing.

Todos los datos que necesitamos exponer al mundo exterior deben establecerse en la palabra clave this dentro de la función del constructor del controlador. Por lo tanto, almacenamos en caché la palabra clave this creando una variable self .

El controlador para la lista de correos es el más simple de todos los controladores que haremos, en el sentido de que no necesita tener ningún dato. Sólo tiene que tener una plantilla vinculada, y vamos a colocar la directiva <post-listing></post-listing> en esa plantilla para comenzar a publicar. La directiva buscará puestos por su cuenta utilizando el servicio Posts y los listará usando su propia lógica de renderizado.

Por lo tanto, como primer paso, enlazaremos la plantilla views/listing.html al controlador PostListing, y lo haremos en la sección .config() de nuestra aplicación. La sección .config() es donde hemos configurado las rutas para la aplicación, y necesitamos modificar la ruta /wp/v2/posts a lo siguiente:

En el código anterior, colocamos dos propiedades adicionales en la definición de ruta, y estas propiedades son:    

  1. Controlador controller: El nombre del controlador que debemos vincular a esta ruta y su plantilla.
  2. ControllerAs: La palabra clave por la cual nos referimos al controlador en nuestra plantilla.

Por lo tanto, pasamos PostListing como el nombre del controlador, y nos referiremos a él en la plantilla usando la palabra clave postListing.

Después de haber enlazado el controlador con la ruta y la plantilla, ahora necesitamos modificar la plantilla para publicar correctamente las entradas. Así que abra el archivo de plantillas views/listing.html y reemplace su contenido con el código siguiente:

A continuación se muestra una captura de pantalla de la plantilla completada:

Post listing view

¡Y eso es! La línea de código anterior muestra la potencia de las directivas de AngularJS. Con sólo una línea de código, hemos sido capaces de imitar la funcionalidad para la lista de correos que incluye la lógica de negocio, así como la lógica de renderizado. Y veremos además cuán flexible puede ser esta directiva AngularJS cuando se construyen controladores para las vistas de categoría y de lista de usuarios en las siguientes secciones.

Creación de un controlador para la vista de categoría

Habiéndonos familiarizado con la sintaxis de la declaración del controlador y habiendo construido un controlador muy simple para la lista de correos, estamos listos para empezar a trabajar en un controlador más avanzado para la vista de categorías.

El controlador de vista de categorías que estamos construyendo utilizará el servicio $routeParam para acceder al ID de categoría en la URL y, utilizando dicho ID, el controlador utilizará el servicio Categorías Categories para obtener información de categoría y una lista de sus publicaciones asociadas. Sin embargo, el controlador no buscará directamente las publicaciones utilizando el servicio Posts, sino que utilizará la directiva postListing y le pasará el ID de categoría para recuperar una lista de publicaciones asociadas a esa categoría.

A continuación se muestra el código para el controlador CategoryListing:

El controlador de CategoryListing anterior tiene dos dependencias para el servicio $routeParams y el servicio personalizado de Categorías Categories . Utilizando el servicio $routeParams, recupera el ID de la categoría de la URL y, a continuación, consulta utilizando ese ID para la información de categoría a través del servicio Categorías Categories.

El controlador tiene una variable definida en el objeto $scope denominado categoryInfo. Esta variable contiene el objeto de categoría devuelto por el servidor y su valor se establece después de que la consulta ha sido satisfactoria.

Lo siguiente que tenemos que hacer es vincular una plantilla a este controlador que mostrará los datos al usuario. Y lo hacemos en la sección .config de la aplicación, tal como lo hicimos para el controlador PostListing en la sección anterior.

Así que modifique la ruta /categories/:id para contener el código siguiente:

En el código anterior, enlazamos la ruta al controlador CategoryListing y también definimos la palabra clave categoryListing a través de la cual nos referimos a ella en la plantilla.

Ahora es el momento de modificar la plantilla views/category.html para que muestre datos dinámicamente en lugar de mostrar código HTML estático.

En el código anterior, reemplazamos el nombre de categoría codificada con {{categoryListing.categoryInfo.name}}, donde categoryListing es una instancia del controlador CategoryListing. La variable categoryInfo contiene el objeto de categoría devuelto por el servidor y este objeto contiene la propiedad name del nombre de la categoría.

Para la función de publicación de anuncios, utilizamos la directiva postListing y la pasamos a la categoría ID a través del atributo post-args. Para ello, utilizamos la sintaxis filter[] soportada por la ruta /wp/v2/posts de la API WP REST. Ya estamos familiarizados con la sintaxis filter[] de la cuarta parte de la serie introductoria sobre el WP REST API.

A continuación se muestra una captura de pantalla de la vista de categoría completa:

Category view

Ahora vamos a resolver el controlador para los usuarios, que es muy similar al controlador de categorías.

Creación de un controlador para la vista de usuario

El controlador para la vista de usuario es muy similar al de las categorías. Comenzaremos modificando la configuración de enrutamiento para enlazar el controlador con la plantilla:

Aquí enlazamos el controlador UserListing con la ruta y su plantilla. La palabra clave por la que nos referimos a la instancia del controlador es userListing.

A continuación se muestra el código para el controlador UserListing:

El controlador UserListing toma los servicios $routeParams y Users como dependencias. Utilizando el servicio $routeParams, accede al ID de usuario en la URL. A continuación, se utiliza el servicio UsuariosUsers para obtener el objeto de usuario mediante el ID de usuario. La variable userInfo contiene el objeto de usuario devuelto por el servidor.

Ahora modifiquemos la plantilla views/author.html para procesar estos datos al usuario. Reemplace todos los contenidos del archivo author.html con lo siguiente:

En el código anterior, accedemos a la variable userInfo definida en el ámbito del controlador que contiene el objeto de información del usuario. Utilizando varias propiedades de este objeto de usuario, reemplazamos el nombre de usuario codificado, user gravatar y la descripción del usuario.

Para enumerar las publicaciones creadas por el usuario, usamos la directiva postListing y le pasamos el ID de usuario como el valor del parámetro author. La directiva luego busca los mensajes usando el servicio Posts.

Esto es lo que la vista completada debería verse así:

User view

El cuarto y último controlador que necesita ser trabajado ahora es para la vista de lista única de anuncios, y lo hacemos en la siguiente sección.

Creación de un controlador para la vista de publicación única

La vista para la publicación única es ligeramente diferente de las otras, ya que no utilizará la directiva postListing porque la directiva utiliza una plantilla que es más adecuada para la página de publicación de publicaciones. Adicionalmente, agregaremos soporte para mostrar los comentarios de una sola publicación en el futuro, por lo que necesitamos tener una plantilla separada para una sola publicación en lugar de usar la misma plantilla que para la lista de publicación.

Debido a las razones anteriores, utilizaremos el servicio Posts manualmente en el controlador para una sola publicación para recuperar la publicación basada en su slug.

Primero hagamos una modificación rápida en la ruta de publicación única para vincular el controlador y la plantilla:

Así que el nombre del controlador para una sola publicación será SinglePost. Usaremos la palabra clave singlePost para referirnos a ella en su plantilla.

A continuación se muestra el código para la declaración del controlador:

En el código anterior, primero recuperamos el mensaje slug usando el servicio $routeParams y lo guardamos en la propiedad self.postSlug en el ámbito del controlador. A continuación consultamos la base de datos mediante el servicio Posts proporcionando el post slug como un argumento de consulta. Los datos devueltos son una matriz que contiene un único objeto y establecemos la propiedad self.post en el ámbito con estos datos devueltos. ¡Sencillo!

Ahora para la plantilla, a continuación se muestra el contenido del archivo views/single.html:

El código anterior es bastante simple ya que unimos varias propiedades del objeto post a diferentes elementos, tal como lo hemos estado haciendo en las últimas secciones.

A continuación se muestra una captura de pantalla de la vista de publicación individual completada:

Single post view

La aplicación se ha completado (todavía no está disponible) y ofrece vistas para las páginas de publicación de publicaciones, de publicaciones individuales, de usuarios y de categorías.

Conclusión

Aquí concluimos nuestra serie de cuatro partes, en la que construimos un front-end impulsado por el WP REST API y AngularJS. Comenzamos analizando los requisitos y revisando wireframes. Luego construimos un complemento complementario que proporciona algunos campos adicionales en las respuestas estándar que se necesitarán en nuestro front-end.

En las partes siguientes, hemos iniciado nuestra aplicación AngularJS, plantillas disecadas para diferentes vistas y configurado el enrutamiento de aplicaciones. También creamos una directiva AngularJS personalizada para la función de publicación de anuncios que abstrae la funcionalidad de los anuncios y proporciona una forma flexible de recuperar un conjunto de publicaciones para distintos requisitos.

En la parte final de la serie, creamos controladores para las vistas de post-anuncio, de publicación individual, de categoría y de usuario y los vinculamos con sus respectivas plantillas a través de la sección .config() de nuestra aplicación.

La aplicación no es completa y se puede mejorar de muchas maneras. Algunas ideas se enumeran a continuación:

  • Hilo de comentarios en la vista de publicación individual
  • No hay mensajes de Mensaje de autor cuando no hay una entrada por el usuario en la página de perfil de autor    
  • Paginación numerada en las páginas de la lista de post
  • Mejor SEO con AngularJS Aplicaciones de una sola página

Intentaremos aprovechar estas características en futuros tutoriales. Pero por ahora, me estoy dejando a usted para jugar con la aplicación y ampliar con algunas características impresionantes. Asegúrese de proporcionar una demostración en línea para la aplicación en los comentarios, ya que estoy deseoso de aprender de mis lectores.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.