Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Découvrir Angular 2

Utiliser un évènement pour créer un objet

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Maintenant que les rudiments du système d'évènements sont entre vos mains, voyez comment créer un système de création d'objet.
03:23

Transcription

Vous avez compris le fonctionnement des événements. Mais on va se refaire un petit, et on va se câbler une vraie logique qui va créer des informations, qui va nous en ajouter sur une collection. Vous voyez que c'est assez géniale, car tout est synchronisé. Si je viens ajouter un nouvel objet à ma collection ici, évidemment, cet objet là, va être rajouté dans le DOM et va apparaître dans la collection et dans l'itération. Tout ça c'est très automatique ! Si je veux un bouton ; ici je vais me faire un bouton tout simplement, et je vais l'appeler...ajouter un objet Simplement en faisant ça, je crée un bouton, très simple, OK. J'ai bien ici un événement, car il va falloir que je clique dessus. Donc, clique, qui va être relié à une fonction, par exemple key 8 object Soit je passe un objet moi même, soit je vais créer ça dans mon composant. On va se faire un create object ici. Qu'est-ce qui va faire le Create object ? Il va créer un nouvel objet : Let object* qui va être un objet très simple, avec la même chose que ce que j'avais au-dessus. J'ai juste à faire un copier coller si j'en ai envie. Et je pourrais tout à fait travailler avec ça, faire un Random ici pour avoir des informations de base, Voilà ! Je vais rajouter un objet Julien. Et puis, ici, je ne vais pas mettre de référence pour le moment. Je vais mettre 999, l'idée étant d'avoir du fonctionnel. Comment on va rajouter à une collection ? La collection vous l'avez déjà puisqu'elle est accessible partout dans la classe : c'est Discollection. Une collection c'est simple dans la mesure ou c'est une collection d'Heret. On a tout à fait la possibilité de faire un push dessus, ici. Avec ça, on va rajouter l'objet à l'intérieur. Voyez, c'est pas compliqué de travailler avec des collections en JavaScript, donc forcément, en Angular. Rien qu'en faisant ça, vous venez de créer un événement qui va, à chaque fois qu'on va appuyer ici sur le bouton, créer un nouvel objet, le rajouter dans le DOM et le faire apparaître. Et si on essayait ? Maintenant qu'on a ça, je vous conseille de fermer pour voir ce qui va se passer. On clique, et regardez, si je clique plusieurs fois, on voit bien que la barre se met à augmenter, parce qu'on vient l'ajouter à chaque fois. Très, très simple d’interagir avec ce qui se passe dans la page. Évidemment vous pourriez ajouter des classes CSS, faire pas mal de choses pour rendre l'application dynamique. Voyez qu'avec les événements, on va pouvoir très simplement travailler sur des fonctions à l'intérieur de notre composant, qui va déclencher des logiques métiers, déclencher du fonctionnel, de façon très simple. Voyez ici, on crée un objet, on l'ajoute à la collection et effectivement, ça recharge en live le DOM car le DOM est câblé sur discollection. Et discollection augmente au fur et à mesure que vous appuyez sur le bouton. On va voir un peu plus de fonctionnel, car là ce qu'on fait est simple, et c'est un peu embêtant parce qu'on est obligé de tout créer à la main. Est-ce qu'on ne pourrait pas se créer quelque chose de plus dynamique ? Bien sûr que si, on peut.

Découvrir Angular 2

Prenez en main toute la puissance du framework AngularJS. Exploitez ses fonctionnalités, et développez rapidement des applications web robustes et performantes !

2h50 (40 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :6 sept. 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 !