Introduction

Cette quête permet d'aborder un concept clé d'Angular : les composants. En effet, Angular est un framework dont l'architecture est dite "orientée composant".

Avant de démarrer, assure-toi d'avoir terminé les quêtes suivantes 👇

🤓 À la fin de cette quête, tu seras capable de :

✅ Comprendre l'architecture orientée composant d'Angular ✅ Créer un composant avec Angular

🔧 Angular, un "framework", humm c'est ç'la oui !

Pour rappel Angular est un framework front-end, écrit en Typescript et propulsé par Google. Il nous fournit donc un cadre de travail (framework), c'est-à-dire qu'il nous contraint à organiser notre code d'une certaine façon. Ainsi, 2 projets différents utilisant Angular se ressembleront dans leur organisation.

Mais Angular ne nous apporte pas que des contraintes, il nous apporte surtout des outils. L'un de ces outils est le composant.

Les composants sont si présents au sein d'Angular qu'ils conditionnent jusqu'à son architecture. On dit qu'Angular est un framework front-end orienté composant.

Angular met également à disposition du développeur un nombre assez important d'outils concernant la gestion des formulaires,  des CSS spécifiques, des validateurs de formats de texte, des filtres, etc...

👷‍♀️ Les composants, de la théorie à la pratique

Lorsqu'on développe une application, plus on écrit de code, plus celui-ci a besoin d'être modulaire, réutilisable et encapsulé. Pas de panique, ces termes finiront par te paraitre familier. Pour cela, côté front, les Web Components viennent à notre rescousse. Il s'agit avant tout d'une spécification du W3C en cours de rédaction, mise en avant par les acteurs du Web (les deux éditeurs de la spécification travaillent chez Google). Mais en vrai, ça consiste en quoi  Les Web Components, ce sont :

• Des templates
• Des éléments customisés
• Un peu de Shadow DOM
• De l'encapsulation de style
• Des variables CSS
• Etc...

Pour en apprendre plus sur cette spécification, je t'invite à te rendre à l'adresse suivante :

Comme "Web Components" est avant tout une spécification, il est important de rappeler que chaque éditeur peut en proposer une implémentation personnalisée. Ainsi, il est important de noter que le système de composants d'Angular respecte au mieux les spécifications des Web Components.

Prenons la page d'accueil de Youtube :

On voit que certains éléments se répètent régulièrement sur la page.

Prenons le cas du bloc entouré de rouge. Il se répète 18 fois. Dans un premier temps, tu pourrais être tenté de créer le code HTML/CSS/TS correspondant à un bloc, puis de dupliquer ce code autant de fois que nécéssaire (en changeant quelques détails). Cela reviendrait à dupliquer la quasi même code....17 fois ! 🥴

❌ Dupliquer du code est l'une des pires pratiques possibles. Car un code dupliqué devient de facto très difficile à maintenir et à faire évoluer sur le long terme.

✅ Grâce à Angular, tu vas pouvoir créer un composant, y écrire ton code HTML/CSS/TS et... appeler ce composant autant de fois que tu as besoin. Dans notre exemple, 17 fois.

Toujours est-il qu'avec l'approche en composants, maintenant, si tu souhaites changer un détail, il te suffira alors simplement de te rendre dans le composant et de procéder à la modification. Partout où ton composant est appelé, les modifications seront alors appliquées.

Et c'est juste génial ! 😍

Bon, juste une chose : qui dit fichier dit nom de fichier. Il faut réfléchir à un nom parlant et explicite. Et ça peut prendre du temps !  Pour notre cas, on pourrait par exemple appeler :

• Le composant rouge : "thumbnail-card"
• Le composant vert : "sidebar-item"
• Le composant violet : "chips-item"

Note bien que la vocation première d'un composant est d'être réutilisable. Ici, je peux copier le fichier contenant le composant et le coller au sein d'un autre projet. Il continuera de fonctionner exactement de la même façon.

Challenge 💪

Des boîtes aux quatre coins 📦

→ Pour réaliser ce challenge, crée un nouveau projet Angular sur ta machine et crée un composant Block.

Ajoute ce code dans le fichier block.component.css:

div {
  height: 45px;
  width: 45px;
  border: 3px solid black;
}

L’objectif de ce challenge va être d’obtenir ce résultat dans le navigateur :

• Le CSS du BlockComponent est valide, inutile de le toucher
• L'HTML du BlockComponent doit être modifié
• Tu dois appeler le BlockComponent dans ton AppComponent
• Tu dois ajouter du CSS pour positionner les BlockComponents
• Prends garde avec les imports du composant App : pour l’instant, il manque quelque chose

Critères de validation ✅

• La chaine de caractères “A B C” ne doit être présente qu’une seule fois dans tout ton code
• L’image doit correspondre globalement au screenshot ci-dessus
• Poste l’url vers ton projet hébergé sur Github