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 sous-module pour le formulaire

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Maintenant que tous les concepts de parents et enfants sont acquis, découvrez le fonctionnement et le déplacement du formulaire dans une directive.
06:34

Transcription

Pour en finir avec ce chapitre, je vous ai préparé une petite refacto. L'idée de cette refacto, est évidemment de disposer aussi d'un composant itemForm. Vous pouvez bien sûr le reprendre puisque je vais vous expliquer comment je me suis débrouillé pour faire fonctionner itemForm. Ce n'est pas compliqué avec ce qu'on a vu, il n'y a pas de problème, vous y arriverez facilement. Regardez bien cette vidéo, refaites derrière, et essayez de remettre en place. Vous l'avez peut-être déjà fait, vous avez peut-être déjà mis pause et vous avez essayé de comprendre. Si vous n'avez pas réussi, c'est bien, cette vidéo vous permettra de comprendre le fonctionnement, et si vous n'avez pas essayé, vous en aurez envie à la fin de la vidéo. L'idée de ça est de réussir à avoir le minimum de code possible. Vous voyez que ça a encore réduit mon app.component.ts, qui maintenant ne fait que 33 lignes, ce qui est parfait. Également, si je vous montre le template, ça l'a réduit au minimum, donc là j'ai simplement le h1 et le p. Le form qui est inséré directement, et ensuite mon itération. C'est super, c'est comme ça qu'on doit faire, avoir le moins de code possible dans les templates, et bien sûr dans les composants, vous permettra d'avoir un code qui est découpé en plusieurs étapes, et que vous pourrez réutiliser. Alors, mon itemForm, je vais avoir besoin d'un événement, parce que sur le parent, donc toujours le app.component, je veux pouvoir ajouter un item à la collection. Donc, j'ai créé un onCreateItem() qui prend un item en paramètre et qui va le rajouter à la collection, this.collection.push(item). Assez simple de ce côté-là. Par contre, il faut bien que cet évènement ici soit utilisé. Pour l'utiliser, je vais préparer dans mon app.component.hmtl, un évènement que je vais passer, donc je vais lui dire simplement que onCreateItem(), qui va être donc un output, va prendre le onCreateItem() du parent et lui passer l'évènement, et dans l'évènement, on aura fait un emit de quelque chose. Comment je me suis débrouillé ensuite ? J'ai dû créer cet item.form qui n'existait pas, donc item.form.ts est une classe ItemForm, ça reprend à peu près les mêmes codes qu'avant, ça va utiliser model/item pour définir les contrats, ça va également utiliser output pour dire que j'ai onCreateItem qui est égal à un EventEmitter(). Vous remarquez qu'ici, je n'utilise pas d'input, donc je peux enlever cette partie-là. Essayez au maximum de faire du nettoyage dans vos classes pour ne garder que l'essentiel, car vous n'aurez pas d'erreurs sur les import, vous pouvez en ajouter comme vous voulez. Nettoyez donc au fur et à mesure, ça fait quelque chose de plus propre, et puis n'ajoutez des classes que vous n'utiliserez pas derrière, pour la compilation, c'est mieux. Ensuite, dans ma classe ItemForm, j'ai fait un private item. Pourquoi je l'ai mis là, et pas sur le parent ? Vous allez vous dire que c'est bizarre. Bien, je pars du principe que c'est mon composant formulaire qui détient la logique de la création d'un item. Qu'il le passe au parent ou pas, c'est autre chose, en tout cas, c'est son rôle de créer l'item, donc je fais ça en privé, et dans sa classe. Il faut que vous essayiez de réfléchir en conception d'architecture de projet, et dans ces termes-là, vous devez savoir qui fait quoi. En l'occurrence, c'est mon formulaire qui doit créer l'objet, donc je lui définis une private. En output, un EventEmitter évidemment. La construction est importante à cet endroit-là, pas forcément tout le temps, mais je vais avoir une méthode qui me permet de rafraîchir l'item, que j'utilise pour qu'il soit neuf et pour que ça vide le formulaire. J'ai conservé ça, la logique qu'on avait sur le parent que j'ai répercutée sur l'enfant car c'est à lui de faire ça. Puis, j'ai donc mon resetItem qui crée un nouvel item, c'est classique, et j'ai enfin mon createItem(). Mon createItem() va, bien sûr, envoyer un évènement de création avec l'item en question, et va ensuite s'occuper de rafraîchir le formulaire en appelant, comme le constructeur, la méthode resetItem(). Vous voyez, rien de compliqué, juste un peu de déplacement. C'est généralement ce qu'on fait, vous commencerez par tout coder dans un composant unique, et au fur et à mesure, vous allez découper, puis placer des parties dans des composants enfants, etc., et venir les relier. Quand vous allez relier, n'oubliez pas l'import du composant, et de le placer dans les directives, sinon rien ne fonctionnera, et n'oubliez pas non plus de câbler les évènements que vous voulez passer, pour qu'il y ait bien une communication. Si on garde cet exemple-là, il va fonctionner sans aucun problème. Là, je vais simplement aller voir sur mon navigateur comment ça fonctionne. Là, effectivement, j'ai ma page qui est chargée. On va mettre « 12345 » ici, on va mettre « test » là, ensuite on va faire « Ajouter l'objet », si je vais tout en bas, j'ai bien l'objet qui est ajouté. Qu'est-ce qui ne marche plus ? Ce qui ne marche plus, vous voyez, c'est les CSS, les styles qu'on avait avant. Pourquoi ça ne marche pas ? Simplement parce qu'on a jamais défini de style pour cette directive-là. C'est vrai qu'ici, ma directive n'a plus de style. Si vous voulez maintenir ici les styles, il va falloir les déplacer sur ce composant-là. Souvenez-vous, Angular crée lui-même des imbrications de styles, donc il faut avoir les styles aux bons endroits pour que ça marche. Ce n'est pas grave, on récupère le styleURL qu'on a ici, puis on vient le mettre sur item.form.ts, ça va fonctionner de la même manière qu'avant, on va retrouver nos styles sympas, et on pourra avoir de la couleur. Sans ça, vous n'aurez pas de couleurs. Attention, par contre, au niveau de la compilation, parce qu'ici on a app.component.css, donc si je regarde le app.component.css, que j'avais un peu plus haut, on avait mis, ici, les state, et vous vous souvenez, où sont les state en réalité ? Pas sur le formulaire. Donc il faut faire attention à là où vous placez les infos, sinon ça ne marchera pas. Ils sont sur l'item. Donc, c'est en fait notre item, qui se trouve plus bas, item.ts, qui doit avoir les styles. Je vous conseille vraiment d'avoir des styles pour chacun de vos composants. Donc un fichier de styles, parce que ça vous permettra d'avoir des couleurs et des styles qui ne rentrent pas en collision avec les autres composants. Chaque composant a son fichier de style. Là, on a retrouvé une application correcte qui fonctionne. Maintenant, on va fermer tout ce qu'on a là, on se retrouve avec trois composants, un composant app qui est le démarrage, et qui prend deux directives, un composant item qui s'occupe de la décoration des items dans la liste, et enfin, un composant qui s'appelle item.form, qui lui s'occupe de traiter le formulaire, et on pourra faire ça pour toutes les parties du site, et là on aura un projet génial. Pour l'architecture logicielle, Angular est vraiment splendide, ça permet de faire des applications très simples, avec très peu de lignes de code, et où tout va pouvoir correspondre les uns avec les autres.

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 !