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

Creando Aplicaciones Single Page con WordPress y Angular.js

Scroll to top
Read Time: 8 mins

Spanish (Español) translation by Magdiel Cordero (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Trabajar con el framework de Angular.js es rápido y gratificante y combinado con WordPress se puede crear un agradable SPA(Single-page Application) en un corto lapso de tiempo. Con todos los controles y plugins del CMS que WordPress ofrece, se convierte en un atajo interesante.

Configurando el tema

Vamos a empezar creando un nuevo tema usando el tema _tk de boilerplate. Se trata de una aplicación del tema _s subrayado de Automattic pero con Bootstrap de Twitter implementado. 

Toma el tema en GitHub y coloque los archivos en su directorio de themes:

Ahora que ya tenemos el tema de inicial _tk, necesitaremos los paquetes npm, angular y angular-route dentro de nuestro directorio de theme (estamos utilizando el nombre de angular-bootstrap).

  • Debe inicializar npm dentro del directorio themes con npm init para crear el archivo package.json, el cual npm utiliza para administrar proyectos.
  • Mediante el uso de --save en nuestro comando npm install angular angular-route --save, le estamos diciendo a npm que agregue los módulos como dependencias a nuestro proyecto.
  • En el futuro, si tenemos que compartir este proyecto con otro desarrollador, sólo necesitan ejecutar npm install en el mismo directorio donde se encuentre el package.json con el fin de obtener los paquetes.

Ahora tendrás los paquetes en el directorio node_modules dentro de tu directorio theme. Echa un vistazo en el directorio y podrás ver varios archivos js. Vamos a usar angular.min.js para el desarrollo

Inicializando Angular

Para incluir angular.min.js en WordPress tenemos que modificar el archivo functions.php para que podamos poner los scripts en WordPress.

En functions.php, encuentra la función de _tk_scripts() y añade lo siguiente al final de la función:

Usted también tendrá que crear  js/scripts.js—para esto Ahora crearemos un archivo en blanco.

Ahora actualiza tu tema en un navegador y podrás ver en herramientas para desarrolladores que angular.min.js ahora esta incluido .

Usando Partials

Angular.js tiene un gran sistema para actualizar sólo una parte parcial de código HTML. Para sacar provecho de esto y el módulo de angular-router, necesitamos crear un directorio dentro del tema llamado partials.

Dentro del directorio de partials, cree un archivo denominado main.html para pruebas y añadir cualquier HTML interno.

Localizar la ruta de Partials en WordPress

Para que Angular pueda cargar los parciales, debemos proporcionar una dirección URL completa. He tenido algunos problemas utilizando el método de get_stylesheet_directory_uri(), pero pruébalo por ti mismo. Si no funciona, utilice la dirección URL completa.

Agregue lo siguiente a la función _tk_scripts abajo donde añadiste la angularjs y las líneas angular-route desde el último paso:

Si esto no funciona (me sucedió cuando lo escribí para mi), escriba en la URL, por ejemplo.

Habilitando WP-API

Para que Angular trabaje con WordPress, tenemos que habilitar el Plugin REST WP-API. Esto es simple, ya que es sólo la instalación de un plugin.

Descargue e instale el plugin desde git y ejecute lo siguiente en su directorio de plugins:

Luego active el plugin en el panel de wp-admin. Usted podrá ver un JSON como resultado en  wordpress.com/wp-json una vez que se haya habilitado.

Construcción de rutas

Las Rutas componen las páginas específicas de tu blog. Ahora podemos definir una para nuestro main.html parcial — y configurarlo para que se muestre en la página de índice de nuestro WordPress.

Primero garantice que la aplicación de Angular.js se define mediante el atributo ng-app y en header.php haga lo siguiente:

Aquí pedimos la aplicación wp con el atributo de ng-app. También hemos creado la etiqueta base para que Angular pueda encontrar el JSON que hemos habilitado en WP-API.

Agregue lo siguiente a js/scripts.js:

Ahora dentro de partials/main.html añada esto:

Y finalmente dentro de index.php, directamente después de get_header.php(), agregue el atributo Angular ng-view de una etiqueta div.

Actualizar el índice de tu WordPress, y ahora se mostrará una lista de sus entradas de blog en la página de inicio.

Esto es debido al ng-controller que invoca el controlador Main desde scripts.js y el atributo de ng-view especifica donde se debe renderizar Angular.

Mostrando un Post por Slug

Ahora vamos a agregar la ruta para mostrar un blog de WordPress a través de la URL de slug.

Abra js/scripts.js y ajuste el archivo para que se lea como sigue:

Agregando el controlador Content, podemos especificar la URI $http.get para los mensajes JSON y especificar a slug como el parámetro de filtro.

Para crear esto utilizamos el siguiente código: $http.get ('wp-json/posts/?filter[name] =' + $routeParams.slug).

Nota: Para obtener la ruta de trabajo /:slug, se debe especificar /%postname%/ como tu estructura permalink en el wp-admin.

Asegúrese de establecer content.html con lo siguiente:

Ahora si actualiza la página, usted podrá navegar a los post de tu blog mediante los enlaces en la lista que hiciste en el paso anterior.

Usando servicios de Angular en WordPress

Hasta ahora hemos visto cómo crear rutas y empezar a trabajar con la API de wp-json. Antes de empezar a escribir cualquier lógica, necesitamos un lugar para ir, y eso está dentro de un Angular service(en este ejemplo utilizamos un servicio Factory).

Crea un nuevo archivo  js/services.js  y agregue el código siguiente para recuperar post y categorías:

Esta es la configuración básica de un factory, donde tenemos dos funciones internas _setTitle y _setArchivePage. Estos métodos se llaman de getPosts y getCategories para actualizar el título de la página actual y también uno interno para saber que número de página estamos mirando.

Necesitamos comenzar a usar el módulo de ngSanitize para el análisis de entradas a nuestro servicio. Instalar este con npm así dentro del directorio de tu tema:

El ThemeService es solo un objeto básico de JavaScript que realiza una búsqueda de categoría a través de $http.get, y como el método getPosts. Ahora haremos que nuestro controlador este pendiente de este servicio. Abra  scripts.js y modifique el controlador para que este dependa de ThemeService.

Tampoco te olvides de activar el módulo angular-sanitize dentro de scripts.js en la primera línea con: 

Finalmente usted tendrá que asegurarse de que js/services.js esta empotrado dentro de WordPress así también el módulo angular-sanitize. Modifique el archivo functions.php y anexe lo siguiente antes de la llamada wp_localize_script:

Ahora necesitamos actualizar el main.html parcial para mostrar estas categorías que están siendo proporcionados por el ThemeService.

Ahora podrás ver tus post y categorías que aparecen en tu página de inicio por ng-view mediante un servicio factory de Angular. La ventaja de esto es que todos los componentes tendrán los datos a su disposición. Así que ahora podemos compartir el objeto categorías entre todos nuestros controladores en nuestras rutas.

Cosas para retomar más adelante

Ahora que tenemos un servicio para nuestro tema, podemos continuar desarrollando la capa de datos e incorporar Bootstrap dentro del sitio HTML.

Las posibilidades ahora que Angular está configurado en su tema son realmente infinitas, y al revisar el repositorio suministrado, tendrás un punto de partida rápido para la creación de las aplicaciones con Angular y Bootstrap, manos a la obra creemos una aplicacion single-page de WordPress. 

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

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
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.