Angular 2 : Dynamisation des applications

Utiliser les évènements comme log

Testez gratuitement nos 1257 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Les évènements peuvent vous en apprendre beaucoup sur une application. Voyez comment les utiliser comme source de renseignements.
05:49

Transcription

Les évènements ça peut aussi servir de log Ça peut donc nous permettre de savoir ce qui se passe dans l'interface Regardez Ç'est assez génial parce qu'on va pouvoir câbler du log sur des changements sur notre modèle et grâce à ça ça va nous permettre de savoir exactement quelles sont les implications quand on va faire quelque chose Par exemple je clique sur un bouton je vois le state qui évolue Pour réaliser ça on va avoir besoin de quelques petites fonctionnalités on va devoir se câbler sur 3 évènements ngOnInit ngOnChanges et ngDoCheck ngOnChanges c'est vraiment pour l'exemple et c'est pour vous montrer ce qui se passe et vraiment faire le parallèle entre les 2 ngOnChanges et ngDoCheck Alors je m'explique Dans le ngOnChanges voyez qu'ici j'ai récupéré les changes qui sont un tableau de propriétés donc de strings et un objet surtout simpleChange Si vous utilisez comme ça le typage avec simpleChange vous serez obligés en haut de le déclarer dans les imports Ici on va avoir une petite boucle qui va venir récupérer les propriétés qui va vérifier si la propriété c'est du state et qui va nous afficher la valeur Alors ça ça ne marchera jamais Mais je l'ai mis pour que vous puissiez voir exactement ce qui se passe En fait ça c'est pas possible dans le sens où la propriété actuelle n'est pas une propriété directe J'entends par propriété directe quelque chose de déclaré comme ça En fait ce qu'il faudrait c'est que ce soit cette propriété qu'on vienne câbler ici Parce que le state actuellement il est sur item donc c'est item.state qui devra évoluer Donc ça vous pourrez l'utiliser pour des propriétés directes mais pas pour des objets Si vous voulez voir les modifications dans un objet vous serez obligés de passer par un doCheck Le doCheck vous permettra de faire des vérifications sur la modification d'un objet et pour ça vous devrez la coder Alors regardez comment je l'ai codé c'est assez simple Je vais vérifier que item.state n'est pas égal au oldstate et le oldstate dans le ngOnInit je l'ai stocké Faire que au démarrage quand mon objet est passé à mon composant je récupère mon state actuel je le mets dans oldstate et je m'attends à quand il y a une modification repasser dans doCheck pour vérifier si effectivement ce state a changé Si il change Je vais utiliser un console.log comme ça et puis je vais simplement afficher le old et afficher l'actuel avec now Et ensuite j'oublierai pas surtout et ça c'est très important de venir remettre le state actuel dans oldstate pour continuer à pouvoir voir ce qui se passe Alors si j'enregistre ça et que je recharge mon interface effectivement on va bien voir que là quand je vais changer le statut je vais avoir l'affichage directement en console Mais comme je l'ai dit, et je le répète encore une fois on pourrait tout à fait se câbler sur le doCheck pour faire autre chose et pour appeler pourquoi pas un service particulier qui aura de la logique métier à appliquer Mieux que ça ici vous remarquez que pour faire le changement de state on utilise une fonction changeState et cette fonction-là on pourrait s'en passer C'est pas forcément la meilleure des choses à faire c'est vrai qu'il vaut mieux garder de la logique dans les fonctions et avoir peut-être même en plus de ça en service qui la joue Mais de temps en temps ça va être utile si on veut rapidement développer d'utiliser les évènements plutôt que d'utiliser ce genre de choses Je vais l'enlever et je vais vous montrer comment on pourrait réduire le code un tout petit peu sans avoir de fonctions Il faudra faire très attention parce que regardez ici on va vouloir interagir sur le state et on sait que le state à chaque fois qu'on va appliquer sur un statut va évoluer à +1 Mais il pourrait y avoir un petit beug Mais c'est pas grave, pour le teste vous aurez vu que ça fonctionne et qu'il y a pas de problème Alors faut faire attention à autre chose c'est que là on est sur le clic d'un bouton ça veut dire que concrètement on va devoir ici faire le preventDefault sinon ça marchera pas event.preventDefault on va commencer par ça et quand vous aurez câblé ça ; on va faire évoluer le state item.state serait égal item.state+1 par exemple Alors on pourrait également dire simplement qu'il est égal ici à 2 et comme ça on a pas de beug On récupère cette partie là également et on va la mettre sur celle-ci On sait que quand je clique là ça doit être égal à 1 Ce qui veut dire que sur le clic sur ce lien et le clic sur ce lien on a bien une évolution du state Ce qui veut donc dire aussi que on va avoir un rechargement de l'interface et ça va passer dans doCheck et ça devrait fonctionner et on devrait bien avoir ici l'information Plus qu'à tester on descend on change et effectivement vous voyez bien qu'on a un rechargement Si je clique ici c'est pareil j'ai bien un rechargement Donc on a déplacé de la logique on l'a mis sur le composant directement dans le HTML ce qui est tout à fait possible Rappelez-vous toujours de bien faire les preventDefault sur les event par exemple pour pas avoir de rechargement d'interface Et on s'est basés sur les évènements pour connaitre les modifications Une dernière chose qu'on peut faire c'est écraser Quand je dis écraser ça veut dire qu'en fait vous pouvez venir travailler sur par exemple ici toutes les commandes le nom qui est attaché à chaque item et dans le ngOnChange l'écraser au passage directement de l'objet au composant je vais enregistrer vous allez voir que tout le monde va s'appeler Toto regardez Toto, Toto et Toto Donc vous avez des possibilités ici de venir travailler aussi sur les modèles directement ici sur le ngOnChange sachant que ça passe à chaque fois ça va passer à l'intérieur Vous pouvez par exemple appliquer des réductions sur une commande ou provisoirement faire des modifications dans l'interface Il y a plein de possibilités avec les évènements que l'on pourra utiliser L'idée évidemment c'est de vous montrer les possibilités offertes et ce qu'on pourrait faire avec On va voir qu'il est également possible de récupérer des références à des objets de l'interface quand je dis objets je parle bien d'éléments html et de venir travailler avec Ça ça pourra être fortement utile dans de nombreux cas

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 !