Diferencia entre Directiva y Componente en AngularJS

Introducción:
Comenzaremos este tema de encontrar las diferencias entre Directiva y Componentes, obteniendo una breve idea sobre estas dos terminologías, lo que significan y sus características de comportamiento para construir un código AnglarJS nítido y poderoso. Las directivas se introducen con la invención de Angular, como un marco estructural para crear aplicaciones web dinámicas. Las directivas eran populares en la manipulación del DOM, es decir, el modelo de objeto del documento y la creación de nuevos elementos personalizados que formaban parte del DOM. Con la actualización de la tecnología y varias modificaciones en las versiones posteriores de Angular (Angular 2 y versiones superiores, ya que Angular 2 depende de la estructura basada en componentes), el uso de Componentes ahora se ve con gran interés entre los desarrolladores. Además, los componentes se denominan como una versión más simplificada de las directivas.

Definiciones básicas:
las directivas son funciones que se invocan cada vez que el compilador HTML de AngularJs ($compile) lo encuentra en DOM. Indica adjuntar un comportamiento específico a ese elemento DOM (por ejemplo, a través de detectores de eventos), o incluso transformar el elemento DOM y sus hijos.
Los componentes son solo una versión simplificada de una directiva. Más específicamente, los componentes pueden llamarse un tipo especial de directivas con plantillas, que se utilizan principalmente para la arquitectura basada en componentes.
Ejemplos:

• Componente-
  Sintaxis:

  import {Component, View} from 'angular2/angular2';
  @Component ({........
              ........ })
  @View ({............
           ...........})

  import {Component, View} from 'angular2/angular2'; @Component({   selector: 'message' }) @View({   template: `       <h6>Hello GeeksforGeeks</h6>       <h6>This is an example of component</h6> ` }) class Message {   constructor(public version: string) {} }

  Producción:

  Hello GeeksforGeeks
  
  This is an example of component

• Directiva-
  Sintaxis:

  import {Directive} from 'angular2/angular2';
  @Directive({........
              ........})

  import {Directive} from 'angular2/angular2';    @Directive({     selector: "[myDirective]",     hostListeners: {         'click': 'showMessage()'     } }) class Message {        constructor() {}        showMessage() {      console.log('This is an example of directive'); } }    <button>GeeksforGeeks</button>

  Producción:

  Geeksforgeeks
  This is an example of directive

Explicación:
En los ejemplos anteriores, hemos visto cómo escribir código angular simple para imprimir algunos mensajes, tanto usando Componente como Directivo. En el ejemplo del Componente, hemos visto que es obligatorio escribir la propiedad de vista, mientras que, para las Directivas, no necesitamos usar vista o plantillas. Ahora analicemos cuáles son las principales diferencias entre estos dos.
Diferencias:

1. Un componente siempre son elementos (‘E’) donde la directiva puede ser un atributo, nombre de elemento, comentario o clase CSS (‘E’, ‘A’, ‘C’, ‘M’). Las plantillas son la propiedad obligatoria y siempre se requieren en el componente, pero la directiva no siempre las requiere.
2. El componente se utiliza para dividir la aplicación en componentes más pequeños. Pero la directiva se usa para diseñar componentes reutilizables, que está más orientado al comportamiento. Es por eso que los componentes se usan ampliamente en versiones posteriores de Angular para facilitar las cosas y construir un modelo total basado en componentes.
3. Como Component tiene vistas, se puede definir viewEncapsulation. Mientras que la Directiva no tiene puntos de vista. Entonces no puede usar viewEncapsulation en la directiva.
4. Aunque los componentes facilitan la escritura de código simple y efectivo, tiene una configuración más simple que las directivas simples y está optimizado para la arquitectura basada en componentes. Pero, ¿cuándo no usar un componente? La respuesta es: un componente no admite funciones de «compilación» y «preenlace». Entonces, para manipular objetos DOM, deberíamos usar las directivas.
5. Los componentes nunca deben modificar ningún dato o DOM que esté fuera de su alcance. Las directivas tienen ámbitos aislados, por defecto el hijo hereda el ámbito de su padre.
6. Solo un componente puede estar presente por elemento DOM. Puede haber más de una directiva en un elemento DOM
7. Para registrar el componente, usamos la anotación de metadatos @Component. Para la directiva, usamos la anotación de metadatos @Directive. Dos ejemplos simples se muestran en el punto ‘Ejemplo’ anterior.

Conclusión:
Se ha dado un estudio básico sobre el tema. Ya sea para usar Componente o Directiva, depende totalmente del propósito de escribir un código particular para el uso. Con el advenimiento de las tecnologías emergentes, la mayoría de las arquitecturas de diseño de páginas web apuntan a obtener un modelo basado en componentes y es entonces cuando necesitamos Componentes. Por otro lado, las directivas nos brindan muchas opciones como selectores, entrada, salida, proveedores para escribir el código de forma creativa.