Que sont les templateUrls et les styleUrls dans Angular ?

Apprenez les bases du rendu HTML et CSS, à la manière angulaire.

À l’aide d’Angular, vous pouvez séparer des pages, des boîtes de dialogue ou d’autres sections de votre application en composants. Les composants d’une application Angular sont principalement constitués de fichiers HTML, CSS et TypeScript.

Dans le fichier TypeScript, vous pouvez ajouter toute logique nécessaire au fonctionnement de l’interface utilisateur, telle que la récupération de données à partir d’un serveur.

Vous pouvez également restituer le code HTML et CSS du composant à l’aide de TypeScript, en spécifiant ses attributs de modèle et de style. Vous pouvez utiliser templateUrl ou styleUrls pour créer un lien vers des fichiers HTML ou CSS externes.

Qu’est-ce que le template et templateUrl dans Angular ?

Lorsque vous créer votre propre composant dans Angular, vous pouvez afficher le code HTML correspondant à l’aide d’un modèle. Vous pouvez écrire votre modèle HTML de deux manières :

Vous pouvez écrire votre code HTML dans un modèle dans le fichier TypeScript lui-même.
Vous pouvez écrire votre code HTML dans un fichier externe et lier le fichier TypeScript à ce fichier HTML.

Dans un nouveau composant, vous pouvez définir les attributs “template” ou “templateUrl” en fonction de l’endroit où vous écrivez votre code HTML.

Créer un nouvelle application angulaire.
Dans le terminal de votre application, lancez le ng générer un composant commande pour créer un nouveau composant. Appelez le nouveau composant “about-page”.
```
ng generate component about-page
```
Dans app.component.html, remplacez le code actuel par des balises pour votre nouveau composant :
```
<app-about-page></app-about-page>
```
Ouvrez le about-page.component.ts dossier. Si vous n’avez pas beaucoup de code HTML, vous pouvez utiliser l’attribut template pour l’écrire directement dans le fichier TypeScript. Remplacez le décorateur @Component par ce qui suit :
```
@Component({
selector: 'app-about-page',
template: '<h2>About Page</h2><br><p>This is rendering the HTML from the TypeScript file!</p>'
})
```

Si vous souhaitez inclure un modèle multiligne, vous pouvez utiliser des guillemets arrière à la place :

@Component({
selector: 'app-about-page',
template: `<h2>About Page</h2>
<br>
<p>This is rendering the HTML from the TypeScript file!</p>`
})

Dans le terminal, tapez ng servir pour compiler votre code et l’exécuter dans un navigateur Web. Ouvrez votre application à l’adresse http://localhost:4200/. Votre code HTML du fichier TypeScript s’affichera sur la page.
Dans about-page.component.ts, remplacez “template” par “templateUrl” à la place. Incluez le lien vers le fichier HTML externe du composant. Vous pouvez utiliser “templateUrl” si vous avez un code HTML plus complexe qui nécessite son propre fichier.
```
@Component({
selector: 'app-about-page',
templateUrl: './about-page.component.html'
})
```

Ajoutez du code HTML au about-page.component.html dossier:

<h2>About Page</h2>
<p>This is rendering the HTML from the HTML file!</p>

Revenez à votre navigateur ou relancez ng servir pour recompiler votre code. Ouvrez votre application à l’adresse http://localhost:4200/. Le navigateur rend maintenant le HTML à partir du about-page.component.html dossier.

Que sont les styles et les styleUrls dans Angular ?

Comme pour le HTML, vous pouvez utiliser “style” ou “styleUrls” selon l’endroit où vous choisissez de stocker votre CSS.

Vous pouvez inclure CSS dans le code TypeScript si vous avez des déclarations CSS très simples. Sinon, vous pouvez utiliser “styleUrls” pour lier le fichier TypeScript à un CSS externe contenant plus de styles.

Dans votre application Angular précédemment créée, ouvrez le about-page.component.ts dossier. Ajoutez un attribut “styles” au composant. Dans “styles”, ajoutez votre style CSS pour la page :
```
@Component({
selector: 'app-about-page',
templateUrl: './about-page.component.html',
styles: ['h2 {color:red}','p {color:green}']
})
```
Dans le terminal, tapez ng servir pour compiler votre code et l’exécuter dans un navigateur Web. Ouvrez votre application à l’adresse http://localhost:4200/ pour afficher le style spécifié dans le fichier TypeScript.
Si vous avez beaucoup de CSS, utilisez “styleUrls” au lieu de “styles”, pour lier le fichier TypeScript à un fichier CSS externe. Dans about-page.component.tsremplacez le décorateur @Component par ce qui suit :
```
@Component({
selector: 'app-about-page',
templateUrl: './about-page.component.html',
styleUrls: ['./about-page.component.css']
})
```
Ajoutez du style CSS à about-page.component.css:
```
h2 {
color: blue
}
p {
color: darkorange
}
```
Revenez à votre navigateur ou relancez ng servir pour recompiler votre code. Ouvrez votre application à l’adresse http://localhost:4200/ pour afficher les styles utilisés à partir du fichier CSS externe.

Rendre le HTML d’un composant en Angular

Vous connaissez maintenant les différentes façons de rendre votre contenu HTML et CSS dans une application Angular. Vous pouvez déterminer l’approche que vous souhaitez utiliser en fonction de la complexité de votre code HTML et CSS.

Si vous êtes intéressé, vous pouvez explorer comment transmettre des données entre les fichiers HTML et TypeScript d’un composant angulaire.

— to news.google.com