Sommaire

Les différentes métadonnées

La section précédente a permis de mettre en lumière la notion de composant Angular et la philosophie qui est présente derrière tout ce framework. Les exemples ont montré qu’un composant n’est finalement qu’une simple classe TypeScript. Comment Angular peut-il alors interpréter cette classe comme étant un wzb component ? C’est grâce aux métadonnées.

Une métadonnée permet de donner des informations à Angular afin qu’il exécute un certain nombre d’opérations sur la classe en fonction du type de la métadonnée. Les métadonnées sont rajoutées via les décorateurs, c’est notamment le cas de @Component qui était présent dans les exemples précédents. Le code ci-dessous ajoute des métadonnées à une classe TypeScript afin de lui rajouter des fonctionnalités Angular : Décorateurs

@Component({ 
 selector:    ’product-list’, 
 templateUrl: ’app/product-list.component.html’, 
 directives:  [ProductDetailComponent], 
 providers:   [ProductService] 
}) 
export class ProductsComponent { ... }

Ici le décorateur indique que la classe ProductsComponent est un composant Angular. Les décorateurs ne sont ni plus ni moins que des fonctions, prenant en entrée un objet de configuration ...