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 describirá y la información sobre herramientas dirá "¡Les deseo un feliz cumpleaños!".
Las especificaciones solicitan que esto se cargue después de que el resto de la página haya terminado de renderizarse, por lo que no aumentará el tiempo de carga. Como soy nuevo en angularJS, no estoy seguro de las formas "adecuadas" que esto debería hacerse.
Cuestiones:
Como esto incluye agregar bordes e imágenes y atributos de título (manipulación 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 serán devueltos en la llamada original al cargar la página, por lo que me gustaría guardar eso y no desperdiciar otra llamada para recuperarlo, 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 incorrecto: P
¿Alguna idea sobre la mejor manera de hacer esto? Básicamente, necesitaré una llamada http para verificar todos los datos, lo que devolverá un objeto con valores bool para cada tipo de 'Llamada' que necesito hacer. Luego, revisaré esta lista y, si el valor es verdadero, agregaré un borde, una imagen y un texto de información sobre herramientas.
No estoy seguro de si esta pregunta es lo suficientemente clara, así que si desea que agregue algunos detalles, por favor pregunte. ¡Gracias!
Respuestas:
Tienes razón, hay muchas opciones en juego.
Un controlador es un buen lugar para comenzar a escribir algo nuevo en angular. Al vincular un controlador a un elemento de marcado, puede usar la biblioteca de directivas ya existente de angular con los servicios existentes de angular.
Después de un tiempo muy corto de vivir con esto, se dará cuenta de que su controlador se ha vuelto demasiado grande. Bueno, ahora es el momento de refactorizar. Aquí están las pautas generales que tiendo a seguir.
Por lo tanto, querrá insertar el código en una de las tres direcciones:
El código de mi controlador es realmente lógicamente otro dato / lógica de presentación y debe dividirse 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 prototipos en $ scope.
El código de mi controlador es una pieza de infraestructura de aplicación o código de utilidad, que puede necesitar compartirse a través de la aplicación y debe dividirse en un servicio
El código de mi controlador se refiere en gran medida a 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 ingresar / validar la tarjeta 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 lógicamente separados.
Un ejemplo de 2 podría ser mover la parte que se comunica con el servicio de backend de la tarjeta de crédito para aceptar / rechazar el pago. Otro ejemplo podría ser un módulo que habla con el back-end 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.
fuente