Angular 2 : Dynamisation des applications

Utiliser les hooks des composants

Testez gratuitement nos 1302 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Il existe de très nombreux emplacements où venir se câbler pour agir. Faites le tour ici des plus importants.
04:35

Transcription

On est donc sur les composants des hooks Ces hooks ce sont des fonctions qu'on peut appeler directement dans le composant Ce qui est bien est qu'on a pas besoin de faire d'imports ou quoi que ce soit Avec la nouvelle version d'Angular on a directement tous ces hooks de disponibles Il suffira simplement de les coder et de mettre de la logique à l'intérieur On parlera de ce qu'on peut faire avec après Et je vais déjà vous les présenter On a le constructeur. Alors le constructeur je l'ai pas mis j'ai fait exprès parce que on part pas du principe que c'est un évènement du composant Il est là pour construire à la base le composant mais ce n'est pas un évènement, attention Les évènements peuvent être soulevés à un endroit voire plusieurs C'est à dire que ça va être appelé plusieurs fois par le framework pour nous indiquer qu'il se passe quelque chose Et on pourra effectivement venir se plugger à l'intérieur pour voir ce qui se passe On parlera de la séquence juste après mais déjà je vous les présente Donc le ngOnInit c'est au départ, au tout début de l'initialisation d'un composant Et ça peut revenir plusieurs fois Tout va dépendre si on le démonte ou si on le remonte Si vous l'enlevez du dom vous ne faites plus de display dessus Par ex avec un ngIf il pourra être supprimé Donc on pourra avoir cette séquence qui revient à un moment ou un autre Après un changement sur un input vous avez des input avec des modèles etc Si vous changes quelque chose généralement le onChange viendra se déclencher Alors attention parce que celui-ci se déclenchera si vraiment vous avez une modif, si on l'a pas il y aura pas de déclenchement de cet évènement-là et pour éviter des compilations surfaites Après chaque run ou au changement Il faut savoir qu'il y a un check qui est fait, donc en fait Angular va checker le contenu à l'intérieur de votre composant et c'est le ngDoCheck qui va partir Ici on a le contenu du composant qui sera initialisé avec l'évènement ngAfterContentInit Attention quand on parle du contenu du composant, on parle du contenu de l'intérieur du composant, c'est à dire vraiment les fonctions internes les références etc Ça une fois que ça a été initialisé vous aurez un évènement qui part Une fois que ça aura été vérifié par le framework parce que c'est pareil le framework va effectuer une vérification de ce contenu Vous aurez l'évènement ngAfterContentChecked Ça on est bien d'accord que c'est pour le contenu de votre composant On est pas en train de parler de la vue on est en train de parler du contenu Donc le contenu interne de votre composant Maintenant il y a aussi la vue qui va entrer en jeu évidemment Après que la vue soit initialisée par votre framework vous aurez ngAfterViewInit qui partira L'initialisation c'est quand il aura vraiment construit l'objet de la vue Et il va le vérifier cet objet de vue Donc avant de vous soulever des erreurs par ex il y a une vérification qui se fait Cet évènement-là par ex pourra bloquer simplement le rendu parce que il y a une erreur dans votre contenu et Angular n'arrive pas à l'afficher Donc celui-ci partira quand la vue aura été checkée par le framework elle aura été vérifiée par le framework Enfin il vous reste un dernier c'est le ngOnDestroy Concrètement juste avant une destruction du composant ce qui pourra arriver si vous utilisez par ex ngIf qui vous permet d'afficher ou pas un composant vous aurez cet évènement-là qui va partir Alors j'ai dit tout à l'heure, il y a des choses qui sont inhérentes au composant Tout ça, en fait Tout ça c'est vraiment obligatoire pour le composant AfterContentInit, AfterContentChecked et ViewInit ViewChecked C'est des évènements qui vont être disponibles pour la vue Un module ça fait pas de vue, un composant ça fait de la vue donc voilà là on a la grande différence entre les deux Ce qui veut dire que tout ça c'est vraiment utilisable que sur les composants parce que c'est fait pour Et vous verrez que ça va permettre de se plugger dessus pour récupérer de l'information De même il y en a une qui est un peu particulière c'est le OnChange ici qui vous permettra d'avoir des infos sur ce qu'il y avait avant et ce qu'il y a après et ça c'est pareil C'est plutôt inhérent au composant Sur un module ça a pas vraiment d'intérêt Il faut savoir quel évènement utiliser à quel moment et pour quoi faire Alors ça on va en parler un petit peu Sachez simplement que généralement on utilise ngOnInit qui nous permet de faire des initialisations du composant Ça va un peu de pair avec le constructeur Il y en a beaucoup qui préfèrent utiliser OnInit plutôt que le constructeur Sachant que le constructeur c'est vraiment la construction de la classe Et le ngOnInit ce serait plus pour exposer de la donnée Tout ce qui va être this.item.state par ex pour passer de la state ça pourrait se faire dans ngOnInit plutôt que dans un constructeur Par ex si on a besoin de faire des set des insertions sur des propriétés on préférera vraiment le faire dans ngOnInit que de le faire sur le constructeur qu'on a pas évidemment ici sur la classe on l'a pas Maintenant on va passer au cycle d'appels Parce que évidemment vous imaginez bien qu'il y a des hooks qu'il y a une séquence d'appel par le framework qui est lancé On va voir comment ça tourne et ce que on a déjà de l'information

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 !