Angular - 2-8 Travailler avec des templates de components

Jusqu'ici nous avons toujours utilisé un fichier de template externe via templateUrl. Il existe une alternative : le template en ligne, écrit directement dans le code TypeScript du composant. Cela peut sembler étrange, mais c'est tout à fait possible. Dans notre servers.component.ts, on remplace la propriété templateUrl par template. Les deux sont équivalents : un composant doit avoir un et un seul des deux, mais il doit toujours avoir un modèle.

Chaînes simples vs back-ticks

On écrit ensuite le HTML entre guillemets simples — par exemple deux app-server sur la même ligne. Si on sauvegarde, le résultat est identique à avant : c'est juste la façon de configurer le template qui a changé. Dès qu'on veut du HTML sur plusieurs lignes, les guillemets simples ne suffisent plus ; il faut alors utiliser les back-ticks JavaScript (template literals) qui acceptent les chaînes multi-lignes :

@Component({
  selector: 'app-servers',
  template: `
    <app-server></app-server>
    <app-server></app-server>
  `
})
export class ServersComponent { }

Quelle approche choisir ? Cela dépend. Si vous n'avez pas beaucoup de HTML, le template en ligne est très bien et garde toute la logique dans un seul fichier TypeScript. Mais dès que vous dépassez trois ou quatre lignes de HTML, un fichier externe rend le code plus facile à suivre et à comprendre.

Important à retenir :

chaque composant doit avoir un template (en ligne ou via templateUrl) ;
le selector est optionnel — la section sur le routage montrera comment charger un composant sans son sélecteur ;
les styles sont eux aussi optionnels. On regardera les styles dans la prochaine leçon.

En résumé

Cette leçon explique comment passer d'un template externe à un template en ligne dans Angular, où vous définissez le code HTML directement dans le fichier TypeScript du component. Vous apprendrez à utiliser la propriété `template` avec des backticks pour supporter les chaînes multi-lignes, et à décider quelle approche utiliser selon la taille et la complexité de votre template. Le template est la propriété obligatoire que tout component doit posséder.

Points clés

Remplacer `templateUrl` par `template` pour définir le HTML directement dans le component TypeScript
Utiliser les backticks (`) pour créer des templates multi-lignes avec retours à la ligne
Préférer les templates en ligne pour les petits templates (< 3 lignes), et les fichiers externes pour du code HTML plus volumineux
La propriété `template` est obligatoire dans tout component ; le sélecteur et les styles sont optionnels
Un template en ligne centralise la logique et le markup au même endroit, facilitant la maintenance pour les petits composants

Questions fréquentes

Quelle est la différence entre `template` et `templateUrl` ?

`templateUrl` pointe vers un fichier HTML externe, tandis que `template` définit le HTML directement dans le code TypeScript du component en utilisant la propriété `template` avec une chaîne de caractères (ou des backticks pour multi-lignes).

Quand utiliser un template en ligne vs un fichier externe ?

Utilisez un template en ligne pour les templates petits (moins de 3 lignes de code HTML) pour garder la logique et le markup ensemble. Pour du code HTML plus volumineux, préférez un fichier externe pour une meilleure lisibilité et maintenabilité.

Pouvez-vous omettre le template dans un component ?

Non, tout component Angular doit obligatoirement posséder un template (soit via `template`, soit via `templateUrl`). C'est la seule propriété requise ; le sélecteur et les styles sont optionnels.