Cómo usar jQuery en Angular

A veces hay que usarlo

Bhargav Bachina

Sigue

Mar 2, 2020 – 3 min read

Foto de Greg Rakozy en Unsplash

Angular es un framework de javascript que nos ayuda a construir elaplicaciones frontales de nivel empresarial de una manera fácil y opinable. Por otro lado, jQuery es una pequeña pero rica en características poderosa biblioteca javascript que ayuda a manipular el DOM HTML con menos código javascript. Ahora usted tiene una pregunta que por qué diablos debemos usar jQuery con Angular y cuál es la necesidad de ella?

Hay algunas situaciones que te encuentras mientras que la construcción de aplicaciones Angular que es absolutamente necesario utilizar una biblioteca como jQuery para conseguir algo hecho. Uno de los ejemplos que se me ocurren es el de enviar el formulario a la web externa desde tu app Angular.

Imagina una situación en la que estás en la web construida con Angular y comprando algo. Tienes un enlace que te lleva a otra web para completar el pedido con todos los datos introducidos en esta web. Hay formas de implementar esto sin jQuery pero sólo estoy creando un escenario hipotético en el que podrías usar jQuery. En este post, vamos a ver cómo utilizar jQuery con Angular.

  • Qué es jQuery
  • Proyecto de ejemplo
  • jQuery con Angular
  • Resumen
  • Conclusión

jquery es una librería de javascript simple, pequeña pero rica en características que ayuda a manipular el DOM de HTML con menos javascript. Aquí está el sitio web oficial de jQuery se puede ir a través.

Vamos a hacer un proyecto simple para entender jQuery mejor para aquellos que no lo utilizan todavía. Aquí hay un simple formulario que toma el nombre y el apellido. Cuando hacemos clic en el botón de envío el nombre debe aparecer en la parte inferior del formulario.

Ejemplo de proyecto jQuery

Aquí está el código para lo anterior. Toda la lógica se pone dentro de la etiqueta script. Podemos consultar y establecer los elementos del DOM con jQuery basado en los ids, selectores CSS, etc. Por ejemplo, podemos consultar el nombre con $("#fname").val y establecerlo con esto $("#fn").val(firstName).

jQuery.html