¿En qué se diferencia AngularJS de jQuery?


388

Solo conozco una biblioteca js y esa es jQuery .
Pero mis otros codificadores en el grupo están cambiando AngularJS como su biblioteca predeterminada en un nuevo proyecto.

No se nada de eso. ¿Cómo es diferente de jQuery?
Ya tengo un conjunto de funciones realizadas para tareas similares en jQuery. ¿Puedo seguir usando cosas de jQuery con AngularJS?

Respuestas:


414
  1. Si bien Angular 1 era un marco, Angular 2 es una plataforma . ( ref )

Para los desarrolladores, Angular2 proporciona algunas características más allá de mostrar datos en pantalla. Por ejemplo, el uso de la herramienta angular2 cli puede ayudarlo a "precompilar" su código y generar el código javascript necesario ( sacudir el árbol ) para reducir el tamaño de descarga a 35Kish.

  1. Angular2 emulado Shadow DOM. ( ref )

Esto abre una puerta para la representación del servidor que puede abordar el problema de SEO y trabajar con Nativescript, etc. que no funcionan en los navegadores.

AngularJS es un marco . Tiene las siguientes características

  1. Enlace de datos bidireccional
  2. Patrón MVW (MVC-ish)
  3. Modelo
  4. Directiva personalizada (componentes reutilizables, marcado personalizado)
  5. RESTO-amigable
  6. Vinculación profunda (configure un enlace para cualquier página dinámica)
  7. Validación de formulario
  8. Comunicación del servidor
  9. Localización
  10. Inyección de dependencia
  11. Entorno de prueba completo (ambas unidades, e2e)

mira esta presentación y esta gran introducción

No olvides leer la guía oficial para desarrolladores

O aprende de estos increíbles videos tutoriales

Si quieres ver más videos tutoriales, mira esta publicación, Colección de los mejores 60+ tutoriales de AngularJS .

Puede usar jQuery con AngularJS sin ningún problema.

De hecho, AngularJS usa jQuery lite, que es una gran herramienta.

De preguntas frecuentes

¿Angular utiliza la biblioteca jQuery?

Sí, Angular puede usar jQuery si está presente en su aplicación cuando la aplicación se está iniciando. Si jQuery no está presente en su ruta de script, Angular recurre a su propia implementación del subconjunto de jQuery que llamamos jQLite.

Sin embargo, no intente usar jQuery para modificar el DOM en los controladores AngularJS, hágalo en sus directivas.

Actualizar:

Angular2 es lanzado. Aquí hay una gran lista de recursos para principiantes


8
¿Tengo que desarrollar la aplicación completa en Angular js o puedo usarla en pocas páginas y en pocos apges, uso jquery simple
Mirage

8
+1 Gran respuesta. Sin embargo, diría que Angular se acerca al patrón MVVM.
GFoley83

8
Estoy bastante seguro de que Angular es un MVW
iConnor

2
Durante varios años, estuvo cerca de MVC. Pero ahora refactorizando y mejorando la API, está más cerca de MVVM. En Angular $ scope, funciona como una VM (ver Modelo).
Invencible

14
Para cualquier persona que se pregunte en el futuro (como yo), MVW == Model-View-Whatever , como en " m odel- v iew- w hatever-works-for-you" . En otras palabras, MV * .
David Frye

40

Quiero agregar algo con respecto a la diferencia de AngularJS con jQuery desde la perspectiva de un desarrollador.

En AngularJS, debe tener una visión y un enfoque muy estructurados sobre lo que desea lograr. Apenas sigue una forma lineal para completar una tarea, sino que los intercambios entre varios objetos se encargan de las solicitudes y acciones, lo que, entonces, es necesario ya que angular es un marco basado en MVC . También requiere al menos un plano general de la aplicación finalizada, ya que la codificación depende en gran medida de cómo desea que se completen las interacciones.

jQuery es como una poesía libre , escribes líneas y mantienes algunas relaciones e ímpetu apropiados para que tu tarea se cumpla.

Sin embargo, en Angular JS, debe seguir algunas reglas, así como mantener el impulso y las relaciones adecuadas, tal vez se parezca más al soneto clásico de Spencer (un famoso poeta clásico) cuyo poema es estructural y está vinculado a muchas reglas.

En comparación con AngularJS, jQuery es más como una colección de códigos y funciones (que, como ya se mencionó, es excelente para la manipulación DOM y el logro de efectos rápidos), mientras que AngularJS es un marco real que le da al desarrollador la capacidad de construir una web empresarial -aplicación con muchos enlaces e intercambio de datos dentro de un enrutamiento y gestión magníficamente organizados.

Además, AngularJS no depende de jQuery para completar su tarea. Tiene dos características excelentes que no se encuentran en jQuery en ningún sentido:

1- Angular JS te enseña cómo CODIFICAR y lograr un objetivo, no solo lograr un objetivo de ninguna manera. Vale la pena mencionar que AngularJS utiliza completamente el núcleo y el corazón de Javascripts y allana el camino para que pueda incorporar en su aplicación, las técnicas como DI (inyección de dependencia). Para trabajar con angularJS debe (o debe) aprender técnicas más elevadas de codificación con Javascript.

2- Angular JS es totalmente independiente para manejar directivas y estructurar su aplicación; entonces podría simplemente afirmar que jQuery puede hacer lo mismo (independencia), pero, de hecho, AngularJS, como se menciona varias veces en las líneas anteriores, tiene independencia de la manera estructural más excelente posible basada en MVC.

Una última nota es que no hay guerra de nombres, ya que es muy perturbador ser parcial o subjetivo. La magnitud y grandeza de jQuery ha sido probada, pero sus usos y limitaciones (de cualquier marco o software) son las preocupaciones de la discusión y debates similares en torno.

Actualizar:

El uso de AngularJS es decisivo ya que es costoso en términos de implementación, pero constituye una base sólida para la futura expansión, transformación y mantenimiento de la aplicación. AngularJS es para el Nuevo Mundo de la Web. Está dirigido a la creación de aplicaciones que se caracterizan por su menor consumo de recursos (cargando solo los recursos necesarios del servidor), un tiempo de respuesta rápido y un alto grado de capacidad de mantenimiento y extensibilidad envueltos en un sistema estructurado.


"Para trabajar con angularJS, debe (o debe) aprender técnicas más elevadas de codificación con Javascript". ¿Puede darme ejemplos de lo que quiere decir ser técnicas elevadas?
antew

@MostafaTalebi, solo bromeaba, pero realmente no entendí esa parte "¿JavaScript es más un concepto?" ¿¿Qué significa esto?? ¿podrías explicar más? ehh hay de todos modos nos ponemos en contacto?
azerafati

Quiero decir que es un guión :)))
Mostafa Talebi

¡Mezclé una cosa! por ejemplo, usamos php para el lado del servidor y tomamos nuestro marco basado en el concepto MVC y en la plantilla que usamos javascript también usamos Angular js, así que aquí angular js MVC es inútil, ¿no?
Farhad

28

AngularJS: AngularJS es para desarrollar aplicaciones web pesadas. AngularJS puede usar jQuery si está presente en la aplicación web cuando la aplicación se está iniciando. Si no está presente en la ruta del script, AngularJS recurre a su propia implementación del subconjunto de jQuery.

JQuery: jQuery es una biblioteca de JavaScript pequeña, rápida y rica en funciones. Hace que cosas como el desplazamiento y la manipulación de documentos HTML, el manejo de eventos, la animación y Ajax sean mucho más simples. jQuery simplifica muchas de las cosas complicadas de JavaScript, como las llamadas AJAX y la manipulación DOM.

Lea más detalles aquí: angularjs-vs-jquery


20

Creo que este es un gráfico muy bueno que describe las diferencias en resumen. Un vistazo rápido muestra la mayoría de las diferencias.

ingrese la descripción de la imagen aquí

Una cosa que me gustaría agregar es que se puede hacer que AngularJS siga el patrón de diseño MVVM mientras que jQuery no sigue ninguno de los patrones estándar orientados a objetos.


12

Trabajan en diferentes niveles.

La forma más simple de ver la diferencia, desde una perspectiva de principiante es que jQuery es esencialmente un resumen de JavaScript, por lo que la forma en que diseñamos una página para JavaScript es más o menos como lo haremos para jQuery . Comience con el DOM y luego cree una capa de comportamiento encima de eso. No es así con Angular.Js . El proceso realmente comienza desde cero, por lo que el resultado final es la vista deseada.

Con jQuery haces manipulaciones dom, con Angular.Js creas aplicaciones web completas.


jQuery se creó para abstraer las diversas idiosincrasias del navegador y trabajar con el DOM sin tener que agregar verificaciones de IE6, etc. Con el tiempo, desarrolló una API agradable y robusta que nos permitió hacer muchas cosas, pero en esencia, está destinada a lidiar con el DOM, encontrar elementos, cambiar la interfaz de usuario, etc. Piense en ello como trabajando directamente con tuercas y tornillos.

Angular.Js se creó como una capa sobre jQuery , para agregar conceptos MVC a la ingeniería de front-end. En lugar de proporcionarle API para trabajar con DOM, Angular.Js le ofrece componentes personalizados, vinculantes de datos (similares a jQuery UI , pero declarativos en lugar de dispararse a través de JS) y mucho más. Piense que funciona a un nivel superior, con componentes que puede enganchar, en lugar de directamente a nivel de tuercas y tornillos.

Además , Angular.Js le brinda estructuras y conceptos que se aplican a varios proyectos, como controladores, servicios y directivas. jQuery en sí mismo se puede utilizar de varias maneras (miles de millones) para hacer lo mismo. Afortunadamente, eso es mucho menos con Angular.Js , lo que hace que sea más fácil entrar y salir de los proyectos. Ofrece una forma sensata para que varias personas contribuyan al mismo proyecto, sin tener que volver a aprender un sistema desde cero.


Una breve comparación puede ser esta:

jQuery

  • Puede ser utilizado fácilmente por aquellos que tienen un conocimiento adecuado sobre los selectores CSS
  • Es una biblioteca utilizada para manipulaciones DOM
  • No tiene nada que ver con modelos
  • Manipule fácilmente el contenido de una página web.
  • Aplicar estilos para que la interfaz de usuario sea más atractiva
  • Recorrido DOM fácil
  • Efectos y animación
  • Simple para hacer llamadas AJAX y
  • Utilidad de utilidades
  • no tiene una función de enlace bidireccional
  • se vuelve complejo y difícil de mantener cuando aumenta el tamaño de un proyecto
  • A veces tienes que escribir más código para lograr la misma funcionalidad que en Angular.Js

Angular.Js

  • Es un marco MVVM
  • Se utiliza para crear SPA (aplicaciones de página única)
  • Tiene características clave como enrutamiento, directivas, enlace de datos bidireccional, modelos, inyección de dependencia, pruebas unitarias, etc.
  • es modular
  • Mantenible, cuando el tamaño del proyecto aumenta
  • es rápido
  • Enlace bidireccional de datos REST amigable Patrón basado en MVC
  • Vinculación profunda
  • Templar
  • Validación de formulario incorporado
  • Inyección de dependencia
  • Localización
  • Entorno de prueba completo
  • Comunicación del servidor

Y mucho más

ingrese la descripción de la imagen aquí

Piensa que esto ayuda.

Más se puede encontrar -


3

Jquery: -

jQuery is a lightweight and feature-rich JavaScript Library that helps web developers
by simplifying the usage of client-side scripting for web applications using JavaScript.
It extensively simplifies using JavaScript on a website and its lightweight as well as fast.

So, using jQuery, we can:

easily manipulate the contents of a webpage
apply styles to make UI more attractive
easy DOM traversal
effects and animation
simple to make AJAX calls and
utilities and much more 

AngularJS: -

AngularJS is a product by none other the Search Engine Giant Google and its an open source
MVC-based framework(considered to be the best and only next generation framework). AngularJS
is a great tool for building highly rich client-side web applications.

As being a framework, it dictates us to follow some rules and a structured approach. Its
not just a JavaScript library but a framework that is perfectly designed (framework tools
are designed to work together in a truly interconnected way).

In comparison of features jQuery Vs AngularJS, AngularJS simply offers more features:

Two-Way data binding
REST friendly
MVC-based Pattern
Deep Linking
Template
Form Validation
Dependency Injection
Localization
Full Testing Environment
Server Communication
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.