switch directivas angularjs angular angular-directive

angularjs - directivas - ng-if



Angular 1.5: Directivas vs Componentes? (2)

Me resulta difícil entender la diferencia real entre los componentes y las directivas. Ahora entiendo que los componentes son un concepto mucho más fácil.

Entonces, teniendo esto en mente, ¿hay alguna razón para continuar usando las directivas cuando se usa angular 1.5?

Tal vez me esté perdiendo el contexto real aquí, pero parece que los componentes proporcionan una API más fácil.

Entonces, ¿por qué razón tendría que seguir usando una directiva?

Angular 2 afirma que todo es un componente, por lo que trabajar hacia una migración fácil de 1.5 a 2, ¿no tendría sentido usar solo componentes en el futuro?

En el pasado, he utilizado directivas para crear, por ejemplo, un cuadro de texto de búsqueda automática, no hay ninguna razón por la que no deba hacer esto ahora dentro de un componente, ¿no? ¿Y luego puedo reutilizar este componente dentro de otros componentes que creo?

Realmente apreciaría si alguien pudiera confirmar lo que debería estar haciendo y la forma recomendada de seguir adelante.

Gracias


Los componentes son básicamente un nuevo tipo de directiva que está diseñada para la arquitectura basada en componentes. En muchos sentidos, los componentes tienen una funcionalidad más restringida, al contrario, fomentan mejores convenciones y diseños que en realidad conducen a un código más mantenible y reutilizable.

Por ejemplo, los componentes fuerzan el alcance aislado y alientan fuertemente la unión unidireccional. ¿Porque es esto importante? Debido a que esto encapsula mejor el componente y le impide crear componentes que estén estrechamente relacionados con el elemento o ámbito principal. Esto significa que escribe el componente de tal manera que es más probable que pueda volver a utilizarlo en el futuro sin modificaciones (en lugar de copiar y pegar, ya que muchos tienen tendencia a hacerlo). Esto también facilita el seguimiento y el control de las interacciones y los cambios en los datos.

El componente aún puede interactuar con el alcance principal, pero esto se hace a través de devoluciones de llamada vinculadas a eventos de componente. Nuevamente, esta restricción obliga o al menos recomienda fuertemente el diseño de software que facilita la reutilización de su componente y la comprensión de cómo el componente interactúa con el alcance principal y los elementos externos.

Los componentes se pueden registrar utilizando el método .component () de un módulo AngularJS (devuelto por angular.module ()). El método toma dos argumentos:

1) El nombre del componente (como cadena).

2) El objeto de configuración de componentes. (Tenga en cuenta que, a diferencia del método .directive (), este método no tiene una función de fábrica).

// para directiva

module.directive (nombre, fn);

// para componente

module.component (nombre, opciones);


Solo copiando los documentos angulares, ya que lo ponen de la mejor manera que puedo pensar.

Entendiendo los componentes

En Angular, un componente es un tipo especial de directiva que usa una configuración más simple que es adecuada para una estructura de aplicación basada en componentes.

Esto hace que sea más fácil escribir una aplicación de manera similar a usar componentes web o usar el estilo de arquitectura de aplicación de Angular 2.

Ventajas de los componentes:

  • Configuración más sencilla que las directivas simples.
  • promover fallas sanas y mejores prácticas
  • optimizado para la arquitectura basada en componentes
  • escribir directivas de componentes facilitará la actualización a Angular 2

Cuando no usar componentes:

  • para directivas que dependen de la manipulación de DOM, agregar detectores de eventos, etc., porque las funciones de compilación y enlace no están disponibles
  • cuando necesite opciones de definición de directivas avanzadas como prioridad, terminal, multi-elemento
  • cuando desee una directiva que se active mediante un atributo o una clase CSS, en lugar de un elemento

más lectura: https://docs.angularjs.org/guide/component