Le presentamos una traducción de un artículo de Aditya Modi publicado en blog.bitsrc.io. Este artículo trata sobre el uso de jQuery en aplicaciones angulares.
Con poca frecuencia, tomo algo con cautela. Sin embargo, esta vez la precaución no le hará daño, porque integrar jQuery en Angular no es tan simple.
¿Por qué, de hecho, escribí este artículo? A veces, jQuery es realmente necesario para el desarrollo en Angular, sin embargo, estos marcos de JavaScript rara vez se asocian con esta biblioteca. Angular es responsable de representar y administrar el DOM, y si realiza cambios con jQuery, corre el riesgo de obtener un resultado extremadamente inesperado.
Consejo : Con
Bit , puede compartir rápidamente componentes Angulares y reutilizarlos en sus aplicaciones. Esto permitirá que usted y su equipo pasen menos tiempo creando nuevas aplicaciones. Pruébalo
Sea como fuere, en algunas situaciones, la interferencia en el marco es necesaria, justificada, puede ser una salida real. Estos casos no están cubiertos en mi blog, sin embargo, tal vez hablaré de ellos en mis próximos artículos. Ahora déjame mostrarte cómo agregar la biblioteca jQuery a Angular. En este tutorial, usaré VS Code. Puede elegir otro editor de código o descargar
Visual Studio Code para Windows, Linux y macOS .
Integración JQuery en Angular
En primer lugar, necesitamos crear una aplicación angular usando el
ng new comando
ng new . Luego, con la ayuda del
cd a la carpeta donde se instalará la biblioteca jQuery a través de npm. Llamemos a la aplicación resultante
angularmeetsjquery .
ng new angularmeetsjquery cd angularmeetsjquery npm install jquery — save
Suena genial, pero jQuery purist preferiría descargarlo a través de jQuery CDN en lugar de a través de npm. CDN es una forma alternativa de agregar una biblioteca jQuery a una aplicación angular, pero prefiero usar el método npm. Si observa
https://jquery.com/download/ , encontrará bibliotecas jQuery CDN y otras redes CDN de Google, Microsoft, CDNJS y jsDelivr. Recomendaría la última versión oficial de CDN, ya que admite el mecanismo SRI (Subresource Integrity).
Para usar jQuery CDN, simplemente cree un enlace al archivo en la etiqueta del
script directamente desde el dominio jQuery CDN. El código con la función de integridad de recursos secundarios se verá así. (Como puede ver, estoy usando la biblioteca jQuery versión 3.3.1.)
<script src=”https:
El script se puede copiar del recurso code.jquery.com. A continuación, debe insertarlo en el archivo
index.html al final de la etiqueta <
body >.
Hacer que la biblioteca jQuery sea global
El archivo
jquery.min.js , ubicado en la carpeta dis del módulo jQuery, no es público (el nombre correcto de la carpeta es dist. -
Ed. Aprox. ). Para hacer que la biblioteca jQuery sea global, vaya al
.angular-cli.json y escriba un enlace a la ruta del archivo jQuery en ella.
Al transferir un enlace a una ruta de archivo dentro de una aplicación Angular, la carpeta raíz es src. Sin embargo, la biblioteca jQuery está dentro del directorio
node_modules . Por lo tanto, debe determinar la ruta correcta al
.angular-cli.json .
../node_modules/jquery/dist/jquery.min.js
Para asegurarse de que la ruta sea correcta, vaya al
node_modules→jquery→dist→jquery.min.js . Aquí puede ver la ruta especificada, lo que significa que la biblioteca jQuery se ha agregado globalmente para esta aplicación. No espere que la página localhost: 4200 en su navegador se vuelva a cargar, porque el archivo se encuentra fuera de la carpeta src. Para que aparezcan cambios en la aplicación, deberá reiniciarla.
ng serve –open
Usando jQuery en una aplicación angular
Para comenzar a usar la biblioteca jQuery con el marco Angular, debe ir a los componentes de la aplicación. Le mostraré cómo estas dos tecnologías pueden funcionar juntas con un simple elemento HTML de
button . Pero primero, elimine todas las líneas de código en el archivo
app.component.html y agregue el elemento HTML del
button .
<button> Click me </button>
La página se volverá a cargar automáticamente, luego aparecerá un botón.
Necesitamos establecer el carácter para jQuery en el archivo
app.component.ts .
declare var $: any;
Luego inserte el gancho de ciclo de vida
ngOnInit . Para hacer esto, puede importar OnInit desde Angular Core.
import { Component, OnInit} from '@angular/core';
Añadir
ngOnInit .
export class AppComponent implements OnInit {
Independientemente de la disponibilidad del DOM, puede escribir código jQuery dentro del método
ngOnInit , como se hace con el desarrollo estándar de aplicaciones web. Para probar el botón creado en
app.component.html , agregue el evento
button.click al método
button.click .
export class AppComponent implements OnInit { ngOnInit(){ $('button').click(function(){ alert('Wass up!'); }); } }
Si hace clic en el botón, aparecerá "Wass Up".
Conclusión
Agregar jQuery a Angular y usar este paquete es una idea dudosa.
Sí, a primera vista, el método parece simple. Sin embargo, como dije al comienzo del artículo, no importa cuán tentador pueda parecer el uso conjunto de estas dos tecnologías, la idea suele ser mala. En las aplicaciones angulares del mundo real, debe lidiar con cosas mucho más complejas que el elemento de
button HTML relacionado con el evento. Mi consejo para todos los
que trabajan con Angular y buscan una oportunidad para incrustar jQuery en su código TypeScript: si no es necesario, no lo hagan. ¡Les deseo experimentos exitosos en el campo de jQuery y Angular!