Que sont les templateUrls et les styleUrls dans Angular ?

Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation.

À 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.

1. Créer un nouvelle application angulaire.
2. 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 générer un composant sur la page

3. Dans app.component.html, remplacez le code actuel par des balises pour votre nouveau composant :

   <app-about-page></app-about-page>

4. Ouvrez le about-page.component.ts déposer. 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 :

   @Composant({
    sélecteur: 'app-about-page',
    modèle: '<h2>À propos de la page</h2><Br><p>C'est le rendu du HTML à partir du fichier TypeScript !</p>'
   })
   

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

   @Composant({
    sélecteur: 'app-about-page',
    modèle: `<h2>À propos de la page</h2>
   <Br>
   <p>C'est le rendu du HTML à partir du fichier TypeScript !</p>`
   })

6. Dans le terminal, tapez ng servir pour compiler votre code et l'exécuter dans un navigateur Web. Ouvrez votre application sur http://localhost: 4200/. Votre code HTML du fichier TypeScript s'affichera sur la page.
7. 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.

   @Composant({
    sélecteur: 'app-about-page',
    templateUrl: './about-page.component.html'
   })

8. Ajoutez du code HTML au about-page.component.html déposer:

   <h2>À propos de la page</h2>
   <p>C'est le rendu du HTML à partir du fichier HTML !</p>

9. Revenez à votre navigateur ou relancez ng servir pour recompiler votre code. Ouvrez votre application sur http://localhost: 4200/. Le navigateur rend maintenant le HTML à partir du about-page.component.html déposer.

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.

1. Dans votre application Angular précédemment créée, ouvrez le about-page.component.ts déposer. Ajoutez un attribut "styles" au composant. Dans "styles", ajoutez votre style CSS pour la page :

   @Composant({
    sélecteur: 'app-about-page',
    templateUrl: './about-page.component.html',
    modes: ['h2 {couleur: rouge}','p {couleur: vert}']
   })

2. Dans le terminal, tapez ng servir pour compiler votre code et l'exécuter dans un navigateur Web. Ouvrez votre application sur http://localhost: 4200/ pour afficher le style spécifié dans le fichier TypeScript.
3. 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.ts, remplacez le décorateur @Component par ce qui suit :

   @Composant({
    sélecteur: 'app-about-page',
    templateUrl: './about-page.component.html',
    styleUrl: ['./about-page.component.css']
   })

4. Ajoutez du style CSS à about-page.component.css:

   h2 {
    Couleur bleue
   }
   p {
    couleur: orange foncé
   }

5. Revenez à votre navigateur ou relancez ng servir pour recompiler votre code. Ouvrez votre application sur 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.