Llega un momento en la vida de todo desarrollador WordPress en la que se piden requisitos especiales en un proyecto que probablemente nunca antes hayas tenido la oportunidad de hacer. En nuestro caso, uno de los requisitos de una aplicación en WordPress era incluir una aplicación AngularJS para poder ser manejada desde una sección de la propia página web.
Para esto debíamos mantener el header y el footer junto a la aplicación Angular. De esta forma conseguimos que el usuario se mantenga dentro del sitio sin cambiar de dominio o el estilo de la web debido al “cambio de aplicación”.
¿Qué necesito para poder incluir mi aplicación AngularJS en WordPress?
Lo primero que necesitaremos, obviamente, es una aplicación AngularJS que queramos incluir en nuestro WordPress. Esta aplicación deberá estar alojada en un lugar público al que podamos acceder desde nuestro dominio, en nuestro caso utilizamos Amazon S3 para alojar nuestra aplicación Angular.
Deberemos tener localizados 4 ficheros claves de nuestra aplicación Angular, los ficheros de dependencias externas (vendor.js y vendor.css normalmente) y los ficheros de nuestra aplicación (app.js y app.css normalmente). Estos ficheros se obtienen después de hacer el build de nuestra aplicación.
Y lo segundo que necesitaremos es una aplicación WordPress donde incluiremos la aplicación Angular.
¿Cómo incluir la aplicación en WordPress?
Con el fin de poder incrustar nuestra aplicación en varias secciones (en el caso de que lo necesitaramos) crearemos una plantilla (angularjs-register.php) para utilizarla en páginas de WordPress, para esto necesitaremos añadir la siguiente línea al inicio del fichero:
[php]<?php /* Template Name: ANGULARJS Register */ ?><?php get_header(); ?>
<?php get_footer(); ?>
[/php]
Como podéis ver, también he incluido el header y el footer de WordPress para poder cargar los scripts y el diseño de estas dos partes de la web, así seguiremos teniendo la misma visual que en el resto de la web, a excepción del contenido que es donde cargaremos la aplicación AngularJS.
Necesitaremos incluir la directiva ng-app, el contenido dinámico de WordPress y el controlador que queremos utilizar para esta sección, que será un formulario de registro en nuestra aplicación.
[php] <main role="main" ng-app="belikeFront"> <!– Aquí utilizamos el módulo de nuestra app –><?php if (have_posts()): while (have_posts()) : the_post(); ?>
<article id="post-<?php the_ID(); ?>">
<?php the_content(); // Contenido dinámico de WordPress ?>
</article>
<!– A continuación incluiremos el controlador que queremos utilizar de nuestra aplicación –>
<div ng-controller="RegisterController as rVm" ng-include="’app/register/register.html’"></div>
<?php endwhile; endif; ?>
</main>
[/php]
De esta forma ya tendremos lista nuestra plantilla que cargará nuestra aplicación con el controlador del formulario de Registro:
[php] <?php /* Template Name: ANGULARJS Register */ ?><?php get_header(); ?>
<main role="main" ng-app="belikeFront"> <!– Aquí utilizamos el módulo de nuestra app –>
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<article id="post-<?php the_ID(); ?>">
<?php the_content(); // Contenido dinámico de WordPress ?>
</article>
<!– A continuación incluiremos el controlador que queremos utilizar de nuestra aplicación –>
<div ng-controller="RegisterController as rVm" ng-include="’app/register/register.html’"></div>
<?php endwhile; endif; ?>
</main>
<?php get_footer(); ?>
[/php]Ahora necesitaremos incluir nuestros scripts y estilos para que se pueda cargar nuestra aplicación y se visualice correctamente. Para ello añadiremos las siguiente acciones a nuestro fichero functions.php, donde RESOURCES_URL es la url base donde está alojada la aplicación Angular, VENDOR_JS es el nombre del fichero vendor.js y APP_JS es el nombre del fichero app.js:
[php] <?php add_action(‘template_redirect’, ‘belike_angular_footer_scripts’);
add_action(‘template_redirect’, ‘belike_angular_styles’);
function belike_angular_footer_scripts() {
if(is_page_template( ‘angularjs-register.php’ )) {
wp_register_script(‘angularjsvendor’, RESOURCES_URL . ‘/scripts/’ . VENDOR_JS, array(), ‘1.1.0’, true);
wp_register_script(‘angularjsapp’, RESOURCES_URL . ‘/scripts/’ . APP_JS, array(‘angularjsvendor’), ‘1.1.0’, true);
wp_enqueue_script(‘angularjsapp’);
}
}
function belike_angular_styles() {
if(is_page_template( ‘angularjs-register.php’ )) {
wp_register_style(‘angularcssvendor’, RESOURCES_URL . ‘/styles/’ . VENDOR_CSS, array(), ‘1.1.0’);
wp_register_style(‘angularcssapp’, RESOURCES_URL . ‘/styles/’ . APP_CSS, array(‘angularcssvendor’), ‘1.1.0’);
wp_enqueue_style(‘angularcssapp’);
}
}
?>
[/php]
Como podéis observar, sólo incluiremos estos estilos y scripts cuando se utilice la plantilla que hemos creado anteriormente (angularjs-register.php), así evitaremos sobrecargar el resto de secciones de nuestra página con estilos y scripts.
Por último lo único que faltaría sería crear una página desde la administración de Wordpress donde seleccionaremos la plantilla que hemos creado para poder acceder a nuestra aplicación de AngularJS desde el propio WordPress.
¡Ya tenemos nuestra aplicación funcionando perfectamente en nuestro WordPress! Puedes consultarnos dudas, problemas o sugerencias que te hayan podido surgir al poner esto en práctica. ¡Espero que sigas leyendo los próximos artículos para conocer más sobre el mundo de AngularJS y WordPress!
Leave a Reply