Vos premiers Components

Suite à l’article précédent, vous avez pu générer votre premier projet et lancer un serveur http grace à 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 <nom du préfixe> comme ceci :
capture-decran-2016-10-08-a-18-37-18

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 modifer notre Component en supprimant le fichier app.component.html et en modifiant le code comme ceci :

Cela nous donne le résultat suivant :

capture-decran-2016-10-08-a-19-01-59

Pour rappel, le fichier html généré par Angular-Ci 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 :

capture-decran-2016-10-08-a-20-20-06

Imbrigation de Components

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

capture-decran-2016-10-09-a-14-23-14

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 :

capture-decran-2016-10-08-a-20-31-10

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 <app-child> dans le template du Component appComponent. Plutôt simple non ?

Le résultat est étonnant !

capture-decran-2016-10-09-a-10-13-18

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 élement html h1. Pourtant, le premier h1 est bien rouge et le second bleu. Cela est du à la portance d’un Component, pour réaliser ce tour de magie, Angular 2 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 2 va ajouter des attributs différents aux balises h1 des deux Components pour pouvoir attribuer des styles css différents.

capture-decran-2016-10-09-a-10-24-20

Angular 2 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 :

capture-decran-2016-10-09-a-10-35-30

Inserer du contenu dans un Component

Pour illuster ce mécanisme, nous allons créer un nouveau Component que nous allons appeler cadre. Pour cela nous allons nous placer dans le repertoire src/app/child :

capture-decran-2016-10-09-a-11-31-57
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 <app-root> contient Loading… , et pourtant, ce Loading… disparait lorsque votre Component est initialisé au profit du contenu du template.

et-bien-jfais-5vmi8t

Pour faire cela, Angular 2 nous offre la balise <ng-content>. 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 :

capture-decran-2016-10-09-a-12-41-11
71945688

Suivez Learn-Angular.fr pour suivre l’actualité du blog http://www.learn-angular.fr

If you liked this, click the💚 below so other people will see this here on Medium.

Like what you read? Give Learn-Angular.fr a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.