¿Cuáles son las diferencias entre una Anotación y un Decorador en Angular?

Aunque las anotaciones y los decoradores comparten el mismo símbolo @ en Angular, ambos son características de lenguaje diferentes.

Anotaciones: estas son funciones de lenguaje codificadas. Las anotaciones son solo metadatos establecidos en la clase que se utiliza para reflejar la biblioteca de metadatos. Cuando el usuario anota una clase, el compilador crea un atributo en esa clase llamado anotaciones , almacena una array de anotaciones en él, luego intenta crear una instancia de un objeto con el mismo nombre que la anotación, pasando los metadatos al constructor. Las anotaciones no están predefinidas en AngularJs, por lo que podemos nombrarlas por nuestra cuenta.

• Ejemplo:

  @ComponentAnnotation

Características de las anotaciones:

• Las anotaciones están codificadas de forma rígida.
• Las anotaciones son utilizadas por el compilador AtScript y Traceur.
• Las anotaciones reflejan la biblioteca de metadatos

Nota: Hoy en día, AngularJs cambió de AtScript a TypeScript, pero las anotaciones también son compatibles en estos días.

Ejemplo: aquí el componente se anota como ComponentAnnotation y se usa más.

import { 
  ComponentAnnotation as Component,
} from '@angular/core';
  
  
  
export class ComponentAnnotation extends DirectiveMetadata {
  
  constructor() {
    
  }
}

Decoradores: un decorador es una función que agrega metadatos a una clase, sus miembros o los argumentos de su método. Un decorador es solo una función que le da acceso al objetivo que necesita ser decorado. Hay cuatro tipos de decoradores, todos ellos mencionados a continuación:

Tipos de decoradores:

• Decoradores de clase como @Component, @NgModule
• Decoradores de propiedades como @Input y @Output
• Decoradores de métodos como @HostListener
• Decoradores de parámetros como @Injectable

Características de los decoradores:

• Los decoradores están predefinidos en AngularJs.
• Los decoradores son utilizados por el compilador de TypeScript.
• Los decoradores se utilizan para adjuntar metadatos a una clase, objetos y métodos.

Ejemplo:

import { Component } from '@angular/core';
  
@Component({
  selector: 'hi',
  template: '<div>GeeksForGeeks</div>',
})
export class Geeks{
  constructor() {
    console.log('GeeksForGeeks');
  }
}

Diferencias entre Anotación y Decorador:

Conclusión: hay una diferencia muy significativa entre anotaciones y decoradores en AngularJS. Tanto los decoradores como las anotaciones son compatibles con Angular. Esto es algo heredado porque Angular2 cambió de AtScript a TypeScript. Los decoradores son los predeterminados en AngularJs, pero también puede usar anotaciones.