Principalmente he estado usando la biblioteca jQuery y acabo de comenzar a usar AngularJS. He leído algunos tutoriales sobre cómo usar Angular, pero no tengo claro por qué o cuándo usarlo, o qué beneficios puedo encontrar en comparación con solo usar jQuery.

Me parece que Angular te hace pensar en MVC, lo que quizás significa que ves tu página web como una combinación de plantilla + datos. Usas {{data bindings}}siempre que crees que tendrías datos dinámicos. Angular le proporcionará un controlador $ scope, que puede completar de forma estática o mediante llamadas al servidor web. Esto parece característicamente similar a la forma JSP de diseñar páginas web. ¿Necesito Angular para esto?

Para una simple manipulación DOM, que no implica la manipulación de datos (por ejemplo: cambios de color al pasar el mouse, ocultar / mostrar elementos al hacer clic), jQuery o vanilla JS es suficiente y más limpio. Esto supone que el modelo en mvc de angular es cualquier cosa que refleje datos en la página y, por lo tanto, las propiedades CSS como cambios de color, visualización / ocultación, etc. no afectan el modelo . ¿Angular tiene alguna ventaja sobre jQuery o vanilla JS para manipulaciones DOM?

¿Qué puede hacer Angular que lo haga útil para el desarrollo en comparación con lo que jQuery puede hacer junto con los complementos?

El enlace de datos

Usted va haciendo su página web y sigue poniendo {{enlaces de datos}} cada vez que siente que tendría datos dinámicos. Angular le proporcionará un controlador $ scope, que puede completar (estáticamente o mediante llamadas al servidor web).

Esta es una buena comprensión del enlace de datos. Creo que lo has entendido.

Manipulación DOM

Para una simple manipulación DOM, que no implica la manipulación de datos (por ejemplo: cambios de color al pasar el mouse, ocultar / mostrar elementos al hacer clic), jQuery o js de la vieja escuela son suficientes y más limpios. Esto supone que el modelo en mvc de angular es cualquier cosa que refleje datos en la página y, por lo tanto, las propiedades css como el color, mostrar / ocultar, etc. los cambios no afectan el modelo.

Puedo ver su punto aquí acerca de que la manipulación DOM "simple" es más limpia, pero solo en raras ocasiones y tendría que ser realmente "simple". Creo que la manipulación DOM es una de las áreas, al igual que el enlace de datos, donde Angular realmente brilla. Comprender esto también lo ayudará a ver cómo Angular considera sus puntos de vista.

Comenzaré comparando la forma Angular con un enfoque vanilla js para la manipulación DOM. Tradicionalmente, pensamos que HTML no "hace" nada y lo escribimos como tal. Entonces, los js en línea, como "onclick", etc. son una mala práctica porque ponen el "hacer" en el contexto de HTML, que no "hace". Angular voltea ese concepto sobre su cabeza. Mientras escribe su vista, piensa que HTML puede "hacer" muchas cosas. Esta capacidad se abstrae en directivas angulares, pero si ya existen o si las ha escrito, no tiene que considerar "cómo" se hace, simplemente use la potencia disponible en este HTML "aumentado" que angular le permite usar. Esto también significa que TODA su lógica de vista está realmente contenida en la vista, no en tus archivos javascript. Nuevamente, el razonamiento es que las directivas escritas en sus archivos javascript podrían considerarse que aumentan la capacidad de HTML, por lo que deja que el DOM se preocupe por manipularse a sí mismo (por así decirlo). Lo demostraré con un simple ejemplo.

Este es el marcado que queremos usar. Le di un nombre intuitivo.

<div rotate-on-click="45"></div>

Primero, me gustaría comentar que si le hemos dado a nuestro HTML esta funcionalidad a través de una Directiva Angular personalizada, ya hemos terminado . Eso es un soplo de aire fresco. Más sobre esto en un momento.

Implementación con jQuery

demostración en vivo aquí (clic).

function rotate(deg, elem) {
  $(elem).css({
    webkitTransform: 'rotate('+deg+'deg)', 
    mozTransform: 'rotate('+deg+'deg)', 
    msTransform: 'rotate('+deg+'deg)', 
    oTransform: 'rotate('+deg+'deg)', 
    transform: 'rotate('+deg+'deg)'    
  });
}

function addRotateOnClick($elems) {
  $elems.each(function(i, elem) {
    var deg = 0;
    $(elem).click(function() {
      deg+= parseInt($(this).attr('rotate-on-click'), 10);
      rotate(deg, this);
    });
  });
}

addRotateOnClick($('[rotate-on-click]'));

Implementación con Angular

demostración en vivo aquí (clic).

app.directive('rotateOnClick', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var deg = 0;
      element.bind('click', function() {
        deg+= parseInt(attrs.rotateOnClick, 10);
        element.css({
          webkitTransform: 'rotate('+deg+'deg)', 
          mozTransform: 'rotate('+deg+'deg)', 
          msTransform: 'rotate('+deg+'deg)', 
          oTransform: 'rotate('+deg+'deg)', 
          transform: 'rotate('+deg+'deg)'    
        });
      });
    }
  };
});

¡Bastante ligero, MUY limpio y eso es solo una simple manipulación! En mi opinión, el enfoque angular gana en todos los aspectos, especialmente cómo la funcionalidad se abstrae y la manipulación de dom se declara en el DOM. La funcionalidad se conecta al elemento a través de un atributo html, por lo que no es necesario consultar el DOM a través de un selector, y tenemos dos buenos cierres: uno para la fábrica de directivas donde las variables se comparten en todos los usos de la directiva , y un cierre por cada uso de la directiva en la linkfunción (o compilefunción).

El enlace de datos bidireccional y las directivas para la manipulación DOM son solo el comienzo de lo que hace que Angular sea increíble. Angular promueve que todo el código sea modular, reutilizable y fácilmente comprobable y también incluye un sistema de enrutamiento de aplicaciones de una sola página. Es importante tener en cuenta que jQuery es una biblioteca de métodos de conveniencia / navegador cruzados comúnmente necesarios, pero Angular es un marco completo para crear aplicaciones de una sola página. El script angular en realidad incluye su propia versión "lite" de jQuery para que algunos de los métodos más esenciales estén disponibles. Por lo tanto, podría argumentar que usar Angular IS con jQuery (a la ligera), pero Angular proporciona mucha más "magia" para ayudarlo en el proceso de creación de aplicaciones.

Esta es una gran publicación para obtener más información relacionada: ¿Cómo “pienso en AngularJS” si tengo antecedentes de jQuery?

Diferencias generales

Los puntos anteriores están dirigidos a las preocupaciones específicas del OP. También daré una visión general de las otras diferencias importantes. Sugiero hacer lecturas adicionales sobre cada tema también.

Angular y jQuery no se pueden comparar razonablemente.

Angular es un marco, jQuery es una biblioteca. Los marcos tienen su lugar y las bibliotecas tienen su lugar. Sin embargo, no hay duda de que un buen marco tiene más poder para escribir una aplicación que una biblioteca. Ese es exactamente el punto de un marco. Puede escribir su código en JS simple, o puede agregar una biblioteca de funciones comunes, o puede agregar un marco para reducir drásticamente el código que necesita para lograr la mayoría de las cosas. Por lo tanto, una pregunta más apropiada es:

¿Por qué usar un marco?

Los buenos marcos pueden ayudar a diseñar su código para que sea modular (por lo tanto, reutilizable), SECO, legible, eficaz y seguro. jQuery no es un marco, por lo que no ayuda en estos aspectos. Todos hemos visto las paredes típicas del código de espagueti jQuery. Esto no es culpa de jQuery, es culpa de los desarrolladores que no saben cómo codificar el código. Sin embargo, si los desarrolladores supieran diseñar código, terminarían escribiendo algún tipo de "marco" mínimo para proporcionar la base (arquitectura, etc.) que discutí hace un momento, o agregarían algo. Por ejemplo, usted podría agregar RequireJS para que actúe como parte de su marco para escribir un buen código.

Aquí hay algunas cosas que los marcos modernos están proporcionando:

• Templar
• El enlace de datos
• enrutamiento (aplicación de una sola página)
• arquitectura limpia, modular y reutilizable
• seguridad
• funciones / características adicionales para mayor comodidad

Antes de seguir discutiendo Angular, me gustaría señalar que Angular no es el único de su tipo. Durandal, por ejemplo, es un marco construido sobre jQuery, Knockout y RequireJS. Una vez más, jQuery no puede, por sí solo, proporcionar lo que Knockout, RequireJS y todo el marco construido sobre ellos pueden proporcionar. Simplemente no es comparable.

Si necesitas destruir un planeta y tienes una Estrella de la Muerte, usa la Estrella de la Muerte.

Angular (revisitado).

Sobre la base de mis puntos anteriores sobre qué marcos proporcionan, me gustaría recomendar la forma en que Angular los proporciona y tratar de aclarar por qué esto es realmente superior a jQuery solo.

Referencia DOM.

En mi ejemplo anterior, es absolutamente inevitable que jQuery tenga que conectarse al DOM para proporcionar funcionalidad. Eso significa que la vista (html) está preocupada por la funcionalidad (porque está etiquetada con algún tipo de identificador, como "control deslizante de imagen") y JavaScript está preocupado por proporcionar esa funcionalidad. Angular elimina ese concepto a través de la abstracción. El código escrito correctamente con Angular significa que la vista puede declarar su propio comportamiento. Si quiero mostrar un reloj:

<clock></clock>

Hecho.

Sí, tenemos que ir a JavaScript para que eso signifique algo, pero lo estamos haciendo de la manera opuesta al enfoque jQuery. Nuestra directiva angular (que se encuentra en su propio pequeño mundo) ha "aumentado" el html y el html engancha la funcionalidad en sí mismo.

MVW Architecure / Módulos / Inyección de dependencias

Angular le ofrece una forma sencilla de estructurar su código. Las cosas de vista pertenecen a la vista (html), la funcionalidad de vista aumentada pertenece a las directivas, otra lógica (como las llamadas ajax) y las funciones pertenecen a los servicios, y la conexión de servicios y lógica a la vista pertenece a los controladores. También hay algunos otros componentes angulares que ayudan a lidiar con la configuración y modificación de los servicios, etc. Cualquier funcionalidad que cree está disponible automáticamente en cualquier lugar que lo necesite a través del subsistema Inyector que se encarga de la Inyección de dependencia en toda la aplicación. Al escribir una aplicación (módulo), la divido en otros módulos reutilizables, cada uno con sus propios componentes reutilizables, y luego los incluyo en el proyecto más grande. Una vez que resuelva un problema con Angular, usted ' Lo hemos resuelto automáticamente de una manera útil y estructurada para su reutilización en el futuro y se incluye fácilmente en el próximo proyecto. UNAENORME bono a todo esto es que su código será mucho más fácil de probar.

No es fácil hacer que las cosas "funcionen" en Angular.

GRACIAS A DIOS. El código de espagueti jQuery mencionado anteriormente fue el resultado de un desarrollador que hizo que algo "funcionara" y luego continuara. Puede escribir código angular incorrecto, pero es mucho más difícil hacerlo, porque Angular lo peleará por eso. Esto significa que debe aprovechar (al menos un poco) la arquitectura limpia que proporciona. En otras palabras, es más difícil escribir código incorrecto con Angular, pero es más conveniente escribir código limpio.

Angular está lejos de ser perfecto. El mundo del desarrollo web siempre está creciendo y cambiando, y existen nuevas y mejores formas de resolver problemas. React and Flux de Facebook, por ejemplo, tienen algunas grandes ventajas sobre Angular, pero vienen con sus propios inconvenientes. Nada es perfecto, pero Angular ha sido y sigue siendo increíble por ahora. Del mismo modo que jQuery una vez ayudó al mundo web a avanzar, Angular también lo ha hecho, y muchos lo harán en el futuro.