en angular, REST API, Wordpress

Monta tu (Single Page) App con Angular y WordPress

 

1

WordPress es una herramienta super potente, y más aun desde que tenemos la posibilidad de servir sus datos a traves de una API. Esto nos abre un mundo de posibilidades como por ejemplo aprovechar la potencia de WordPress como CMS (Content Management System) para la gestion de usuarios y creación de contenidos y utilizar estos datos desde una aplicación movil o web.

Angular.js es uno de los frameworks Javascript de moda que nos permite crear aplicaciones web estructuradas que se comuniquen con el servidor a través de una API.

En este post vamos a explicar cómo utilizar nuestra instalación WordPress para:

  • Servir una aplicación web hecha con angular.js
  • Gestionar nuestros usuarios y contenidos desde Wordpress
  • Servir los contenidos de WordPress a través de una API
  • Mostrar los contenidos servidos por la API en nuestra app angular

Muchas cosas, eh? Pues empezamosssss… ya! 😉

Preparando el terreno

Para crear esta app vamos a empezar creando una instalación nueva de WordPress. Para ellos vamos a utilizar el Hosting de SiteGround para crear una nueva instalación de WordPress en un subdominio rápidamente y empezar a montar nuestra app.

Nos vamos a cPanel y creamos un nuevo subdominio

subdominio-siteground

Una vez creado comprobamos la ruta donde estarán los archivos de nuestra nueva instalación (public_html/api-serveren nuestro caso)

gestion-subdominio

Con esto nos vamos a las instalaciones automáticas y elegimos WordPress

automatic-wordpress

Lanzamos la instalación…

install-now

dejamos que haga su magia…

in-progress

Y ya está!! Cuando termine ya tendremos disponible nuestro sitio en el subdominio elegido (http://api-server.pixelovers-test.com/ en nuestro caso)

site-on-line

Sirviendo una app angular desde WordPress

Para servir nuestra app tenemos que crear un child theme y utilizarlo para servir nuestros archivos.

Para ello, nos conectamos via FTP a nuestro host y localizamos la carpeta themes de nuestra instalación WordPress. Una vez localizada subimos una carpeta nueva (theme-angular-app en nuestro caso) con dos archivos: index.php y style.css

theme-angular-app

Con estos archivos en el servidor, deberiamos ser capaces de seleccionar el theme Angular App Theme desde el panel de Administración de WordPress.

angular-app-theme

Este nuevo theme servirá nuestro archivo index.php

hello-wordpress

Ahora vamos a servir un index.php que contenga una mini app de angular. Para ello añadimos un functions.php en el configuraremos nuestros wordpress para que desde el index.php podamos servir estas librerias (y las que necesitemos)

Con esto ya podemos servir nuestra primera angular app desde wordpress

mini-angular-app

Mostrando datos de WordPress en nuestra app angular

Para acceder a los datos de Wordpress desde nuestra app angular necesitamos servir estos datos a traves de una API. Para ello instalamos el plugin WordPress REST API (Version 2). Con este plugin activo podremos acceder a los datos de nuestro WordPress desde su API

Por ejemplo desde /wp-json/wp/v2/posts recibimos un JSON con la lista de los posts publicados

json-wordpress

Asi que con esto, ya podemos mejorar nuestra app angular para que acceda y muestra los datos de nuestro wordpress.

Creamos un js/scripts.js con el siguiente contenido

Creamos un template en partials/main.html para mostrar el listado de posts

Mejoramos el functions.php para que nuestro index.php incluya este nuevo archivo js/scripts.js y para crear un objeto global myLocalized (que podrá ser accedido desde angular ) donde guardaremos la ruta de los templates

Y voilá! Ya tenemos nuestra primera app angular mostrando datos de WordPress (listado de posts)

angular-app-wordpress-api

A partir de aqui podemos:

  • Añadir rutas a nuestra app angular para mostrar por ejemplo los detalles del post
  • Añadir campos customizados (con el plugin Advanced Custom Fields) y mostrarlos tambien en nuestra API (con el plugin ACF to REST API)

¿Qué os ha parecido este post? ¿Cual es vuestra experiencia trabajando con angular y WordPress?

Esperamos vuestros comentarios

  • Antonio

    Amigo necesito incrustar mi aplicacion desarrollada en angular a wordpress si pudes contactame lo antes posible para que hablemos