Angular 2 : Dynamisation des applications

Ajouter de la décoration

Testez gratuitement nos 1271 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
AngularJS permet de définir des directives pour de la décoration. Il s'agit de jouer sur le contenu.
06:12

Transcription

On a beaucoup parlé des directives de structuration, mais absolument pas des directives de décoration. Sachez qu'Angular vous permet aussi de créer des directives de décoration. Prenons un tout petit exemple pour que vous compreniez comment ça marche. Je vais stocker mes directives dans un dossier Directives. Et à l'intérieur de ce dossier, je vais créer un 'Highlight.directive.ts'. Ça, c'est toujours généré par Angular. On a pas besoin de s'en occuper. Le js et le js.map ne servent à rien, en tout cas dans notre exemple. Ici, je vais créer une directive avec quelques petits éléments. C'est très simple à faire. On va d'abord importer 'Directive', 'ElementRef', 'Input' et 'Renderer'. Comment ça marche tout ça ? Il suffira de créer une classe très simple qui modifiera le contenu HTML. Ajouter ou travailler des informations, on peut faire à peu près tout ce qu'on veut. On va lui attribuer un selector qui s'écrira simplement entre crochets. Je vais l'appeler 'Highlight', et on va le copier. On va créer une classe qui sera 'Export, HighlightDirective'. Et dans le constructeur, on va créer les appels à 'Element' qui sera une référence à l'élément qui portera cette directive-là. Et ce sera sous forme d'attributs. Vous verrez, c'est très simple. Ensuite, je vais utiliser le Renderer. Le Renderer de Angular, c'est quoi ? Je vous conseille de regarder ce qui se passe quand vous ajoutez un point derrière le Renderer. Voyez qu'il y a beaucoup de possibilités avec lesquelles on peut travailler. On peut détruire la vue, la détacher, mettre des écouteurs, ou simplement créer un élément si on a envie. On peut faire beaucoup de choses. On peut aussi simplement jouer avec l'élément en question. Par exemple, le 'SetElementStyle' prendra 2 paramètres : l'élément sur lequel on veut agir, et ensuite le style. Je dois récupérer mon élément ici, celui sur lequel je veux agir. Je ne peux pas agir directement sur l'élément qui est passé parce qu'il sera toujours une référence. Il faut donc récupérer l'élément natif qui se trouve derrière cette référence pour pouvoir travailler avec. Je vais donc récupérer ici 'Element.nativeElement' et je vais lui appliquer un 'BackgroundColour yellow'. On aura plein de possibilités dans les directives, mais ça, c'est suffisant pour en voir le fonctionnement. Il va maintenant falloir ajouter cette directive. À quoi je l'ajoute ? À mon main.ts ? Non, c'est impossible puisqu'il s'occupe juste du 'Bootstrap' de l'application. Je vais ajouter ce module directement dans 'App.module.ts'. C'est le 'App.module.ts' qui déclare ce qui est utilisable. Pas dans les Imports parce que ça ne fait pas partie d'un module, mais dans les Déclarations. On va donc l'importer dans les Déclarations. Il faut d'abord travailler un import ici, et lui demander d'importer 'HighlightDirective'. Depuis quel emplacement ? Depuis l'emplacement « point, point, slash, Directive » et enfin le nom de notre fichier : 'Highlight.Directive'. On va ainsi pouvoir l'ajouter. Faites bien attention à respecter exactement ce que vous avez écrit. Ici, j'ai bien 'directive'. Mais j'ai simplement besoin d'1 point, et pas de 2. Respectez bien ça, sinon ça ne marchera pas. 'directive' avec un S qu'on a là. Et ensuite 'highlight'. Et regardez, j'ai oublié le H. Voyez que la moindre erreur dans le code créera toujours des petits problèmes ici. Et ça nous permet de les corriger. Pensez à bien respecter la façon dont c'est écrit pour éviter les problèmes. Je vous conseille aussi de supprimer ce qui ne sert à rien, c'est-à-dire les 'Highlights'. Là, on une petite erreur. Vous supprimez. Faites un peu de nettoyage. Maintenant qu'on a ça et que c'est bien déclaré ici, Du coup, il va falloir le mettre dans les déclarations pour que ça fonctionne. On le passe donc dans les déclarations, et on enregistre. À partir de là, notre directive qui est finalement juste une sorte de petit module qu'on a rajouté va fonctionner. Il va falloir l'utiliser. Mais comment ? Ça va être très simple. Ce que je veux, c'est que le nom du client puisse être highlighté, c'est-à-dire qu'on va avoir un 'Background colour yellow', donc un espèce de surlignement. Je vais donc agir sur ce qui m'intéresse, c'est-à-dire l'item.html. Vous avez ici le nom de la personne, qui est en plus uppercasé. On va faire un petit span qui va entourer cet élément. C'est toujours très important d'avoir des emplacements sur lesquels on peut agir pour agir uniquement sur cet élément-là. Et sur ce span, je vais demander un highlight. Je vais enregistrer cette partie-là. L'application va recharger. Et si je descends, c'est magique. Ça vient s'appliquer automatiquement. Vous remarquez qu'on peut avoir des directives structurantes, mais aussi des directives de décoration qui vont nous permettre rapidement d'agir sur des petites parties du code. C'est une très bonne pratique aussi. Ça permet de contenir de la logique de décoration à l'intérieur d'une directive. Si vous voulez faire un petit exercice là-dessus, ce serait très simple pour vous de créer une petite directive de décoration qui viendrait mettre la bonne couleur à cet endroit-là. Ça vous éviterait d'avoir de la logique dans item.html pour venir simplement afficher une information. Parce que c'est ce qui se passe là : on affiche le statut. On peut tout à fait en faire une directive et lui dire de mettre le texte à l'intérieur de l'élément, avec un innerHTML, et la bonne couleur. La couleur étant une classe, on peut appliquer la classe à l'élément. Et on aurait ainsi simplement ici une directive 'status' ou 'state'. Et on pourrait utiliser l'item.state pour rendre la couleur et le bon texte.

Angular 2 : Dynamisation des applications

Apprenez à dynamiser vos applications avec AngularJS. Créez un module parent, utilisez le moteur d’animation intégré, découvrez les cycles de vie disponibles, etc.

2h03 (28 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :31 oct. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !