Angular 2 : Dynamisation des applications

Créer des évènements

Testez gratuitement nos 1300 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Pour bien comprendre le rôle des évènements, vous allez effectuer un exercice pratique sur votre projet.
05:16

Transcription

Alors je vous ai mis en ligne sur Plunker un petit exemple Vous pouvez le trouver très facilement puisque c'est un Plunk qui est publique pour le coup vous le trouverez sur users/lizjulien qui est mon nom sur github et qui est aussi mon nom du coup sur Plunker Alors ça fait quoi ? On va aller éditer ce Plunker Ça vous montre comment on peut utiliser facilement ici avec un tout petit script très rapide les évènements Ce script qu'est ce qu'il va faire Simplement il va se charger Et puis une fois qu'il aura chargé il va simplement vous afficher ici la liste des évènements, combien de fois ils ont été lancés Et ça va modifier à chaque fois et ça va venir rajouter des lignes On a essayé d'utiliser un maximum d'évènements pour que vous puissiez voir un petit peu ce que ça donne Voyez d'ailleurs que le code est pas très compliqué et il y a très très peu de fichiers pour le coup Si vous le souhaitez celui-là vous pouvez simplement le télécharger avec le petit lien d'en haut comme ça vous pourrez le tester sur votre machine Ici je vais me retrouver avec quoi Je vais me retrouver directement avec un index.ts qui est ni plus ni moins qu'un ngModule Ce ngModule il va importer browserModule comme on l'avait déjà vu déclarations App et Child donc Child c'est le child component, App le app component et c'est tout Dans le App component on a défini un petit composant avec une template de façon inline, c'est à dire directement dans le composant pour pas avoir de fichier extérieur Ça c'est une bonne pratique aussi c'est très intéressant de faire comme ça parce que pour le coup vous allez pouvoir très rapidement avoir du templating dans votre composant Ensuite ici j'ai mon Child qui est ajouté donc celui-ci en fait il va être lié je vais le récupérer et je vais avoir des informations dessus Notamment j'ai showChild qui est un boolean qui me permet de monter ou démonter très rapidement le composant Et puis ici je vais lui passer un name et je vais lui passer une fonction de log La fonction de log elle va être utilisée parce que les évènements vont être déclarés sur le Child Au niveau du constructeur je vais référencer this.name et je vais aussi câbler les timeouts à 3000 et à 4000 pour updater le name et pour faire un hide du Child le hide c'est pour le cacher donc ça va simplement être le showChild qu'on va mettre à false Ici ensuite on fait l'updateName on va passer le name à Bob Le hideChild fait simplement un showChild et va utiliser le this.logs pour faire un push sur OnDestroy Alors this.logs c'est quoi C'est une string simplement c'est mieux que ça c'est un tableau de string qui va être utilisé et que ici on va venir itérer ou du moins on va faire un join avec virgule C'est assez simple en fait pour l'utilisation Et on a une fonction onLog qui est celle qui est passée directement au Child qui va faire un thisLog push qui va donc faire un push de data directement sur la collection de string Ensuite notre Child, lui est un petit peu plus complexe on va ici utiliser pas mal d'évènements Alors sachez que vous avez la possibilité d'implémenter ici ce que vous voulez utiliser comme évènement c'est pas obligatoire puisque maintenant on peut le faire sans Mais là c'était pour montrer que c'est effectivement une écriture possible aussi Vous voyez que là il y a beaucoup de choses notamment j'utilise l'EventEmitter sur le log je vais utiliser un string sur un verbe et un onChangeCounter avec un number à 0 le onChangeCounter va me permettre de savoir combien de fois j'ai eu les évènements de lancés Après le ngOnChanges qu'on a ici je viens itérer les changes et j'utilise la classe SimpleChange qui est normalement la classe qui est utilisée par Angular Je l'ai implémentée je l'ai récupérée au dessus simpleChange avec un import pour pouvoir l'utiliser comme ça dans le typage au niveau des messages je vais simplement itérer les différents messages, récupérer le name et puis faire une concaténation avec name le verbe tout etc pour avoir les bonnes informations de Change donc ça c'est que pour le OnChange On sait quelle est la propriété qui a changé et comment Et ensuite je vais utiliser l'emit juste pour lui donner l'évènement et je vais faire la même chose pour chaque évènement qui se trouve en dessous Comme ça vous avez un peu une vue éclatée de tous les évènements qui sont en train de passer On voit que quand on lance alors je vais faire un stop et un run Au tout début le composant se monte c'est ce qu'on veut puisque là il est appelé et puis on a des fonctions en timeout qui vont partir la première s'occupe de changer le nom donc on a une modification on a onChanges qui va passer et ensuite on a une destruction puisque on va faire simplement un false Donc là on voit bien ce qui s'est passé au tout début on a le name qui est set à Alice, on a tous les évènements qui vont passer On fait un changement sur le name on le passe à Bob donc du coup ce name est modifié et ensuite on a toute la séquence qui repasse pour checker la view et le contenu et qui détruit ensuite le composant à la fin puisque pour le coup ici on a bien un Destroy qui passe Vous voyez que par la pratique on comprend un petit peu mieux ce qui se passe et ça nous permet de voir qu'effectivement les évènements se lancent Après vous allez devoir ces évènements les utiliser pour pouvoir vous câbler Sachez également qu'il n'existe pas que ces événements dans Angular et ça ça va dépendre de ce que vous allez utiliser avec Angular On va parler très rapidement de Unique qui est un framework qui permet de faire des applications mobiles qui utilise Angular et qui a défini lui-même son propre système d'évènements ce qui potentiellement pourrait vous arriver

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 !