1. Structure d’un composant Angular
Un composant Angular est une unité fondamentale d’une application Angular. Il est responsable de la gestion d’une partie de l’interface utilisateur (UI) grâce à sa logique et à sa présentation. Il est composé de trois éléments principaux : le fichier TypeScript (.ts), le fichier HTML (.html) et le fichier CSS ou SCSS (.css ou .scss).
1.1 Définition d’un composant
Un composant Angular est une classe TypeScript annotée avec le décorateur @Component. Le décorateur @Component est utilisé pour fournir des métadonnées supplémentaires à la classe, telles que le sélecteur CSS utilisé pour insérer le composant dans le DOM, le fichier HTML de présentation du composant et le fichier CSS ou SCSS pour les styles du composant.
1.2 Anatomie d’un composant
Voici un exemple de code d’un composant Angular simple :
Exemple de code Typsecript:
// app.component.ts
import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘Mon application Angular’;
}
Exemple de code Html:
<!– app.component.html –>
<h1>{{ title }}</h1>
Exemple de code Css:
/* app.component.css */
h1 {
color: red;
}
Dans cet exemple, le fichier app.component.ts est le fichier TypeScript contenant la classe AppComponent et le décorateur @Component. Le fichier app.component.html est le fichier HTML qui définit la présentation du composant, et le fichier app.component.css contient les styles spécifiques à ce composant.
1.3 Les fichiers de style
Les fichiers de style d’un composant Angular sont généralement des fichiers CSS ou SCSS. Les fichiers CSS sont des feuilles de style « simples », tandis que les fichiers SCSS sont des fichiers de préprocesseur CSS (SASS) qui permettent d’utiliser des fonctionnalités avancées telles que les variables, les fonctions et les mixins. Dans un projet Angular, il est courant d’utiliser des fichiers SCSS pour bénéficier de ces fonctionnalités avancées et faciliter la maintenance du code.
2. Styles globaux et locaux
Lors du développement d’une application Angular, il est important de savoir comment gérer les styles globaux et locaux. Les styles globaux s’appliquent à l’ensemble de l’application, tandis que les styles locaux ne concernent qu’un seul composant.
2.1 Styles globaux
Les styles globaux sont définis dans un fichier CSS ou SCSS qui est généralement situé à la racine du projet. Dans un projet Angular créé avec Angular CLI, ce fichier est généralement nommé styles.css (ou .scss). Tous les styles définis dans ce fichier s’appliqueront à l’ensemble de l’application.
Exemple de code pour les styles globaux :
/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
font-size: 24px;
font-weight: bold;
}
Dans cet exemple, les styles définis dans styles.css s’appliquent à l’ensemble de l’application. Tous les éléments <body> et <h1> de l’application utiliseront ces styles.
2.2 Styles locaux
Les styles locaux sont définis dans un fichier CSS ou SCSS spécifique au composant et ne s’appliquent qu’à ce composant. Ils sont généralement définis dans un fichier portant le même nom que le composant, avec l’extension .component.css (ou .component.scss).
Exemple de code pour les styles locaux :
Exemple de code Typsecript:
// mon-composant.component.ts
import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-mon-composant’,
templateUrl: ‘./mon-composant.component.html’,
styleUrls: [‘./mon-composant.component.css’]
})
export class MonComposantComponent {
// …
}
Exemple de code CSS:
/* mon-composant.component.css */
.mon-titre {
color: blue;
font-weight: normal;
}
Dans cet exemple, le style défini dans mon-composant.component.css ne s’appliquera qu’aux éléments du composant MonComposantComponent ayant la classe .mon-titre.
2.3 Combinaison des styles globaux et locaux
Dans la pratique, il est courant de combiner les styles globaux et locaux pour gérer efficacement les styles d’une application Angular. Les styles globaux sont utilisés pour définir des styles de base, tels que les polices, les couleurs et les marges, tandis que les styles locaux sont utilisés pour personnaliser l’apparence d’un élément d’un composant spécifique.
Exemple de code combinant les styles globaux et locaux :
Exemple de code CSS:
/* styles.css – Styles globaux */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
font-size: 24px;
font-weight: bold;
}
Exemple de code CSS:
/* mon-composant.component.css – Styles locaux */
.mon-titre {
color: blue;
font-weight: normal;
}
Dans cet exemple, les styles globaux s’appliquent à l’ensemble de l’application, tandis que les styles locaux ne s’appliquent qu’au composant MonComposantComponent. En combinant les styles globaux et locaux, il est possible de créer des styles de base pour l’ensemble de l’application tout en permettant à chaque composant d’avoir une apparence personnalisée.
Voici un exemple d’utilisation de ces styles dans le fichier HTML du composant :
<!– mon-composant.component.html –>
<h1 class= »mon-titre »>Titre de mon composant</h1>
<p>Contenu de mon composant…</p>
Dans cet exemple, l’élément <h1> utilisera les styles globaux pour la taille de la police et la graisse de la police, ainsi que le style local pour la couleur. Les autres éléments du composant, tels que le paragraphe <p>, hériteront des styles globaux définis dans styles.css.
Cette approche facilite la maintenance du code et améliore la cohérence visuelle de l’application.
3. Utilisation de CSS dans un composant Angular
Il existe plusieurs façons d’ajouter des styles CSS dans un composant Angular.
3.1 Inline styles
Les styles inline sont définis directement dans le décorateur @Component en utilisant la propriété styles. Ils sont spécifiques à un composant et sont généralement utilisés pour des styles simples ou pour un prototypage rapide. Il n’est pas recommandé de les utiliser à outrance au risque d’obtenir un code difficile à maintenir, et peu pratique pour garder une cohérence graphique sur l’ensemble de l’application.
Exemple de code pour les styles inline :
// mon-composant.component.ts
import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-mon-composant’,
template: ‘
<h2 class= »mon-titre »>Titre de mon composant</h2>
<p>Contenu de mon composant…</p>’,
styles: [
.mon-titre {
color: green;
}
],
})
export class MonComposantComponent {
// …
}
Dans cet exemple, le style inline .mon-titre est défini directement dans le décorateur @Component et s’appliquera uniquement au composant MonComposantComponent.
3.2 Fichier CSS externe
Les styles peuvent être définis dans un fichier CSS externe et liés au composant en utilisant la propriété styleUrls dans le décorateur @Component. Cette méthode est préférable.
Exemple de code pour un fichier CSS externe :
Exemple de code Typescript:
// mon-composant.component.ts
import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-mon-composant’,
templateUrl: ‘./mon-composant.component.html’,
styleUrls: [‘./mon-composant.component.css’],
})
export class MonComposantComponent {
// …
}
Exemple de code Css:
/* mon-composant.component.css */
.mon-titre {
color: orange;
text-decoration: underline;
}
Dans cet exemple, le fichier CSS externe mon-composant.component.css contient les styles spécifiques au composant MonComposantComponent et est lié au composant à l’aide de la propriété styleUrls.
3.3 Emulation du Shadow DOM avec ViewEncapsulation
Angular offre une fonctionnalité appelée ViewEncapsulation qui permet d’émuler le comportement du Shadow DOM pour les styles des composants. En utilisant l’encapsulation de la vue, les styles définis pour un composant ne s’appliqueront qu’à ce composant et n’affecteront pas les autres composants ou éléments de l’application.
Exemple de code pour l’émulation du Shadow DOM avec ViewEncapsulation :
// mon-composant.component.ts
import { Component, ViewEncapsulation } from ‘@angular/core’;
@Component({
selector: ‘app-mon-composant’,
templateUrl: ‘./mon-composant.component.html’,
styleUrls: [‘./mon-composant.component.css’],
encapsulation: ViewEncapsulation.ShadowDom,
})
export class MonComposantComponent {
// …
}
4. Bonnes pratiques
Pour une application Angular maintenable et bien structurée, il est important de suivre certaines bonnes pratiques en matière de style.
4.1 Les styles locaux pour les composants
Chaque composant doit avoir ses propres styles locaux. Cela permet de maintenir les styles spécifiques à chaque composant organisés et faciles à gérer.
4.2 Les styles globaux pour les styles communs
Les styles communs à l’ensemble de l’application, tels que les polices, les couleurs et les marges, mais aussi les styles d’éléments utilisés à différents endroits comme les formulaires, les titres… doivent être définis dans le fichier de styles globaux. Cela garantit une apparence cohérente dans toute l’application et facilite la maintenance des styles.
4.3 Variables CSS ou variables SCSS
L’utilisation de variables CSS ou SCSS permet de centraliser la gestion des valeurs réutilisées dans les styles de votre application, comme les couleurs, les tailles de police et les espacements. Cela facilite la maintenance et les modifications ultérieures des styles.
Exemple de code avec des variables SCSS :
// _variables.scss
$primary-color: #3366ff;
$secondary-color: #ff3366;
$font-size-base: 16px;
// styles.scss
@import ‘./variables’;
body {
font-size: $font-size-base;
color: $primary-color;
}
a {
color: $secondary-color;
}
4.4 Méthodologie de nommage des classes
Utiliser une méthodologie de nommage des classes, telle que BEM (Block, Element, Modifier) ou SMACSS (Scalable and Modular Architecture for CSS), permet d’assurer la clarté et la cohérence des noms de classe CSS dans votre application.
Exemple de code avec la méthodologie BEM :
/* mon-composant.component.css */
.mon-composant {
/* … */
}
.mon-composant__titre {
/* … */
}
.mon-composant__titre–important {
/* … */
}
4.5. ViewEncapsulation pour isoler les styles de composant
L’utilisation de l’encapsulation de la vue avec ViewEncapsulation.Emulated ou ViewEncapsulation.ShadowDom permet d’isoler les styles d’un composant et d’éviter les conflits de style entre les composants.
4.6 Unités relatives
Utilise des unités relatives telles que em, rem, % ou vw/vh pour faciliter l’adaptation de ton application aux différentes tailles d’écran et résolutions.
4.7 Styles simples et maintenables
Évite d’utiliser des styles trop complexes ou difficiles à comprendre. Préfère des sélecteurs simples et clairs pour faciliter la maintenance et la compréhension du code.
4.8 Media queries pour un design responsive
Les media queries sont un outil essentiel pour créer une application Angular adaptative et réactive. Ils permettent d’appliquer des styles en fonction de la largeur de l’écran, de la résolution, ou d’autres caractéristiques de l’appareil de l’utilisateur.
Exemple de code avec des media queries :
/* mon-composant.component.css */
.mon-composant {
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.mon-composant {
flex-direction: row;
}
}
4.9 Préprocesseurs CSS
Les préprocesseurs CSS, tels que Sass ou Less, offrent des fonctionnalités supplémentaires, telles que les variables, les fonctions, les mixins et les opérations, qui peuvent faciliter l’organisation et la maintenance des styles de votre application.
Exemple de code avec Sass :
// _mixins.scss
@mixin box-shadow($color) {
box-shadow: 0 2px 4px $color;
}
// mon-composant.component.scss
@import ‘./mixins’;
.mon-composant {
@include box-shadow(#000);
}
4.10. Commente et documente tes styles
Il est important de commenter et de documenter les styles de ton application Angular pour faciliter la compréhension et la maintenance des styles par toi-même et par les autres développeurs du projet.
Exemple de code avec des commentaires :
/* mon-composant.component.css */
/* Le style de base pour le titre du composant */
.mon-composant__titre {
font-size: 24px;
font-weight: bold;
}
/* Style pour les titres importants */
.mon-composant__titre–important {
color: red;
}