Suite à l’article précédent, vous avez pu générer votre premier projet et lancer un serveur HTTP grâce à la commande ng serve. Je vous propose maintenant d’étudier de plus près notre premier component AppComponent présent dans src/app. En voici le code :

Le selector est préfixé par app par défaut. Il est possible de changer ce prefix lors de la génération du projet en ajoutant -prefix comme ceci :

 

 

Les propriétés templateUrl et styleUrls

Angular CLI a pris le parti d’utiliser la propriété templateUrl pour gérer la partie template de @Component. Cela a pour avantage de dissocier le code du template, mais il est possible de choisir la propriété template à la place. Dans ce cas, le code HTML du component se trouvera dans le décorateur @Component. Si votre template a besoin de plusieurs lignes pour plus de lisibilité, vous pouvez encadrer votre template par les caractères ``. Nous allons donc en profiter pour modifier notre component en supprimant le fichier app.component.html et en modifiant le code comme ceci :

 

 

Cela nous donne le résultat suivant :

 

 

Pour rappel, le fichier HTML généré par Angular CLI est celui-ci :

 

 

De la même façon, nous pouvons supprimer le fichier app.component.css et remplacer stylesUrl par la propriété styles. Le fichier app.component.css ne contenait pas de styles, mais nous allons en profiter pour corriger cela avec un peu de rouge :

 

 

Cela va nous donner :

 

 

Imbrication de Components

Lors de vos développements futurs, vous aurez souvent besoin d’imbriquer vos Components dans d’autres components. Une application classique Angular peut ressembler à ceci :

 

 

Notre AppComponent intègre plusieurs Components tels que les menus, le body, qui à leur tour peuvent en intégrer d’autres. Pour illustrer cela, nous allons créer un nouveau component child à l’aide d’Angular CLI, et en se plaçant à la racine du projet, avec la commande suivante :

 

 

Le Component, ainsi généré, peut être modifié comme ceci  : 

 

 

Nous allons maintenant inclure ce component dans notre premier component. Pour cela, il suffit d’ajouter notre balise dans le template du component appComponent. Plutôt simple, non ?

 

 

Le résultat est étonnant !

 

L’usage du Shadow DOM

Pourquoi étonnant ? Regardez les styles CSS de ces deux composants : ils indiquent tous les deux la couleur du même élément HTML h1. Pourtant, le premier h1 est bien rouge et le second bleu. Cela est dû à la portance d’un Component, pour réaliser ce tour de magie, Angular n’utilise pas le shadow DOM par défaut, mais un comportement bien à lui qui lui permet de rendre étanche entre eux les styles CSS de ses Components. Si l’on regarde de plus près le source généré, on peut voir qu’Angular va ajouter des attributs différents aux balises h1 des deux Components pour pouvoir attribuer des styles CSS différents.

 

 

Angular propose en fait trois modes d’encapsulation du DOM :

• ViewEncapsulation.None – Ni shadow DOM, ni aucun mécanisme d’encapsulation de style CSS.

• ViewEncapsulation.Emulated – Pas de shadow DOM, mais une émulation du Shadow DOM. C’est le comportement par défaut.

• ViewEncapsulation.Native – Utilisation du véritable shadow DOM. Superbe sur Chrome, mais cela s’arrête là pour le moment. Ni Safari, ni Firefox ne supporte ce mécanisme.

 

 

Et si l’on regarde maintenant le source généré, on distingue l’apparition d’un mystérieux #shadow-root qui encapsule les Components entre eux :

 

 

 

Insérer du contenu dans un Component

 

Pour illustrer ce mécanisme, nous allons créer un nouveau component que nous allons appeler cadre. Pour cela nous allons nous placer dans le répertoire src/app/child :

 

J’ai utilisé l’option –flat pour indiquer que je désire voir ce nouveau component dans le répertoire courant.

 

Maintenant, je vais me servir de ce nouveau component comme un cadre (au sens CSS). Dans ce cadre, je désire mettre le texte de mon choix. Ce texte ne fera donc pas partie du template du component cadre. Si vous regardez votre fichier index.html, vous pouvez vous rendre compte que votre balise contient Loading… , et pourtant, ce Loading… disparait lorsque votre component est initialisé au profit du contenu du template.

 

Pour faire cela, Angular nous offre la balise . Cette dernière se place dans le component cadre dans notre cas, à l’endroit où on accepte de recevoir un contenu externe. Voici notre component cadre modifié pour répondre à notre besoin :

 

 

et le code de notre AppComponent utilisant ce nouveau component :

 

 

Le résultat est magnifique ! Nous pouvons envoyer du texte dans un component :