Partie 1 : Découvrir Angular
Partie 2 : Acquérir les bases sur Angular
Partie 3 : Aller plus loin avec Angular
1 de 2

4.4. Les Annotations

Les métadonnées indiquent à Angular comment il doit traiter une classe. Par exemple, regardez la classe ci-dessous :

export class AppComponent { … }

Comme son nom l’indique, il s’agit bien d’une classe de composant, puisqu’elle est suffixée par ‘Component’.

Cependant, comment Angular sait qu’il s’agit vraiment d’un composant et pas d’un modèle, ou d’un service par exemple ? Et bien nous devons ajouter des annotations sur la classe AppComponent. Nous allons ajouter l’annotation @component pour indiquer à Angular que cette classe est un composant :

@Component({ 
 selector: 'mon-app', 
 template: '<p>Ici le template de mon composant</p>' 
}) 
export class AppComponent { ... }

Les annotations ont souvent besoin d’un paramètre de configuration. Le décorateur @Component n’échappe pas à cette règle, et prend en paramètre un object qui contient les informations dont Angular a besoin pour créer et lier le composant et son template. Il y a plusieurs options de configuration possible, mais nous n’allons voir que les deux plus importants pour le moment, qui sont obligatoires lorsque vous définissez un composant :

  • Selector : un sélecteur est un identifiant unique dans votre application, qui indique à Angular de créer et d’insérer une instance de ce composant à chaque fois qu’il trouve une balise <mon-app></mon-app> dans du code HTML d’un composant parent. Le nom de cette balise vient de la ligne 2 du code ci-dessus.
  • Template : Le code du template lui-même. Il est également possible d’écrire le code du template dans un fichier à part si vous le souhaitez. Dans ce cas, remplacez template par templateUrl, et indiquez chemin relatif vers le fichier du template.

Hey, mais ce n’est pas du HTML valide ça : <mon-app></mon-app> !

Et bien détrompez-vous, ce code est parfaitement valide, et vous pourrez même le faire valider par le W3C. 😉

Nous verrons pourquoi dans la suite de ce cours.

Il existe bien sûr d’autres annotations : @Injectable, @Input ou encore @Pipe par exemple.