"Thinking in AngularJS", si tengo antecedentes en jQuery?

Supongamos que estoy familiarizado con el desarrollo de aplicaciones cliente en jQuery , pero ahora me gustaría comenzar a usar AngularJS . ¿Puedes describir el cambio de paradigma que se necesita? Aquí hay algunas preguntas que pueden ayudarlo a formar la respuesta:

  • ¿Cómo creo y creo aplicaciones web de clientes de manera diferente? Cual es la diferencia
  • ¿Qué debo dejar de hacer? ¿Qué debo empezar a hacer / usar en su lugar?
  • ¿Hay consideraciones / limitaciones del lado del servidor?

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

4523
21 февр. establecido por Mark Rajcok el 21 de febrero 2013-02-21 07:09 '13 a las 7:09 2013-02-21 07:09
@ 15 respuestas

1. No cree su página, y luego cámbiela utilizando la manipulación DOM

En jQuery, creas una página y luego la creas dinámicamente. Esto se debe al hecho de que jQuery fue diseñado para crecer y ha crecido increíblemente fuera de esta simple premisa.

Pero en AngularJS debes comenzar desde cero, teniendo en cuenta tu arquitectura. En lugar de pensar que "tengo este pedazo de DOM y quiero hacer esto, hacer X", debes comenzar con lo que quieres, y luego comenzar a desarrollar tu aplicación, y luego finalmente comenzar a desarrollar tu presentacion

2. No aumentar jQuery con AngularJS

Del mismo modo, no empieces con la idea de que jQuery hace X, Y y Z, así que solo agregaré AngularJS para modelos y controladores. Es realmente tentador cuando estás empezando, así que siempre recomiendo que los nuevos desarrolladores de AngularJS nunca utilicen jQuery, al menos hasta que se acostumbren a lo que hicieron de la "forma angular".

He visto a muchos desarrolladores aquí y en la lista de correo crear estas soluciones complejas con jQuery plugins de 150 o 200 líneas de código que luego se pegan en AngularJS con un conjunto de devoluciones de llamada y $apply que confunden y confunden; ¡Pero al final funcionan! El problema es que en la mayoría de los casos, cuando el complemento jQuery se puede reescribir en AngularJS en un fragmento de código, todo se vuelve claro y comprensible.

La conclusión es que: al resolver un problema, primero "piense en AngularJS"; Si no puede encontrar una solución, pregunte a la comunidad; Si después de todo esto no hay una solución simple, no dude en ponerse en contacto con jQuery. Pero no permitas que jQuery se convierta en una muleta, o nunca dominarás AngularJS.

3. Piensa siempre en términos de arquitectura.

Primero se sabe que las aplicaciones de una página son aplicaciones. Esta no es una página web. Por lo tanto, debemos pensar como un desarrollador del lado del servidor, y no pensar como un desarrollador cliente. Debemos pensar en cómo dividir nuestra aplicación en componentes independientes, extensibles y comprobables.

Entonces, ¿cómo lo haces? ¿Qué opinas en AngularJS? Aquí hay algunos principios generales, a diferencia de jQuery.

La presentación es el "registro oficial".

En jQuery, cambiamos programáticamente la vista. Podemos tener un menú desplegable etiquetado como ul como:

Home </li> <li> <a href="#/menu1">Menu 1</a> <ul> <li><a href="#/sm1">Submenu 1</a></li> <li><a href="#/sm2">Submenu 2</a></li> <li><a href="#/sm3">Submenu 3</a></li> </ul> </li> <li> <a href="#/home">Menu 2</a> </li> </ul> 

En jQuery, en nuestra lógica de aplicación, lo activaríamos con algo como:

Estos dos hacen lo mismo, pero en la versión de AngularJS, cualquiera que vea la plantilla sabe lo que debe suceder. Cada vez que un nuevo miembro del equipo de desarrollo se incorpora, ella puede verlo y luego saber que la directiva de dropdownMenu está en su lugar; ella no necesita ingresar la respuesta correcta o revisar cualquier código. Una mirada nos dijo lo que iba a pasar. Mucho más limpio.

Los desarrolladores nuevos en AngularJS a menudo preguntan cómo encontrar todos los enlaces de un tipo en particular y agregarles directivas. El desarrollador siempre está aturdido cuando respondemos: usted no lo hace. Pero la razón por la que no haces esto es que es como half-jQuery, half-AngularJS y nada bueno. El problema aquí es que el desarrollador está intentando "ejecutar jQuery" en el contexto de AngularJS. Nunca funcionará bien. La presentación es una entrada oficial. Fuera de la directiva (más sobre esto más adelante), nunca cambia el DOM. Y las directivas se aplican en la presentación, por lo que la intención es clara.

Recuerde: no cree, y luego marque. Tienes que diseñar y luego diseñar.

Enlace de datos

Esta es definitivamente una de las características más sorprendentes de AngularJS, y elimina la necesidad de realizar las manipulaciones de DOM que mencioné en la sección anterior. AngularJS actualizará automáticamente su presentación para que no tenga que hacerlo. En jQuery, respondemos a los eventos y luego actualizamos el contenido. Algo como

 <ul class="messages" id="log"> </ul> 

Además de mezclar problemas, también tenemos los mismos problemas que significan las intenciones que mencioné anteriormente. Pero lo que es más importante, tuvimos que invocar y actualizar manualmente el nodo DOM. Y si queremos eliminar una entrada de registro, también debemos copiar el código DOM. ¿Cómo probamos la lógica por separado del DOM? ¿Y si queremos cambiar la presentación?

Es un poco desordenado y un poco frágil. Pero en AngularJS podemos hacerlo:

 <ul class="messages"> <li ng-repeat="entry in log">{{ entry.msg }}</li> </ul> 

Pero en este sentido, nuestra opinión puede verse así:

separación de problemas y ofrece una posibilidad mucho mayor de verificación.  Otras respuestas mencionaron este punto, así que lo dejaré así. 

Separación de problemas.

Y todo lo anterior enlaza este complejo tema: mantenga sus problemas separados. Su opinión sirve como un informe oficial de lo que debería suceder (en su mayor parte); su modelo representa sus datos; tiene un nivel de servicio para realizar tareas reutilizables; manipulas DOM y expandes tu vista con directivas; y lo pegas todo junto con los controladores. Esto también se menciona en otras respuestas, y lo único que me gustaría agregar se relaciona con la capacidad de prueba, que trataré en otra sección a continuación.

Habilitar dependencias

Para ayudarnos con la separación de problemas, inyección de dependencia (DI). Si usa un lenguaje del lado del servidor (de Java a PHP ), probablemente ya esté familiarizado con este concepto, pero si es un cliente de jQuery, este concepto puede parecer algo desde tonto hasta innecesario a hipster. Pero esto no es así: -)

Desde un punto de vista amplio, DI significa que usted es libre de declarar componentes, y luego de cualquier otro componente, solo solicite su copia y se la proporcionará. No es necesario saber el orden de arranque, la ubicación de los archivos o algo así. La fuerza puede no ser inmediatamente visible, pero daré solo un ejemplo (común): la prueba.

Digamos que, en nuestra aplicación, necesitamos un servicio que implemente el almacenamiento del servidor a través de la API REST y, dependiendo del estado de la aplicación, el almacenamiento también es local. Al realizar pruebas en nuestros controladores, no queremos contactar con el servidor, todavía probamos el controlador. Simplemente podemos agregar un diseño de servicio con el mismo nombre que nuestro componente original, y el inyector garantizará que nuestro controlador recibirá uno falso automáticamente; nuestro controlador no sabe y no debería saber la diferencia.

Hablando de juicios ...

4. Desarrollo basado en pruebas - siempre

De hecho, esto es parte de la sección 3 sobre arquitectura, pero es tan importante que lo coloco en mi propia sección de nivel superior.

De todos los muchos complementos de jQuery que viste, usaste o escribiste, ¿cuántos de ellos tenían una suite de prueba complementaria? No mucho, porque jQuery no es muy susceptible a esto. Pero AngularJS es.

En jQuery, la única forma de probar es crear un componente de forma independiente con una página de muestra / demostración, con la que nuestras pruebas pueden realizar manipulaciones de DOM. Por lo tanto, debemos desarrollar el componente por separado y luego integrarlo en nuestra aplicación. ¡Qué incómodo! Tanto tiempo, al desarrollar con jQuery, elegimos una opción iterativa en lugar de un desarrollo basado en pruebas. ¿Y quién nos puede culpar?

Pero como tenemos una separación de problemas, ¡podemos hacer el desarrollo de prueba de forma iterativa en AngularJS! Por ejemplo, digamos que queremos una directiva super simple para indicar en nuestro menú cuál es nuestra ruta actual. Podemos decir lo que queramos desde el punto de vista de nuestra aplicación:

 

Bueno, ahora podemos escribir una prueba para la directiva inexistente when-active :

 

Y cuando ejecutamos nuestra prueba, podemos confirmar que falla. Solo que ahora tenemos que crear nuestra directiva:

Hay varios errores en esto:

  • Primero, jQuery nunca fue requerido. ¡Aquí no hicimos nada de lo que jQuery necesitaba!
  • En segundo lugar, incluso si ya tenemos jQuery en nuestra página, no hay razón para usarlo aquí; solo podemos usar angular.element , y nuestro componente aún funcionará cuando angular.element en un proyecto que no tiene jQuery.
  • Tercero, incluso si se supone que esta directiva requiere jQuery, jqLite ( angular.element ) siempre usará jQuery si se ha cargado. Así que no necesitamos usar $ , solo podemos usar angular.element .
  • El cuarto, estrechamente relacionado con el tercero, es que los elementos jqLite no deben estar envueltos en $ , ¡el element que se pasa a la función de link ya será un elemento jQuery!
  • Y en quinto lugar, como mencionamos en las secciones anteriores, ¿por qué mezclamos el material de la plantilla con nuestra lógica?

Esta directiva se puede reescribir (incluso en casos muy complejos). Mucho más fácil:

7185
22 февр. Respuesta dada por Josh David Miller el 22 de febrero. 2013-02-22 00:26 '13 a las 0:26 2013-02-22 00:26

Imperativo → declarativo

En jQuery, se utiliza un selector para buscar el DOM y luego vincular / registrar los controladores de eventos. Cuando se activa un evento, este código (imperativo) actualiza / modifica el DOM.

En AngularJS, desea pensar en vistas , no en elementos DOM. Representaciones HTML (declarativas) que contienen directivas AngularJS . Las directivas configuran los gestores de eventos entre bambalinas para nosotros y nos ofrecen enlaces dinámicos de datos. Los selectores rara vez se utilizan, por lo que la necesidad de identificadores (y algunos tipos de clases) se reduce significativamente. Las vistas están vinculadas a modelos (a través de áreas). Las vistas son una proyección de un modelo. Modelos para cambiar eventos (es decir, datos, propiedades de región) y vistas que diseñan estos modelos "automáticamente".

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

Separación de problemas.

jQuery utiliza JavaScript no intrusivo : 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 dividir / organizar su aplicación.

border=0

Véase también delphi-faq.net.site/questions/511 / ...

Diseño de la aplicación

Un enfoque para desarrollar una aplicación AngularJS:

  • Piensa en tus modelos. Crea servicios o tus propios objetos JavaScript para estos modelos.
  • Piensa en cómo quieres presentar tus modelos: tus vistas. Cree plantillas HTML para cada presentación, utilizando las directivas necesarias para obtener el enlace dinámico de datos.
  • Adjunte un controlador a cada vista (usando ng-view y routing o ng-controller). Solicite al distribuidor que encuentre / recupere solo los datos del modelo que deben realizar las vistas. Haga los controladores lo más finos posible.

Herencia prototipo

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

408
21 февр. Respuesta dada por Mark Rajcok el 21 de febrero. 2013-02-21 07:09 '13 a las 7:09 2013-02-21 07:09

AngularJS vs. jQuery