Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

Angular 2 : Dynamisation des applications

Appliquer une directive d'affichage à son projet

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Vous allez appliquer une directive permettant d'afficher un élément proprement en fonction d'une logique.
06:37

Transcription

Je suis sûr que vous avez essayé. Non ? Allez, un petit exercice pour la fin de cette formation. Ça nous fera du bien. On passera sur beaucoup de choses qu'on a déjà vues. On se rafraîchira la mémoire. Et on verra que tout ce qu'on a fait ensemble permet d'aller plus loin et de réfléchir. Regardez, j'ai codé la StateDirective. Qu'elle est bien cette directive ! Elle est pas si complexe. Je vais l'expliquer. On va d'abord regarder comment je l'ai implémentée dans le HTML. J'ai fait un petit span et j'ai conservé la classe pull-right qui me permet d'afficher le texte au bout. Puis je vais passer la 'state', c'est-à-dire l'item.state. Jusque-là, tout va bien. Bien sûr, je l'ai déclarée et rajoutée. J'ai ajouté la StateDirective à l'intérieur des déclarations. Ça fonctionne et ça génère bien un texte. Mais pas le bon texte : « À livrer » sans couleur. On a le même statut pour tout le monde. Mais c'est normal, ne vous en faites pas. C'est logique : il manque des choses. Voyons d'abord comment je l'ai implémentée et comment on peut procéder simplement. J'ai repris le code qu'on avait avant, et j'ai rajouté un 'input' Voyez que le 'input' est calé sur 'state', c'est le même nom qu'on au-dessus. Pensez à ne pas donner le même nom à la propriété. J'ai mis ça en 'any', mais j'aurais pu le mettre en 'number' parce que le 'state', au final c'est mon 'itemState', donc c'est un 'number'. Je le récupère, je le bind à l'intérieur. Voyez comme c'est facile de récupérer une valeur. Puis je commence à construire dans le constructeur. Donc je construis ma cssClass qui va être 'state, tiret' et l'itemState. On avait 0, 1 ou 2. Donc on a déjà des classes css prévues. Ensuite, je crée le texte « À livrer ». Puis je récupère le 'ElementNode', qui est en fait 'Element, point, nativeElement'. C'est bien, on a tout préparé au début. C'est propre. Après, j'ai fait un petit switch. Si c'est 1, je veux que le texte soit « En cours de livraison ». Si c'est 2, je veux que le texte soit « Commande livrée ». Enfin, j'utilise le renderer qui me permet de faire un 'SetElementClass' sur la 'Node'. La 'Node', c'est simplement 'Element.NativeElement'. Je lui mets un cssClass, et je lui accolle un 'true". Pourquoi ? Regardez la signature ici. Si vous mettez 'false', ça ne s'ajoutera pas aux classes. Si vous mettez 'true', ça s'ajoute. Comme on a déjà un pull-right, on a envie que ça s'ajoute. Du coup, ici on a 'true'. Puis je fais un 'SetText' sur l'élément avec le texte qui m'intéresse. Voyez que c'est très facile de coder une directive qui va faire de la décoration et également structurer un peu. Mais ça ne fonctionne pas. En réalité, ça marche : ça ajoute bien le texte « À livrer », mais ça n'ajoute pas du tout la classe. Pourtant, si je vérifie, mon itemState est bien bindé. Si vous voulez déboguer ce genre de choses, ce serait intéressant de savoir si on a vraiment un itemState. Allons-y à grands coups de console.log. Et on fait 'this, point, itemState'. En rechargeant, on remarquera rapidement dans la console que l'itemState est 'undefined'. Vous voyez toujours où se trouve l'erreur. Ligne 14 sur le state.directive.ts. Ligne 14, c'est bien mon console.log. C'est effectivement 'undefined'. Mais pourquoi ? C'est embêtant. C'est simplement parce que dans le constructeur vous n'avez pas encore accès aux inputs. Ils ne seront accessibles qu'après. Ça veut dire quoi ? On va déplacer tout ça. Et on va utiliser un événement. Quel événement ? NgOnInit. Vous vous souvenez de ce super événement ? Il va apparaître et on aura déjà accès à pas mal de choses. Donc ça, c'est bon. Mais ça veut dire qu'il va falloir créer ici des variables qu'on va réutiliser pour pouvoir mettre Element et Renderer dedans. Je vous conseille de faire une variable Element. On les fait en privé : private element. Mettez-les en 'any' pour être tranquille. Puis on fait une private qui va être directement pour notre renderer, Tapez 'renderer', puis on va mettre du 'any' ici aussi. Ensuite, on définit que 'this element' est égal à 'element'. Ne vous laissez pas perturber par le rouge sur le côté. C'est normal. Ça recharge à chaque fois. Et forcément on a du rouge. 'this renderer'... est égal à 'renderer'. Là, vous avez codé les 2 'this' qui vont nous permettre de travailler. Il faut les remplacer aussi. Ici, on va faire : 'this.element.nativeElement' Et ici, on va faire 'this.renderer'. En-dessous aussi. Puis on enregistre. Là, on ne va plus avoir de rouge. Et regardez. Oh magie, ça fonctionne. « À livrer, En cours de livraison, Commande livrée ». Mais vous allez faire face à un autre problème. Ça marche très bien. On a une super petite directive. Le problème, c'est qu'elle est pas synchro. Si je passe le statut « En cours de livraison », ça reste à « À livrer ». Mais ça devrait être « En cours de livraison ». Et ça devrait être bleu. Que va-t-il se passer ? Il se passe qu'on est en train d'agir sur le OnInit. Au tout début, ça initialise. Quand vous changez quelque chose ici, ça ne vas pas entièrement tout recharger, et encore moins les directives. Lui, il part du principe que pour le moment, ça n'a pas changé grand-chose. Si vous voulez travailler ici sur une directive qui va pouvoir être synchronisée avec un modem, c'est pas ngOnInit qu'il faut utiliser. C'est quoi ? C'est ngOnChanges. C'est lui qui fera le travail de rendu, et surtout pas ngOnInit. Et quand vous aurez le moindre changement, notamment un changement de modèle qui a été utilisé, ça marchera. Et vous pourrez alors travailler sur un contenu qui va évoluer. Regardez, c'est magique : ça évolue. Vous allez pouvoir avoir une directive avec du code métier qui s'amusera à mettre de la couleur, à changer la classe, à travailler sur l'élément, et le texte de l'élément. C'est génial parce qu'on pourra faire un code propre et pur pour travailler de l'interface. Et surtout, dans votre item.html, vous aurez uniquement un petit span et une directive attachée. Superbe ! Et vous pourriez faire ça pour absolument tout afin d'obtenir quelque chose d'extrêmement propre, de découpé au maximum. C'est le mot d'ordre. J'espère que cet exercice vous a fait du bien parce que vous avez pu voir une directive sympa, du travail d'interface, des événements, et surtout comprendre comment tout ça fonctionne ensemble. On a vu absolument tout ce qu'on a vu ensemble depuis le début, et un petit peu plus aussi. C'est un bon exercice d'entraînement. Vous allez maintenant pouvoir vous entraîner à faire ça dans tout le projet, pour absolument tout.

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 !