Directiva AngularJS vs Servicio vs Controlador

14

Estoy a punto de comenzar a implementar una solicitud de cambio en el sitio web interno de mi empresa, que verificará varios campos y los resaltará si coinciden con ciertas pautas. Por ejemplo, si la fecha de nacimiento es hoy, ese campo se delineará y la información sobre la herramienta dirá "¡Deséales un feliz cumpleaños!".

Las especificaciones piden que esto se cargue después de que el resto de la página se haya procesado, por lo que no aumentará el tiempo de carga. Dado que soy nuevo en angularJS, no estoy seguro de las formas "adecuadas" en que esto debería hacerse.

Problemas:

Como esto incluye agregar bordes e imágenes y atributos de título (manipulación de DOM), parece que debería estar usando una directiva.

Sin embargo, esto no será reutilizable o "corto" como parece ser la mayoría de las directivas.

La mitad de los datos que necesito verificar se devolverán en la llamada original al cargar la página, por lo que me gustaría guardar eso y no perder otra llamada al recibirla nuevamente, lo que me hace pensar que un servicio sería bueno para almacenar todos esos datos.

Sé cómo hacer todo esto en el controlador, pero eso es un mal código malo: P

¿Alguna idea sobre la mejor manera de hacer esto? Básicamente, necesitaré una llamada http para verificar todos los datos, que devolverá un objeto con valores bool para cada tipo de 'Llamada' que debo hacer. Luego, pasaré por esta lista y, si el valor es verdadero, agregaré un borde, una imagen y un texto de información sobre herramientas.

No estoy seguro si esta pregunta es lo suficientemente clara, así que si quieres que agregue algunos detalles, pregunta. ¡Gracias!

    
pregunta Bobo 04.08.2014 - 22:56

1 respuesta

26

Tienes razón, hay muchas opciones en juego.

Un controlador es un buen lugar para comenzar a escribir algo nuevo en angular. Conectar un controlador a un elemento de marcado le permite utilizar la biblioteca de directivas ya existente de angular con los servicios existentes de angular.

Después de un tiempo muy corto viviendo con esto, te darás cuenta de que tu controlador se ha vuelto demasiado grande. Pues ahora es tiempo de refactorizar. Aquí están las pautas generales que tiendo a seguir.

  • Controladores: los controladores adjuntan y administran valores / funcionalidad vinculados al $ scope. En última instancia, $ scope tiende a ser fuertemente impulsado por la presentación . IE es un modelo de vista.
  • Servicios: los servicios tienden a vincularse con la infraestructura, el backend u otras funciones del navegador
  • Directivas: las directivas le permiten integrarse con los eventos / funciones DOM que no manejan los controladores existentes.

Por lo tanto, querrá insertar el código en una de tres direcciones:

  1. El código de mi controlador es, lógicamente, otra pieza de datos / lógica de presentación y se debe dividir en otro controlador . Tenga en cuenta que cuando trabaje con elementos en $ scope, es mejor separar las partes de las que cada controlador es responsable en sus propios objetos en $ scope. Por ejemplo, $ scope.creditCard. [Blah] para un controlador vs $ scope.billingAddress. [Blah] para otro controlador. Esto ayuda a evitar problemas con el uso angular de la herencia de prototipo en $ scope.

  2. El código de mi controlador es una pieza de la infraestructura de la aplicación o el código de utilidad, que puede ser necesario compartir a través de la aplicación, y se debe dividir en un servicio >

  3. El código de mi controlador tiene mucho que ver con la organización de presentación / DOM y, por lo tanto, debe dividirse en su propia directiva

Un ejemplo de 1. podría ser manejar la entrada / validación de tarjetas de crédito por separado del resto del formulario de pago. Tendría un montón de lógica de tarjeta de crédito en un controlador separado de la lógica para permitir que los usuarios ingresen direcciones, por lo que serían controladores separados lógicamente.

Un ejemplo de 2 podría ser mover la parte que se comunica con el servicio backend de la tarjeta de crédito para aceptar / rechazar el pago. O otro ejemplo podría ser un módulo que habla con el backend para manejar la API de creación de usuarios.

Un ejemplo de 3 podría ser crear algún tipo de funcionalidad de tabulación automática que mueva el cursor entre los 4 cuadros de edición después de ingresar los 4 números para una tarjeta de crédito.

Divide tu aplicación en consecuencia.

    
respondido por el Doug T. 05.08.2014 - 00:02

Lea otras preguntas en las etiquetas

Comentarios Recientes

Después de todo esto jugando con una nueva aplicación web, volví al término documentación. Google nos notifica cuando una página devuelve una respuesta de documentación positiva, no estamos dejando páginas. Para evitar el mantenimiento manual y comentarios seguros y dolorosos, en Netscape presionamos para que las respuestas se expliquen explícitamente en su documentación, generalmente por recursos públicos. Los que no son programadores o juniors que están acostumbrados a los productos, se confundirán y... Lee mas