X

Monta tu (Single Page) App con Angular y WordPress

 

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

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

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

Lanzamos la instalación…

dejamos que haga su magia…

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

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 Name:   Angular App Theme
 Theme URI:    http://api-server.pixelovers-test.com
 Description:  Angular App  child theme, based on twentysixteen
 Author:       JuanMa Garrido
 Author URI:   http://pixelovers.com
 Template:     twentysixteen
 Version:      1.0.0
*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS Demo Theme</title>
</head>
<body>
    <h1>Hello from WordPress!!</h1>
</body>
</html>

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

Este nuevo theme servirá nuestro archivo index.php

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)

<?php
function my_scripts() {
 
 wp_enqueue_script(
 'angularjs','https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js'
 );
 wp_enqueue_script(
 'angularjs-route','https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js'
 );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
<!DOCTYPE html>
<html ng-app>
<head>
    <base href="/jsonapi/">
    <title>AngularJS Demo Theme</title>
    <?php wp_head(); ?>
</head>
<body>

    <header>
        <h1>
            <a href="<?php echo site_url(); ?>">AngularJS Demo Theme</a>
        </h1>
    </header>

    <div>
        <input type="text" ng-model="name">

        <p>Hello, {{name}}!</p>
    </div>

    <footer>
        &copy; <?php echo date( 'Y' ); ?>
    </footer>

</body>
</html>

Con esto ya podemos servir nuestra primera angular app desde wordpress

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

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

angular.module('app', ['ngRoute'])
.config(function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);

    $routeProvider
    .when('/', {
        templateUrl: myLocalized.partials + 'main.html',
        controller: 'Main'
    });
})
.controller('Main', function($scope, $http, $routeParams) {
    $http.get('/wp-json/wp/v2/posts/').success(function(res){
        $scope.posts = res;
    });
});

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

<ul>
   <li ng-repeat="post in posts">
     <a href="{{ post.id }}">
       <h2>{{ post.title.rendered }}</h2>
     </a>
   </li>
</ul>

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

<?php
function my_scripts() {

    wp_enqueue_script(
        'angularjs','https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js'
    );
    wp_enqueue_script(
        'angularjs-route','https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js'
    );

    wp_enqueue_script(
        'my-scripts',
        get_stylesheet_directory_uri() . '/js/scripts.js',
        array( 'angularjs', 'angularjs-route'),
        mt_rand()
    );

    wp_localize_script(
        'my-scripts',
        'myLocalized',
        array(
            'partials' => trailingslashit( get_stylesheet_directory_uri() ) . 'partials/'
            )
    );

}

add_action( 'wp_enqueue_scripts', 'my_scripts' );

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

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

Post Anterior
Post Siguiente
JuanMa Garrido: Senior Frontend Developer y Frontend Trainer, #Javascript specialist, co-founder de anotherWaves, administrador de pixelovers, autor de Apuntes de Javascript 

View Comments (3)

  • Hola, ¿las carpetas: js/scripts.js y partials/main.html se crean en la carpeta theme-angular-app?

    Muchas gracias

    • Hola Rocio!
      Si, así es. Toda los archivos de nuestra aplicación angular se van a servir desde la carpeta theme-angular-app

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