Usando jQuery en Angular

En las aplicaciones que hemos creado hasta ahora hemos instalado jQuery y bootstrap. Apenas hemos usado bootstrap para darle un mínimo de presentación a las vistas, y no hemos usado jQuery para nada. Sabemos que está ahí, y que es alcanzable por nuestra aplicación, porque hemos instalado el JavaScript de bootstrap y, si no tuviéramos jQuery, nos daría errores de ejecución. Pero eso es todo.

En este artículo vamos a aprender a emplear jQuery en nuestras aplicaciones Angular. No es que nos vaya a hacer falta siempre. Sin embargo, está bien saber que lo tenemos ahí, y que podemos recurrir a él si lo necesitamos.

Tampoco es que vayamos a hacer nada especialmente espectacular. Simplemente, para muestra un botón. Sin embargo, este pequeño botón nos servirá para aprender a hacer que Angular y jQuery se entiendan, y poder extrapolar lo que aquí aprendamos para cualquier otra funcionalidad que necesitemos.

Después de todo, jQuery es una herramienta que siempre nos ha facilitado el trabajo con JavaScript, y usar Angular no hace que podamos ni debamos renunciar a ella.

INSTALANDO jQuery

Nosotros ya sabemos como instalar jQuery en nuestra aplicación con npm. Lo hemos venido haciendo desde el principio del curso. Existe otra manera de instalar jQuery en nuestra aplicación Angular. Es, simplemente, modificar el archivo index.html para añadir el CDN de jQuery. De este modo, no tenemos que instalarlo en la propia aplicación, si no que, cuando se cargue esta en el navegador, se lo traerá desde el servidor CDN elegido.

Personalmente, no me gusta esta manera de hacerlo. Prefiero incluirlo en la aplicación, como hemos venido haciendo hasta ahora. ¿Por qué?. Bueno, podría darte varias razones, como el hecho de que, si falla el CDN, tu aplicación dejará de funcionar. Además, implica más peticiones a servicios externos, con más carga de trabajo. Estás dependiendo de un servicio externo y, aunque esto es una práctica muy habitual en el desarrollo de aplicaciones web, en el caso de herramientas tan habituales soy partidario de tenerlas en mi propia aplicación. Es, tal vez, una cuestión de criterio personal. En este curso no emplearé ningún CDN si puedo evitarlo y, desde luego, no lo voy a emplear para jQuery.

USANDO jQuery

Como ya tenemos jQuery en nuestra aplicación, vamos a emplearlo para dos ejemplos interesantes. Empezaremos manipulando el título de la página. Ya sabes, ese literal que aparece en la pestaña del navegador. Por defecto, en las aplicaciones Angular es el nombre de la aplicación. En el caso del CRUD que hicimos para los socios en el que empleábamos un servicio, el literal era AngServices. No importa que enlace uses, o por dónde te muevas. Ahí arriba siempre pone lo mismo. Esto es muy mala práctica, tanto visualmente para el usuario, como de cara al SEO. Vamos a hacer que el literal de la pestaña cambie, según donde estemos. Cuando se cargue la página, o pulsemos el enlace de inicio, pondrá Inicio. Cuando pulsemos el enlace del CRUD de socios, pondrá Socios.

Para lograr esto tenemos que tocar en la lógica de dos componentes: el HomeComponent (home.component.ts) y el MembersMasterComponent (members-master.component.ts). Lo primero que tenemos que hacer es declarar los prefijos con los que podemos trabajar con jQuery ($ y jQuery). Para ello, en los scripts mencionados, y debajo de las importaciones que haya al principio, incluiremos las dos líneas siguientes:

declare var jQuery: any;
declare var $: any;

En Angular 5, con el jQuery instalado con npm, la experiencia nos enseña que esto puede omitirse y, en principio, todo funcionará igual de bien. Sin embargo, no nos cuesta nada incluirlas, y así nos aseguramos de que se reconozca jQuery.

A continuación, dentro del cuerpo del método ngOnInit() del home.component.ts incluiremos la siguiente línea:

$(document).prop('title', 'Inicio');

En el mismo lugar, pero en el members-master.component.ts, incluiremos la siguiente línea:

$(document).prop('title', 'Socios');

Y ya está. Ahora arrancamos nuestra aplicación, y vemos lo que aparece en la pestaña del navegador según pulsemos los enlaces.

Lo siguiente que vamos a hacer es aplicar la clase active de bootstrap al enlace activo de la barra de menús. Hasta ahora, cuando pulsamos un enlace se carga la correspondiente vista, pero no queda marcado como activo el enlace, con lo que estamos perdiendo funcionalidad en la barra de navegación. Para ello empezamos por modificar ligeramente el elemento <li> de los enlaces. Actualemente los tenemos así:

Ahora vamos a asignarles un identificador, para poder referenciarlos individualmente, y también una clase, para poder referenciarlos globalmente. Nos quedan así:

Nos vamos al home.component.ts y, dentro del cuerpo de ngOnInit(), debajo de la línea que pusimos antes para el título de la pestaña, añadimos lo siguiente:

$('.menuLink').removeClass('active');
$('#HomeMenuLink').addClass('active');

En el mismo sitio en members-master.component.ts añadimos las siguientes líneas:

$('.menuLink').removeClass('active');
$('#MembersMenuLink').addClass('active');

Y ya está. Si ahora arrancas de nuevo tu aplicación y pulsas los enlaces de la barra superior, verás como quedan marcados como activos.

CONCLUYENDO

Como has visto, emplear jQuery en Angular es extremadamente fácil. Cierto que estos ejemplos son muy simples, pero perfectamente ilustrativos de lo que pretendemos. En otros casos recurriremos a ejemplos más elaborados, incluyendo plugins de jQuery, pero la forma de trabajar será siempre la misma.

   

Deja un comentario