Creación de un front-end de WordPress-Powered: Bootstrapping, enrutamiento y servicios

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

En la parte anterior de esta serie sobre la construcción de un front-end de WordPress con el WP REST API y AngularJS, analizamos los requisitos del proyecto, evaluamos wireframes, descargamos y compilamos el paquete HTML y construimos el complemento complementario para WordPress que modifica las respuestas para el Recursos de Posts y Usuarios Users .

Después de haber sentado una base sólida para nuestro proyecto, ahora estamos listos para comenzar a trabajar en la parte delantera y configurar configuraciones básicas para nuestra aplicación con AngularJS.

En la parte actual de la serie, vamos a:

Arranque la aplicación AngularJS
Plantillas de disección para diferentes vistas en el paquete HTML
Configurar el enrutamiento de nuestra aplicación
Configurar servicios para diferentes recursos en la API WP REST

Empecemos por inicializar la aplicación AngularJS y diseccionar plantillas para las vistas, incluyendo la publicación de publicaciones, la publicación individual y las categorías.

Bootstrapping de la aplicación AngularJS

Lo primero que tenemos que hacer para construir nuestra aplicación WP REST API es para arrancarla con la directiva ng-app AngularJS. La directiva ng-app se utiliza para auto-bootstrap la aplicación, y toma el nombre del módulo AngularJS como un valor opcional.

Pero antes de comenzar a modificar cualquier archivo, asegúrese de haber ejecutado el comando gulp navegando en el directorio quiescent-rest-api-html. Esto asegurará que los cambios que realice en el directorio /src se compilen inmediatamente en el directorio /dist mediante el comando gulp watch. Además, también le recomendamos que navegue por el directorio /dist en otra ventana de consola y ejecute el comando http-server que ejecutará el servidor HTTP Node.js para ese directorio y podrá previsualizar su sitio en el navegador de Simplemente escribiendo una dirección web tan simple como 127.0.0.1:8080.

La directiva ng-app suele colocarse en el elemento raíz, es decir, en la etiqueta <html>. Por lo tanto, vamos a modificar la etiqueta <html> en el archivo src/index.html a lo siguiente:

<html class="no-js" lang="en" ng-app="quiescentApp">

Aquí, quiescentApp es el nombre de nuestro módulo AngularJS principal que inicializaremos a continuación en nuestro archivo src/js/app.js.

El archivo src/js/app.js contiene actualmente sólo una línea de código para inicializar la funcionalidad de JavaScript proporcionada por Zurb Foundation. Podemos modificar este archivo para incluir el siguiente código para el módulo principal de nuestra aplicación AngularJS:

(function() {

    /**
     * Module definition for Quiescent App
     */
    var quiescentApp = angular.module( 'quiescentApp', ['ngSanitize', 'ngRoute', 'ngResource'] );

})();

Lo primero en el código anterior es la función anónima de auto-invocación que se representa por lo siguiente:

(function() {
    
})();

Como su nombre sugiere, la función anterior es anónima, es decir, no tiene nombre y se invoca inmediatamente ejecutando todo el código que está dentro de su cuerpo. Es una buena manera de limitar el alcance de nuestras variables y funciones para que no sean accesibles globalmente para cualquier manipulación.

Dentro de la función anónima, inicializamos nuestro módulo AngularJS utilizando el método angular.module(). La función angular.module() toma el nombre del módulo como el primer argumento y una matriz de dependencias como el segundo argumento.

Las dependencias que pasamos en el segundo argumento como una matriz son ngRoute, ngSanitize y ngResource. Esto es lo que cada uno de ellos hace:

NgRoute: Este módulo proporciona servicios de enrutamiento y de vinculación profunda para nuestra aplicación. Se encuentra en el archivo angular-route.js del paquete AngularJS descargado del sitio oficial.
NgResource: Este módulo proporciona soporte para interactuar con los servicios RESTful. Puesto que estamos planeando utilizar el WP REST API, éste será el módulo más importante en nuestra aplicación, ya que usaremos este módulo para interactuar con recursos incluyendo publicaciones, categorías y usuarios.
NgSanitize: Este módulo proporciona funcionalidad para desinfectar el HTML. Necesitaremos este módulo al imprimir HTML en la página. Los ejemplos incluyen el título de la publicación, el contenido de la publicación y un extracto.

Tenga en cuenta que, antes de inyectar estos módulos como dependencias en nuestro módulo principal, sus respectivos archivos deben incluirse en el documento HTML. Pero no tienes que preocuparte por eso ya que ya hemos configurado en nuestro archivo gulp.js.

Después de poner el código anterior en su archivo app.js, diríjase a la dirección proporcionada por el servidor HTTP Node.js. También abre las herramientas de desarrollador en tu navegador, y si no ves errores de JavaScript, ¡estamos listos para ir!

Ahora que hemos iniciado con éxito nuestra aplicación AngularJS, podemos trabajar en la parte de plantillas y diseccionar plantillas para diferentes vistas.

Disección de plantillas para diferentes vistas

Dado que estamos creando una aplicación de una sola página (SPA), necesitamos configurar plantillas para diferentes vistas que se cargan dinámicamente en la página cuando alguien hace clic en un vínculo.

Actualmente, tenemos varias páginas en nuestro HTML, incluidas las de la publicación de publicaciones, la publicación individual, el autor y la categoría. El HTML se ha estructurado de forma que el encabezado, el pie de página y el contenedor principal sean iguales para todas estas páginas. El contenedor principal en nuestro caso es div.columns.medium-8 dentro de la etiqueta div.main.row. AngularJS nos permite configurar diferentes plantillas para diferentes rutas en la aplicación. Pero antes de configurar el enrutamiento, necesitamos diseccionar estas plantillas de los archivos HTML existentes.

Así que en lugar de usar cuatro páginas diferentes para la página de índice, la publicación individual, el autor y la categoría, podemos usar una página HTML principal y dejarla cargar plantillas para diferentes vistas dependiendo de la ruta actual.

Comencemos por diseccionar la plantilla para la vista de lista de puestos. Abra el archivo /src/index.html en el editor de código de su elección y corte todo el código que está dentro del contenedor div.columns.medium-8. Cree un nuevo archivo llamado listing.html dentro del directorio /src/views y pegue el código en ese archivo.

Esta plantilla servirá como una vista para nuestra página de listado. Podemos repetir el procedimiento para cada uno de los archivos post-single.html, author.html y category.html. Abra cada uno de estos archivos en su editor de código y corte el contenido del contenedor div.columns.medium-8 y péguelos en los nuevos archivos creados dentro del directorio /src/views. Los nombres de los archivos de plantilla serían single.html, author.html y category.html respectivamente.

Cree un archivo nuevo en el directorio /src/views para la página 404 y llámelo 404.html. No tiene que contener nada especial, sino sólo la siguiente línea de código:

<h2>404 - Nothing Found</h2>

Ahora podemos quitar con seguridad los archivos /src/post-single.html, /src/author.html y /src/category.html. Preservaremos el archivo /src/index.html, que servirá como punto de entrada principal para nuestra aplicación.

Lo último que tenemos que hacer ahora es decirle a AngularJS el lugar donde cargar estas plantillas. Y podemos hacerlo añadiendo la directiva ng-view en el contenedor div.columns.medium-8 dentro del archivo /src/index.html:

<div class="columns medium-8" ng-view>
    
</div>

La directiva ng-view indica a AngularJS dónde cargar el contenido de los archivos de plantilla.

También podemos añadir el atributo auto-scroll="true" en el contenedor div.columns.medium-8 de modo que cuando navegamos entre las vistas, el navegador nos lleve al punto desde el que nos fuimos.

Volver a su navegador y actualizarlo, y debe ver una página que contiene sólo el encabezado y el pie de página. Esto se debe a que todavía no hemos configurado el enrutamiento. Y eso es lo que hacemos a continuación.

Configuración del enrutamiento para nuestra aplicación

Habiendo creado plantillas para diferentes vistas en nuestra aplicación, es hora de decirle a AngularJS cómo y cuándo cargar estas plantillas. Para este propósito, AngularJS proporciona un componente de proveedor llamado $routeProvider. El $routeProvider nos proporciona un método llamado .when() que se puede usar para configurar rutas junto con sus plantillas y algunas otras propiedades.

Considere el siguiente código:

/**
 * Configuring routes for our app
 */
quiescentApp.config( ['$routeProvider', function( $route ) {
    // post listing route
    $route.when( '/posts', {
        templateUrl: 'views/listing.html',
    } )
    
    // single post route
    .when( '/posts/:slug', {
        templateUrl: 'views/single.html',
    } )
    
    // author profile route
    .when( '/users/:id', {
        templateUrl: 'views/author.html',
    } )
    
    // category profile route
    .when( '/categories/:id', {
        templateUrl: 'views/category.html',
    } )
    
    // 404 route
    .otherwise( {
        templateUrl: 'views/404.html'
    } );
}] );

Aquí estamos configurando nuestra aplicación usando el método .config () inyectando $ routeProvider en él. La función toma un argumento—$route—para el $routeProvider, y luego lo usamos para configurar diferentes rutas.

El método .when () configura una nueva ruta y toma dos parámetros para la ruta $path y la ruta $route respectivamente. El argumento $path es una cadena que representa la ruta para la que estamos configurando la ruta. El argumento $route es un objeto que contiene información como la URL de la plantilla que se va a utilizar, el controlador, el identificador del controlador, etc.

En el código anterior, hemos configurado cuatro rutas para las vistas de publicación, publicación única, autor y categoría, respectivamente. Acaba de asignarles sus respectivas URL de plantilla, y configuraremos sus controladores más adelante en esta serie cuando los construyamos. Por lo tanto, vamos a estar progresivamente construyendo sobre este código desde este punto.

En el código anterior, anote los grupos con nombre, seguidos de dos puntos: para las rutas de publicación, autor y categoría individuales. Éstos se almacenan en el servicio $routeParams y se pondrán a disposición de cualquier directiva o controlador que desee utilizarlos. Vamos a ver esto en más detalle, pero por ahora, solo piense en ellos como lugares donde se puede acceder a un post slug, un ID de usuario o un identificador de categoría, proporcionado por el usuario en la URL.

Aparte de las cuatro rutas, hemos configurado la plantilla 404 usando el método .otherwise(). Este método le indica a AngularJS que redirija al usuario a una plantilla en particular si ninguna de las rutas configuradas coinciden.

Puede encontrar más información sobre el servicio de enrutamiento AngularJS y sus diferentes métodos y argumentos en la documentación oficial.

Ahora puede abrir cualquiera de las cuatro URL siguientes en su navegador y ver la plantilla que se está cargando:

https://127.0.0.1:8080/#/posts
http://127.0.0.1:8080/#/posts/10
http://127.0.0.1:8080/#/categories/10
http://127.0.0.1:8080/#/users/10

La dirección http://127.0.0.1:8080 puede ser diferente en su caso. El ID/slug que estamos proporcionando aquí (en este caso 10) no importa en este momento.

Lo último que tenemos que hacer ahora es crear servicios para recursos como publicaciones, usuarios y categorías.

Creación de servicios RESTful para recursos

AngularJS nos proporciona el módulo ngResource, que nos permite crear un servicio RESTful alrededor de un punto final determinado para un recurso. Pero antes de profundizar en escribir cualquier código para crear servicios, vamos a crear algunas variables de configuración que almacenan alguna información básica.

/**
 * Configuration variables for the app
 */
var 
    serverPath = 'http://localhost/wordpress/',
    apiPath = 'wp-json/wp/v2/',
    apiUrl = serverPath + apiPath;

La ruta del servidor puede ser diferente en su caso, y le recomiendo que lo cambie en consecuencia. Declarar estas variables nos permite configurar la ruta del servidor sólo en un lugar en lugar de escribirlo por separado para cada servicio. El código anterior debe colocarse dentro de la función anónima, y lo he colocado inmediatamente después de mi declaración de módulo quiescentApp.

Crear un servicio alrededor de un punto final en AngularJS es tan simple como el código siguiente:

quiescentApp.factory( 'Posts', ['$resource', function( $resource ) {
    return $resource( 'http://localhost/wordpress/wp-json/wp/v2/posts' );
}] );

El código anterior crea un servicio alrededor del recurso Posts en WP REST API. Aquí, quiescentApp es el nombre de nuestro módulo principal que definimos al principio.

El método .factory() toma el nombre como el primer argumento, y el segundo argumento es una matriz que contiene una lista de dependencias y una función. La función acepta los argumentos pasados como dependencias. Dado que proporcionamos $resource como dependencia para nuestro servicio, se pasa a la función como un argumento, y luego lo usamos para crear un servicio para el recurso Posts.

Ya hemos declarado una variable para la ruta de la API, por lo que podemos reemplazar la ruta por la siguiente:

quiescentApp.factory( 'Posts', ['$resource', function( $resource ) {
    return $resource( apiUrl + 'posts' );
}] );

Ahora que hemos creado un servicio para el recurso Posts, podemos inyectar este servicio como una dependencia en nuestras directivas y controladores y comenzar a usar sus métodos como Posts.query(), Posts.get(), etc. Vamos a aprender más sobre Estos métodos y lo que hacen en las siguientes partes de la serie, pero si usted es curioso, siempre se puede comprobar la documentación oficial.

Para crear un servicio para el recurso Posts, hemos proporcionado la ruta /wp/v2/posts. Esta ruta apunta a la colección de los mensajes y también se puede utilizar para crear una sola publicación. Pero en nuestra aplicación, también necesitamos recuperar un solo mensaje basado en su slug. Para contabilizar esta función, podemos modificar el código a lo siguiente:

quiescentApp.factory( 'Posts', ['$resource', function( $resource ) {
    return $resource( apiUrl + 'posts?slug=:slug' );
}] );

Esto se llama una plantilla de URL parametrizada, y los parámetros se sufijan con dos puntos:.

Esta modificación nos permite recuperar una colección de posts usando la ruta /wp/v2/posts, así como recuperar una sola entrada por su slug usando el argumento /posts?slug=<slug>.

Aparte de las publicaciones, estaremos recuperando categorías y usuarios por sus ID. Por lo tanto, el siguiente código crea servicios para los recursos Usuarios Users y Categorías Categories:

/**
 * Creating a service for Users
 */
quiescentApp.factory( 'Users', ['$resource', function( $resource ) {
    return $resource( apiUrl + 'users/:id' );
}] );

/**
 * Creating a service for Categories
 */
quiescentApp.factory( 'Categories', ['$resource', function( $resource ) {
    return $resource( apiUrl + 'categories/:id' );
}] );

Por lo tanto, el código para los tres servicios es el siguiente:

/**
/**
 * Creating a service for Posts
 */
quiescentApp.factory( 'Posts', ['$resource', function( $resource ) {
    return $resource( apiUrl + 'posts?slug=:slug' );
}] );

/**
 * Creating a service for Users
 */
quiescentApp.factory( 'Users', ['$resource', function( $resource ) {
    return $resource( apiUrl + 'users/:id' );
}] );

/**
 * Creating a service for Categories
 */
quiescentApp.factory( 'Categories', ['$resource', function( $resource ) {
    return $resource( apiUrl + 'categories/:id' );
}] );

Y nuestro archivo /src/js/app.js parece algo así como lo siguiente:

(function() {
    
    /**
     * Module definition for Quiescent App
     */
     var quiescentApp = angular.module( 'quiescentApp', ['ngSanitize', 'ngRoute', 'ngResource'] );
    
    /**
     * Configuration variables for the app
     */
    var 
        serverPath = 'http://localhost/wordpress/',
        apiPath = 'wp-json/wp/v2/',
        apiUrl = serverPath + apiPath;
    
    /**
     * Configuring routes for our app
     */
    quiescentApp.config( ['$routeProvider', function( $route ) {
    // post listing route
    $route.when( '/posts', {
        templateUrl: 'views/listing.html',
    } )
    
    // single post route
    .when( '/posts/:slug', {
        templateUrl: 'views/single.html',
    } )
    
    // author profile route
    .when( '/users/:id', {
        templateUrl: 'views/author.html',
    } )
    
    // category profile route
    .when( '/categories/:id', {
        templateUrl: 'views/category.html',
    } )
    
    // 404 route
    .otherwise( {
        templateUrl: 'views/404.html'
    } );
    }] );
    
    /**
     * Creating a service for Posts
     */
    quiescentApp.factory( 'Posts', ['$resource', function( $resource ) {
        return $resource( apiUrl + 'posts?slug=:slug' );
    }] );
    
    /**
     * Creating a service for Users
     */
    quiescentApp.factory( 'Users', ['$resource', function( $resource ) {
        return $resource( apiUrl + 'users/:id' );
    }] );
    
    /**
     * Creating a service for Categories
     */
    quiescentApp.factory( 'Categories', ['$resource', function( $resource ) {
        return $resource( apiUrl + 'categories/:id' );
    }] );

})();

$(document).foundation();

El método .get() en un servicio RESTful devuelve un solo objeto utilizando el método GET HTTP. El método .query() utiliza el mismo método GET HTTP, pero devuelve una matriz. Existen otros tres métodos predefinidos proporcionados por el servicio, es decir, .save(), .remove() y .delete(), que utilizan métodos POST y DELETE. Pero solo trataremos con los métodos .get() y .query() de esta serie, ya que sólo tratamos de recuperar datos.

Y esto termina nuestro tutorial para hoy.

¿Qué pasa después?

En el tutorial actual, escribimos mucho código JavaScript para arrancar nuestra aplicación, configurar rutas y crear servicios RESTful. También hemos disecado plantillas para diferentes vistas en nuestra aplicación.

En la siguiente parte de la serie, estaremos construyendo una directiva AngularJS personalizada para la función de publicación de anuncios con el servicio Posts que creamos. Esto nos permitirá incluir la función de publicación de anuncios en muchos lugares sin repetirnos. Así que estad atentos...