Angular 2 : Dynamisation des applications

Comprendre la séquence des évènements

Testez gratuitement nos 1324 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Découvrez les évènements levés par le framework. Ces évènements respectent un ordre d'appel bien précis.
05:15

Transcription

Il est malin votre formateur vous savez pourquoi ? Parce que j'ai déjà prévu ici les consoles log Ah oui, j'allais vous parler de la séquence Il y a un déroulement d'évènements dans ce framework Quand est-ce qu'il se lance et comment ? Vous allez voir qu'il y a des évènements qui sont extrêmement dangereux Il y a des évènements qui vont se lancer comme ça assez souvent sur des item, surtout quand on fait de l'itération Parce que là une itération ça doit être calculée C'est une vue complète donc forcément il faut que ça se recalcule à chaque fois donc forcément comme la vue elle va être calculée pour chaque item à chaque fois avant d'être injecté il y a des évènements qui vont passer souvent Donc faites très attention à l'utilisation que vous allez faire des évènements parce qu'il y en a qui sont dangereux je préfère appuyer là-dessus Alors 2 possibilités pour tester pour connaitre un petit peu la séquence Soit vous faites comme moi vous mettez les console.log partout mais de toute façon vous allez le faire parce que on va voir comment ça fonctionne Ou alors vous allez faire un tour sur la doc d'Angular et dans la doc d'Angular il y a tout un tas d'abord d'informations mais il y a surtout tout un tas de petits exemples sympas On voit ici par exemple que on a le constructeur qui part et une fois que le constructeur est passé on a OnChanges qui passent avec l'initialisation d'une variable Donc ça c'est bien parce que ça veut dire que quand des choses vont changer dans la classe le OnChanges va passer Ensuite on a OnInit, DoCheck etc Donc là on a toute la séquence d'appels qui est définie Alors vous remarquez qu'elles s'arrêtent DoCheck ContentInit ContentChecked ViewInit ViewChecked et là ça s'arrête et ça repart Ça repart certainement parce qu'il y en a un deuxième Maintenant qu'on a vu ça on va essayer d'ouvrir la console et puis on va vider la console et on va surtout on va recharger la page et on va voir ce qui se passe Et effectivement on voit absolument tout qui passe donc là il y a beaucoup de choses surtout ce qu'on peut regarder c'est que il y a une séquence complète ici qui certainement doit être une une séquence pour un de nos item On va essayer de regarder ensuite comment faire pour savoir quel est celui qui est en train de se charger Et on voit bien qu'il y a OnChanges qui passe, OnInit, Check AfterContentInit AfterContentChecked AfterViewInit AfterViewChecked Donc ça c'est la séquence complète d'évènements qui passent C'est intéressant parce que ici on voit bien toutes les imbrications on voit bien que ça passe plusieurs fois maintenant si vous avez envie de savoir ce qui se passe Il faut savoir que dans le OnInit ici c'est l'endroit où il va récupérer l'input donc concrètement il y a de fortes chances que si ici on câble un console.log on puisse voir très facilement quel est le this.item qui est en train d'être managé par le framework Donc on va simplement faire un console.log de this.item et on va recharger l'application Et effectivement on va voir qu'ici on a une première séquence qui passe ngOnChanges et ensuite on a l'item qui est disponible sur le ng Init Event et ça continue et ensuite on voit bien les autres item qui sont passés Tout le reste qui se trouve en dessous c'est parce qu'il faut rattacher pas mal de choses donc comme nous on a des comportements, on a des boutons etc l'objet est de vraiment tout calculer donc il fait passer ça plusieurs fois et vous voyez bien qu'effectivement à chaque fois on a une séquence qui repart donc là le dernier c'est celui-là on a le DoCheck qui reprend donc il y a plus de OnInit en dessous vous voyez que c'est que de DoCheck et les DoCheck vont relancer une séquence complète donc on l'a 3 fois On a un DoCheck avec Content View on a un DoCheck ici et on a un DoCheck ici Qu'est-ce qui se passe si sur le DoCheck on fait un return false est-ce que ça pourrait changer quelque chose on fait un petit return false comme ça et puis on va recharger l'application Ça passe, 1 fois 2 fois 3 fois et on voit qu'effectivement on va pas pouvoir bloquer réellement le DoCheck et le DoCheck passe pas regardez celui-là il fait un return false donc le DoCheck passe pas ce qui fait qu'on se retrouve uniquement avec des AfterContent viewchecked Ça peut être intéressant parce que ça veut dire que du coup on lui dit de pas checker donc de pas jouer cet évènement En soi c'est pas très embêtant pourquoi, parce que réellement il va faire quoi qu'il arrive le DoCheck de toute manière il passera dedans il n'a pas de possibilité de bloquer réellement la compilation et le run de l'application, ça marche comme ça Maintenant moi il y a un truc que je veux vous montrer, c'est le OnChange Celui-ci il est intéressant parce que on va pouvoir référencer ici un objet qui sera les Change et qui va nous donner une information Ça si vous voulez le voir en action simplement vous allez le câbler comme ça et vous allez recharger la page vous allez juste enregistrer ça va recharger tout seul et vous verrez qu'effectivement ici vous allez avoir au OnChanges et avant de récupérer l'item des informations dans cet objet-là qui peut être très intéressant pour vous parce que on a un item de base et ensuite on a un to string le previousValue ce qu'il y avait avant c'était du vide ni plus ni moins et ensuite on a eu bien le bind de l'item concrètement ici ça vous donnera des informations sur le OnChange sur ce qui change dans l'interface à de nombreux endroits on va vouloir récupérer ce qui change et pouvoir savoir ce qu'il y avait avant et ce qu'il y a maintenant c'est sur le OnChanges que vous le ferez Alors après pour le reste vous verrez qu'on a des possibilités de câbler sur la view et surtout si vous avez des initialisations à faire je vous conseille de les faire dans ngOnInit et pas dans le constructeur parce que c'est ngOnInit réellement qui vient référencer les différentes variables donc si vous avez des initialisations la plupart du temps vous le ferez dans ngOnInit C'est ici que généralement on fait ça

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
Votre/vos formateur(s) :
Date de parution :31 oct. 2016
Durée :2h03 (28 vidéos)

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 !