Comprendre l'encapsulation de vue angulaire

Dans cet article, je vais vous présenter l'encapsulation de vues angulaires et montrer pourquoi chaque membre est important et comment et quand les utiliser.

Angular

Angular, le framework JavaScript (TypeScript) de Google pour la création d'applications Web, mobile ou de bureau, a plus de 71 000 étoiles sur GitHub. Il est géré par l'équipe Angular de Google et une foule de membres de la communauté et d'organisations.

Avant de commencer

Pour pouvoir suivre la démonstration de cet article, vous devriez avoir:

• Un environnement de développement intégré comme VS Code .
• Node version 11.0 ou supérieure installée sur votre ordinateur.
• Node Package Manager version 6.7 ou supérieure (généralement livré avec l'installation Node).
• Angular CLI version 8.0 ou supérieure. [19659007] Version 8 de Angular ou supérieure.
• Téléchargez le projet de démarrage de ce tutoriel ici pour suivre les démonstrations.
• Décompressez le projet et initialisez les modules de nœuds de votre terminal avec cette commande:

   npm   install 
  

D'autres choses qui vous seront utiles sont:

• Une connaissance pratique du framework Angular à un niveau débutant.

Dans cet article, vous aurez une introduction pour afficher l'encapsulation dans Angular pour styliser vos composants angulaires.

Utilisation de composants dans Angular

Angular est un framework JavaScript basé sur des composants. Cela signifie que votre application doit idéalement être intégrée à des composants. La création d'applications dans des composants est importante car vous pouvez facilement les étendre ou les découpler, ce qui vous permet d'être efficace en ayant la capacité de les réutiliser. Ils créent également une distinction entre la présentation et la logique de l'application.

Comment Angular gère le style

Un composant angulaire se compose idéalement du fichier de présentation, de la feuille de style, du fichier du composant lui-même et du fichier de test. Cela signifie que pour chaque composant créé ou généré par la CLI, il existe une feuille de style spécifique pour celui-ci. Angular a été conçu de manière à ce que les styles définis dans la feuille de style du composant soient limités à ce seul composant, quel que soit le nom de la classe. Cela ressemble beaucoup à la définition des variables locales et globales et à leur portée; ce mécanisme de portée est connu sous le nom d'encapsulation.

Premiers pas: Shadow DOM

L'encapsulation est un aspect très critique de la norme moderne de composants Web qui permet de garder chaque composant modulaire et indépendant. Le shadow DOM fait partie de la norme de composant Web moderne qui garantit que l'encapsulation est effectuée via son API, offrant un moyen d'attacher un DOM séparé à un élément. Donc, fondamentalement, le shadow DOM vous permet de cacher la logique DOM derrière d'autres éléments sans affecter aucune autre partie de l'application afin que vous puissiez utiliser des styles étendus dans votre composant de manière isolée.

Shadow DOM in Angular

Les éléments angulaires sont conçus pour faire en sorte que les composants Angular fonctionnent comme des composants Web et qu'ils aient ainsi accès à l'API shadow DOM. Lorsque vous exécutez la commande ci-dessous dans votre CLI:

 ng g c test

le nouveau test de composant généré peut en fait être configuré pour avoir le modèle dans un shadowRoot du DOM afin que les feuilles de style étendues puissent être encapsulées.

Tous les navigateurs ne prennent pas encore en charge les DOM shadow, mais Angular implémente toujours le framework pour réaliser encapsulation en émulant le shadow DOM. Nous le verrons plus loin dans ce post.

Afficher l'encapsulation

Ceci définit les options d'encapsulation de modèle et de style disponibles pour un composant angulaire. L'encapsulation de la vue angulaire comprend trois membres:

Nous allons utiliser une application de démonstration pour comprendre les différents membres de l'encapsulation de la vue angulaire.

Démo

Nous allons créer une application simple avec des boutons et styles pour illustrer divers membres. Si vous avez suivi ce post depuis le début, vous auriez téléchargé et décompressé le canevas angulaire de GitHub . Chargez l'application dans votre environnement de développement intégré (j'utilise VS Code). Ouvrez un nouveau terminal et générez un nouveau composant avec cette commande:

 ng g c test

Ajoutez maintenant ces styles au fichier styles.css dans le dossier racine:

 .btn   {
   display :  inline-block ; 
   background [19659039]:   rgb  ( 166  190  126 ) ; 
   color :  blanc ; 
   rembourrage :   0.4  rem  1.3  rem ; 
   font-size :   1  rem ; 
   text-align :  center ; 
   border :  none ; 
   curseur :  pointeur ; 
   contour :  aucun ; 
   border-radius :   2  px ; 
   margin-right [19659039]:   0,5  rem ; 
   box-shadow :   0   1  px  0   rgba  ([19659044] 0  0  0  0.45 ) ; 
} 
 .btn : hover   {
   opacity [19659039]:   0,8 ; 
} 

Ce sont des styles pour les boutons que nous allons utiliser et un petit effet sur le survol. Ouvrez le fichier app.component.html et nettoyez-le pour qu'il ressemble à ceci:

 < div   style  = " text-align :  center  ] " > 
   < h1 >  Encapsulation en vue angulaire  </  h1 > 
 </  div > 
 < h2 >  Survolez ces boutons factices  </  h2 > 
 < ul > 
   < li   class  =  " btn "  > 
     < h2 > 
       < a   target  =  " _blank "   rel  =  " noopener  "  href  = "  #  " >  Tour of Heroes  </  a > 
     </  h2 > 
   </  li > 
   < li   class  =  " btn  " > 
     < h2 > 
       < a   target  =  " _blank "   rel  =  " noopener  "  href  = "  #  " >  Documentation CLI  </  a > [19659097]
     </  h2 > 
   </  li > 
   < app-test >   </  test d'application > 
 </  ul > 
 < sortie de routeur >   </  sortie de routeur > 

Ici, nous avons une liste simple et nous avons également introduit le composant de test. Accédez à votre fichier test.component.html et remplacez le contenu des travaux de test par le bloc de code ci-dessous:

 < li   class  =  " btn "  > 
   < h2 > 
     < a   target  =  " _blank "   rel  =  " noopener  "  href  = "  #  " >  Angular blog  </  a > [19659095] </  h2 > 
 </  li > 

Enfin, allez dans le fichier test.component.css et ajoutez ces règles:

 .btn : hover   {
   opacity :   0.8 ; [19659038] fond :  noir ; 
} 

Cela change la couleur d'un bouton au survol en noir. Maintenant, tout est correctement configuré pour tester nos membres d'encapsulation de vue.

Exécutez l'application sur le serveur de développement:

 ng serve

Voici à quoi devrait ressembler votre application lorsque vous accédez à l'hôte local: 4200 dans votre navigateur. Vous pouvez remarquer comment le style de portée du composant de test n'affecte pas le reste de l'application.

The None Member

L'une des options dont vous disposez en tant que développeur angulaire est de spécifier que vous ne voulez aucun type de encapsulation des styles définis dans votre projet. Cela peut être très viable pour les projets qui ont beaucoup de contributeurs, comme une équipe distribuée. Vous pouvez avoir une feuille de style ou des guides de style spécifiques que vous ne voulez pas que les gens modifient, vous optez donc pour cette option. Cela signifie également que chaque feuille de style ou règle CSS que vous créez dans le projet est globale quel que soit l'emplacement.

Pour notre démonstration, nous voyons que par défaut l'encapsulation de la vue n'est pas définie sur aucune, donc définissons-la nous-mêmes. Dans votre fichier test.component.ts, allez dans la section style et modifiez la section de définition de composant comme suit:

 @  component  ( {
  sélecteur :   "app-test" 
  templateUrl :   "./ test.component.html" 
  styleUrls :   [ "./ test.component.css" ] 
  encapsulation :  ViewEncapsulation .  Aucun
} ) 

Maintenant, lorsque vous enregistrez votre application, notez la différence dans l'interface utilisateur:

Vous pouvez voir que les styles étendus sont désormais globaux, Ainsi, pour n'importe quel composant, vous pouvez accorder l'accès de votre feuille de style à votre composant parent et aux autres composants de votre projet.

Le membre émulé

Il s'agit de la configuration angulaire par défaut; c'est simplement un émulateur shadow DOM. Angular y parvient en attribuant des attributs personnalisés aux éléments affectés, d'autant plus que certains navigateurs ne prennent pas en charge le shadow DOM. Cela crée en quelque sorte un mécanisme shadow DOM.

Pour tester cela, vous pouvez supprimer la configuration que vous avez ajoutée dans la section ci-dessus ou la définir explicitement comme ceci:

 @  component  ( {
  sélecteur :   "app-test" 
  templateUrl :   "./ test.component.html" 
  styleUrls :   [ "./ test.component.css" ] 
  encapsulation :  ViewEncapsulation .  Émulé
} ) 

Si vous exécutez l'application, vous voyez qu'elle revient à la façon dont elle était au tout début. Il s'agit du paramètre Angular par défaut donc sans le configurer explicitement, il fait toujours la même chose.

The Shadow DOM [19659003] Ici, pour tous les navigateurs prenant en charge le shadow DOM, vous verrez la même sortie que celle que vous avez vue dans la section émulée. La différence est que les styles sont écrits dans l'en-tête du document pour l'émulation, mais dans le DOM shadow, une racine d'ombre est utilisée au niveau du composant.

Si vous inspectez, vous constaterez que l'émulation utilise des attributs fantômes étrangers comme ng content et ng ghost, mais tout ce que vous voyez avec shadow DOM est l'élément parent de la racine de l'ombre. Le code complet de ce didacticiel peut être trouvé ici sur GitHub .

Conclusion

Vous avez été initié à l'encapsulation angulaire et montré pourquoi chaque membre est important et comment et quand les utiliser. Il y avait autrefois un quatrième membre appelé native, mais il est maintenant obsolète dans Angular. Bon piratage!