Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

Découvrir Angular 2

Gérer les modèles et l'input

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Plus simplement, vous pouvez demander à Angular d'attacher un modèle objet à un champ de formulaire. Vous pouvez également lui demander d'en récupérer les données.
07:37

Transcription

On va y aller doucement, on va parler de modèles parce que, pour le moment on ne dynamise pas vraiment. Alors, oui, on dynamise évidemment puisqu'on rajoute des comportements sur des boutons, avec des événements. On utilise une méthode; create object, c'est vrai que tout ça c'est dynamique. Mais c'est pas assez dynamique selon moi, pourquoi ? Parce qu'on ne rempli pas les informations moi j'aimerai pouvoir remplir la référence et pourquoi pas faire changer le state d'une commande, enfin voilà, avoir un peu plus de comportements. Quand vous allez vouloir travailler là-dessus, vous allez devoir travailler avec des modèles. On va le faire simplement et je vais vous montrer comment on fait évoluer un modèle, vers un modèle objet. La première chose à comprendre, vous l'avez déjà compris plus ou moins, mais je préfère me répéter, c'est les parenthèses. Les parenthèses qu'on a ici permettent de câbler un événement sur un appel aux components Ca nous fait des remontées d'informations depuis le template vers le component. On a une deuxième écriture qui existe, qui est une écriture avec des crochets. Les crochets permettent de communiquer du composant vers le template. Ça nous permet d'avoir de la dynamisation dans les deux sens. Angular amène une troisième façon d'écrire, un peu particulière, qui va vous rappeler des choses d'Angular 1 Je vous montre, on va d'abord créer un input, donc simplement un champs. Dans ce champs, on ne va pas mettre grand chose en réalité, on va simplement référencer que c'est un input tout simple, il n'y a pas de nom, rien, par contre on va venir câbler dessus ; un modèle. Comme vous avez installé les très bonnes extensions de John Papa, vous avez accès avec ng2 aux différentes écritures qui existent. C'est des écritures qu'on va pouvoir utiliser très facilement, notamment ici, celle qui va nous intéresser c'est le ng model On va appuyer sur entrer et on va avoir ici l'écriture carotte, c'est à dire qu'on va combiner les deux types d'appel, les deux types de synchro. La synchro de composant vers template et la synchro de template vers composant. On va écrire à l'intérieur ng model pour que ça marche. Ici on va référencer une valeur qui va être mise à jour. Pour la première valeur, pour le test, on va l'appeler référence . Attention, ça ne va pas marcher comme ça tout seul. Si je me rends ici sur mon template, j'ai bien mon champs mais si je le remplis, il ne se passe rien. Pour faire fonctionner cette nouvelle valeur, cette synchronisation dans les deux sens, il va falloir qu'on référence ici, comme avant ; une private qui va s'appeler référence . Vous pouvez la typer string, c'est largement suffisant. N'oubliez pas d'initialiser, c'est quand même bien, même si on ne met rien dedans d'initialiser à l'avance. Ici, une variable. OK. Maintenant comment ça va marcher ? C'est très simple, elle est initialisée, elle est reliée au formulaire. Quand vous allez remplir le formulaire, vous allez compléter cette information là. C'est simplement synchronisé dans les deux sens. À la création d'un objet, je peux venir utiliser 10.reference sans aucun problème et ça remplira la référence, comme par magie. C'est pas vraiment de la magie, c'est du data bending, c'est à dire qu'on va enregistrer une valeur directement ici, qui va être mise à jour en live dans le composant. Testons ! On va essayer de taper une référence 3333 et puis de faire ajouter un objet. Si on va en bas de page, la référence est dynamique. C'est génial. Maintenant, qu'est-ce qui se passe si j'ai plusieurs champs ? Pour un, c'est facile. Mais si j'en ai plusieurs ? Imaginons que je puisse remplir la référence, le nom et l'état, le state, c'est plus compliqué et on va travailler cette fois-ci avec des objets. Comment on va faire pour avoir des objets ? On va faire newitem.reference et puis ainsi de suite ; newitem.name et enfin newitem.state Attention parce que cet objet là n'existe pas, et c'est un peu particulier. On va maintenant travailler sur un modèle qui est un objet. Deux possibilités; soit vous allez le référencer ici, comme new item en allant typer à cet endroit là en disant que c'est un objet, ça peut prendre tout et n'importe quoi. Soit vous êtes comme moi, vous aimez faire les choses bien, et vous allez référencer un objet en ouvrant la structure objet. Mais mieux que ça, vous allez référencer ce qu'on doit avoir à l'intérieur. Une référence, qui est une string. Voyez là on peut typer, vu que ici on est dans la déclaration de la structure. Ensuite on a un nom qui va être également une string et pour terminer, on a un state ici, qui va être un number. Là on a une structure qu'on va devoir respecter. En faisant ça, en déclarant un new item avec les trois valeurs qu'on a là, on a le droit de venir les définir ici. Attention si vous ajoutez une nouvelle propriété et n'avez pas défini dans votre structure qu'elle existe ça ne marchera pas. Bien sûr, si vous référencez un objet, tout et n'importe quoi fonctionnera parce que c'est un objet. Par contre, vous serez obligé d'initialiser les valeurs ici Maintenant si j'ai envie d'initialiser, je ne vais pas m'embêter. Je vais aller prendre ce qu'on avait ici, je vais initialiser que, mon new item new item est égale à un objet, et surtout on va penser à mettre des valeurs vides, sauf pour le state ! Le state doit être un nombre obligatoirement, on ne peut pas avoir de valeur vide. Là on commence comme ça, et on est bon. Maintenant, qu'est-ce qui va se passer ? Je ne vais pas m'amuser à reconstruire comme ça, je ne vais pas faire newitem.reference etc. Non, parce que ce que je vais pousser à l'intérieur de ma collection, c'est la structure de l'objet que j'attends. Finalement, c'est bon. Je peux enlever cette ligne là, et ici je vais remplacer object par 10 new et new item . En faisant ça vous ne devriez pas avoir de problème, ça devrait fonctionner tout seul Vous avez relié le new item avec les différentes valeurs, donc vous avez déjà de l'information, et ensuite vous avez créé l'association. On va y allé, on va voir ce que ça donne. Ici on va mettre Julien . Attention, c'était la référence en premier. Donc la référence ici ; 3444, Julien et puis un state à zéro. On ajoute l'objet. Effectivement ça a bien fonctionné, c'est une commande à livrer, pour Julien avec référence 3444 . Bien sûr, vous pouvez modifier les informations, pas de problème. Maintenant pour aller un peu plus loin, évidemment on vient de créer notre objet mais quand j'appuie sur le bouton, je ne le vide pas, c'est à dire que mon formulaire reste toujours rempli, ça ça m'embête moi. Ca va être très simple, regardez. Ca, vous allez le déplacer et vous allez vous faire une petite propriété qui va être ; reset new item , comme ça. Qui va faire un 10 new item est égale... Là vous créez un nouveau item. Vous allez l'appeler dans le constructeur pour que ce soit initialisé au démarrage du composant. Et enfin, quand vous avez terminé d'ajouter du new item à la collection, vous allez également faire un reset, pourquoi ? Parce qu'on a besoin d'avoir les bonnes informations. Ca ça va être génial parce que comme vous travaillez sur un objet persisté, qui est toujours disponible dans la vue. Si j'entre des informations, et que j'appuie sur ajouter un objet, on va me vider la liste et je pourrai recommencer. Vous voyez que là c'est extrêmement simple de travailler avec les objets. Faites bien attention à bien référencer vos objets, à ne pas les oublier, à avoir les vrais comportements ici. Voyez que c'est génial, on a pas besoin de passer d'information à notre create object il a déjà tout. On utilisera 10 dans la classe, ça marchera tout seul.

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
Votre/vos formateur(s) :
Date de parution :6 sept. 2016
Durée :2h50 (40 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 !