javascript vs diferencias - "Thinking in AngularJS" si tengo un fondo de jQuery?



7 Answers

Imperativo → declarativo

En jQuery, los selectores se usan para encontrar elementos DOM y luego vincular / registrar los controladores de eventos en ellos. Cuando se activa un evento, ese código (imperativo) se ejecuta para actualizar / cambiar el DOM.

En AngularJS, desea pensar en vistas en lugar de elementos DOM. Las vistas son (declarativas) HTML que contienen directivas AngularJS. Las directivas configuran los controladores de eventos entre bambalinas para nosotros y nos ofrecen un enlace de datos dinámico. Los selectores rara vez se utilizan, por lo que la necesidad de ID (y algunos tipos de clases) disminuye considerablemente. Las vistas están vinculadas a los modelos (a través de ámbitos). Las vistas son una proyección del modelo. Los eventos cambian los modelos (es decir, los datos, las propiedades del ámbito) y las vistas que proyectan esos modelos se actualizan "automáticamente".

En AngularJS, piense en modelos, en lugar de elementos DOM seleccionados por jQuery que contienen sus datos. Piense en las vistas como proyecciones de esos modelos, en lugar de registrar devoluciones de llamada para manipular lo que el usuario ve.

Separación de intereses

jQuery emplea JavaScript discreto : el comportamiento (JavaScript) está separado de la estructura (HTML).

AngularJS usa controladores y directivas (cada uno de los cuales puede tener su propio controlador y / o funciones de compilación y enlace) para eliminar el comportamiento de la vista / estructura (HTML). Angular también tiene servicios y filtros para ayudar a separar / organizar su aplicación.

Consulte también https://stackoverflow.com/a/14346528/215945

Diseño de la aplicación

Un enfoque para diseñar una aplicación AngularJS:

  1. Piensa en tus modelos. Crea servicios o tus propios objetos de JavaScript para esos modelos.
  2. Piensa en cómo quieres presentar tus modelos: tus vistas. Cree plantillas HTML para cada vista, utilizando las directivas necesarias para obtener el enlace de datos dinámico.
  3. Adjunte un controlador a cada vista (usando ng-view y routing, o ng-controller). Haga que el controlador encuentre / obtenga solo los datos del modelo que la vista necesita para hacer su trabajo. Haga los controladores lo más finos posible.

Herencia prototípica

Puede hacer mucho con jQuery sin saber cómo funciona la herencia prototípica de JavaScript. Al desarrollar aplicaciones de AngularJS, evitará algunos escollos comunes si tiene un buen conocimiento de la herencia de JavaScript. Lectura recomendada: ¿Cuáles son los matices del alcance prototípico / herencia prototípica en AngularJS?

entre usar librerias

Supongamos que estoy familiarizado con el desarrollo de aplicaciones del lado del cliente en jQuery , pero ahora me gustaría comenzar a usar AngularJS . ¿Puedes describir el cambio de paradigma que es necesario? Aquí hay algunas preguntas que pueden ayudarlo a formular una respuesta:

  • ¿Cómo puedo diseñar y diseñar aplicaciones web del lado del cliente de manera diferente? ¿Cuál es la mayor diferencia?
  • ¿Qué debo dejar de hacer? ¿Qué debo empezar a hacer / usar en su lugar?
  • ¿Hay consideraciones / restricciones del lado del servidor?

No estoy buscando una comparación detallada entre jQuery y AngularJS .




¿Puedes describir el cambio de paradigma que es necesario?

Imperativo vs declarativo

Con jQuery le dices al DOM lo que debe pasar, paso a paso. Con AngularJS , describe los resultados que desea pero no cómo hacerlo. Más sobre esto here . También, revisa la respuesta de Mark Rajcok.

¿Cómo puedo diseñar y diseñar aplicaciones web del lado del cliente de manera diferente?

AngularJS es un marco completo del lado del cliente que utiliza el patrón MVC (verifique su representación gráfica ). Se enfoca grandemente en la separación de preocupaciones.

¿Cuál es la mayor diferencia? ¿Qué debo dejar de hacer? ¿Qué debo empezar a hacer / usar en su lugar?

jQuery es una biblioteca

AngularJS es un hermoso marco del lado del cliente, altamente comprobable, que combina toneladas de cosas interesantes como MVC, inyección de dependencia , enlace de datos y mucho más.

Se enfoca en la separación de inquietudes y pruebas (pruebas unitarias y pruebas de extremo a extremo), lo que facilita el desarrollo basado en pruebas.

La mejor manera de comenzar es a través de su impresionante tutorial . Puedes seguir los pasos en un par de horas; sin embargo, en caso de que quiera dominar los conceptos detrás de escena, estos incluyen una gran cantidad de referencias para lecturas adicionales.

¿Hay consideraciones / restricciones del lado del servidor?

Puede usarlo en aplicaciones existentes en las que ya está utilizando jQuery puro. Sin embargo, si desea aprovechar al máximo las características de AngularJS, puede considerar codificar el lado del servidor utilizando un enfoque RESTful .

Hacerlo le permitirá aprovechar su fábrica de recursos , lo que crea una abstracción de la API RESTful del lado del servidor y hace que las llamadas del lado del servidor (obtener, guardar, eliminar, etc.) sean increíblemente fáciles.




jQuery

jQuery hace comandos de JavaScript ridículamente largos, como los getElementByHerpDerpmás cortos y los navegadores cruzados.

AngularJS

AngularJS le permite crear sus propias etiquetas / atributos HTML que hacen cosas que funcionan bien con aplicaciones web dinámicas (ya que HTML fue diseñado para páginas estáticas).

Editar:

Diciendo "Tengo un fondo de jQuery, ¿cómo pienso en AngularJS?" es como decir "Tengo un fondo HTML, ¿cómo pienso en JavaScript?" El hecho de que esté haciendo la pregunta demuestra que lo más probable es que no entienda los propósitos fundamentales de estos dos recursos. Esta es la razón por la que elegí responder a la pregunta simplemente señalando la diferencia fundamental en lugar de ir a través de la lista que dice "AngularJS utiliza directivas, mientras que jQuery utiliza los selectores de CSS para crear un objeto jQuery que hace esto y aquello, etc." . Esta pregunta no requiere una respuesta larga.

jQuery es una forma de facilitar la programación de JavaScript en el navegador. Comandos más cortos, cross-browser, etc.

AngularJS amplía HTML, por lo que no tiene que poner <div>todo el lugar solo para hacer una aplicación. Hace que HTML realmente funcione para aplicaciones en lugar de para lo que fue diseñado, que es páginas web estáticas y educativas. Lo logra de forma indirecta utilizando JavaScript, pero fundamentalmente es una extensión de HTML, no de JavaScript.




Esas son algunas respuestas muy bonitas, pero largas.

Para resumir mis experiencias:

  1. Los controladores y proveedores (servicios, fábricas, etc.) son para modificar el modelo de datos, NO HTML.
  2. HTML y directivas definen el diseño y el enlace al modelo.
  3. Si necesita compartir datos entre controladores, cree un servicio o una fábrica, son singletons que se comparten en la aplicación.
  4. Si necesita un widget HTML, cree una directiva.
  5. Si tiene algunos datos y ahora está intentando actualizar HTML ... ¡PARE! actualice el modelo y asegúrese de que su HTML esté vinculado al modelo.



Son manzanas y naranjas. No quieres compararlos. Son dos cosas diferentes. AngularJs ya tiene jQuery lite incorporado, lo que te permite realizar una manipulación básica de DOM sin siquiera incluir la versión completa de jQuery.

jQuery tiene que ver con la manipulación de DOM. Resuelve todo el problema del navegador cruzado, de lo contrario, tendrá que lidiar con él, pero no es un marco que le permita dividir su aplicación en componentes como AngularJS.

Lo bueno de AngularJs es que le permite separar / aislar la manipulación DOM en las directivas. Existen directivas integradas listas para su uso, como ng-click. Puede crear sus propias directivas personalizadas que contendrán toda su lógica de visualización o la manipulación de DOM para que no termine de mezclar el código de manipulación de DOM en los controladores o servicios que deben hacerse cargo de la lógica empresarial.

Angular descompone su aplicación en - Controladores - Servicios - Vistas - etc.

Y hay una cosa más, esa es la directiva. Es un atributo que puede adjuntar a cualquier elemento DOM y puede volverse loco con jQuery dentro de él sin tener que preocuparse de que jQuery entre en conflicto con los componentes de AngularJs o se confunda con su arquitectura.

Escuché de una reunión a la que asistí, uno de los fundadores de Angular dijo que trabajaron muy duro para separar la manipulación de DOM, así que no intentes incluirlos de nuevo




Me parece interesante esta pregunta, porque mi primera exposición seria a la programación de JavaScript fue Node.js y AngularJS. Nunca aprendí jQuery, y creo que eso es algo bueno, porque no tengo que desaprender nada. De hecho, evito activamente las soluciones jQuery para mis problemas, y en su lugar, solo busco una "forma AngularJS" para resolverlos. Entonces, supongo que mi respuesta a esta pregunta se reduciría esencialmente a "pensar como alguien que nunca aprendió jQuery" y evitar cualquier tentación de incorporar jQuery directamente (obviamente, AngularJS lo usa en cierta medida detrás de escena).




Como principiante en MV * de MV * y que se centra exclusivamente en la arquitectura de la aplicación (no en el lado del servidor / cliente), recomendaría el siguiente recurso (que me sorprende que aún no se haya mencionado): Patrones de diseño de JavaScript , por Addy Osmani , como una introducción a diferentes patrones de diseño de JavaScript . Los términos utilizados en esta respuesta están tomados del documento vinculado anterior. No voy a repetir lo que estaba muy bien redactado en la respuesta aceptada. En su lugar, esta respuesta enlaza con los antecedentes teóricos que impulsan a AngularJS (y otras bibliotecas).

Al igual que yo, pronto se dará cuenta de que AngularJS (o Ember.js , Durandal, y otros marcos MV *) es un marco complejo que reúne muchos de los diferentes patrones de diseño de JavaScript.

También me resultó más fácil probar (1) el código JavaScript nativo y (2) las bibliotecas más pequeñas para cada uno de estos patrones por separado antes de sumergirse en un marco global. Esto me permitió comprender mejor qué problemas cruciales aborda un marco (porque usted se enfrenta personalmente con el problema).

Por ejemplo:

  • Programación orientada a objetos de JavaScript (este es un enlace de búsqueda de Google). No es una biblioteca, pero ciertamente es un requisito previo para cualquier programación de aplicaciones. Me enseñó las implementaciones nativas de los patrones de prototipo, constructor, singleton y decorador.
  • jQuery / Underscore para el patrón de fachada (como WYSIWYG para manipular el DOM)
  • Prototype.js para el patrón prototipo / constructor / mixin
  • RequireJS / Curl.js para el patrón de módulo / AMD
  • KnockoutJS para el patrón observable, publicación / suscripción

NB: esta lista no está completa, ni 'las mejores bibliotecas'; Simplemente resultan ser las bibliotecas que he usado. Estas bibliotecas también incluyen más patrones, los mencionados son solo sus enfoques principales o intenciones originales. Si cree que falta algo en esta lista, por favor mencione en los comentarios, y con gusto lo agregaré.






Related