Comment échanger des données avec AngularJS entre les vues et le modèle

Découvrez comment échanger les données entre la vue et le modèle avec AngularJS.

Apprenez à utiliser le two way binding.

Tout est dans la vidéo ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Comment échanger des données avec AngularJS entre les vues et le modèle

Bonjour et bienvenu sur Développement Facile.

Voici un nouveau cours consacré à Angular JS, dans les cours précédents vous avez découvert les bases pour utiliser Angular JS, petit à petit vous allez monter en puissance avec ce Framework donc là vous allez apprendre comment utiliser les données, les mettre à jour donc c’est parti dans ce cours pour découvrir plus en profondeur le fabuleux Framework Angular JS.

Les données avec Angular JS

Pour récupérer par exemple des informations renseignées par un utilisateur, avec un formulaire HTML, vous avez vu trois types de binding, là vous allez avoir besoin d’une binding two-way, le binding one Way, il n’y a que le modèle qui communique avec la vue donc dans le binding two way il y a le modèle qui communique avec la vue, et la vue qui communique avec le modèle, c’est ce que vous allez utiliser, ça fonctionne sous sytème d’attribut, AngularJS, ng-app, ng-binding, ng-controler, là vous avez un nouvel attribut ng-model à renseigner donc dans la propriété du modèle à binder.

Les inputs HTML sont par exemple, bindés en propriétés user name et password du modèle, donc dans un cas, dès que l’utilisateur renseigne un de ces champs, le modèle est automatiquement mis à jour et ça vous permet, dans une zone de connexion utilisateur, de vérifier si les données sont renseignées, si les données renseignées sont correctes par exemple, est-ce que c’est le bon identifiant, le bon utilisateur, est ce que c’est le bon mot de passe, ça sans recharger votre page en SPA, en application mono page donc c’est vraiment génial, vous pouvez accéder aux données avec le contrôleur dollars scope. User name ou dollars. Scope. Password, le scope vous l’avez vu dans le précédent tutoriel, comment utiliser le scope pour modifier, vérifier les données du modèle à partir du contrôleur. Justement voici un exemple de code source, avec dans l’attribut ng-model username pour la balise input type texte, pour la balise input type password vous avez ng-model égal password donc ça va vous permettre de mettre en place le binding to way, la communication modèle vue d’un côté, et le modèle de l’autre quand l’utilisateur met à jour le formulaire.

Comme je vous l’ai dit avec ce binding plus l’attribue ng-model, la vue et le modèle sont synchronisés quelques soit les modifications, si l’utilisateur créé des modifications dans la vue ce sera synchronisé avec le modèle, ou si le modèle est modifié dans le contrôleur, se sera synchronisé avec l’affichage utilisateur, par défaut la mise à jour du modèle elle est effectuée dès que l’utilisateur commence à renseigner une information, automatiquement, sans se poser de questions, donc comme je vous l’ai dit sur un exemple de formulaire de connexion, le modèle sera interrogé par le contrôleur pour savoir si l’identifiant est correct, si le mot de passe est correct.

Bien évidemment vous avez la possibilité de personnaliser ce comportement de l’attribut ng-modèle en le liant à l’attribut la ng modèle option, ça va vous permettre de rajouter des options sur cette donnée modèle, vous avez le one time binding qui permet d’afficher une propriété du modèle dans la vue, le modèle affiche une propriété dans la vue puis de désactiver, de casser cette connexion entre la vue et le modèle, si le modèle, la valeur change dans le modèle, la vue ne sera plus mise à jour parce que c’est un binding one time, une seule fois, une seule communication donc c’est vous qui pouvez la désactiver.

Vous devez utiliser dans ce cas-là une nouvelle syntaxe, toujours entre crochets, mais vous rajoutez deux points, et le nom de votre propriété ça va mettre en place le one time binding.

Vous avez un exemple là entre les balises paragraphe de one time binding, le marqueur est remplacé par la valeur de la propriété du modèle, et si la propriété du modèle change, cette vue ne sera pas mise à jour c’est aussi simple que ça, donc l’avantage de ce binding, si vous savez que vous avez des valeurs « fixes » qui n’évoluent pas un sens, qui ne changent pas, utilisez du one time binding, ça va vraiment vous permette d’améliorer les performances de votre application et d’économiser sur les ressources, très important d’utiliser les types de binding adaptés vraiment aux fonctionnalités de votre application, ça sert à rien de faire du binding to way si c’est une valeur qui ne change jamais. Même du binding one Way si la valeur ne change jamais, valeur fixe, pensez au one time binding pour économiser les ressources utilisées par votre application et du même coup améliorer les performances.

Exemple pratique Angular JS

C’est parti pour un exemple pratique vous allez voir ces types de binding avec un exemple de code source très pratique.

Alors pour communiquer par exemple vous avez une gestion de login de formulaire de connexion à gérer avec Angular JS donc vous allez transmettre des données et comme je viens de vous l’expliquer, l’avantage d’Angular JS c’est de faire une application mono page, sans avoir besoin de recharger la page, tout simplement, vous faites un formulaire donc ça vous connaissez, les formulaires, j’aligne un peu le code pour que ce soit plus facilement lisible pour vous, vous avez un label username avec un identifiant user name tout simplement rattaché au modèle username avec des options on update on, voilà, si il y a une erreur ça le met on blur ça fait un effet rouge dessus avec le message d’erreur, ensuite vous avez un champ mot de passe, ici, input mot de passe, pareil le blur, c’est des options du modèle, le modèle NG modèle user password et boutons submit donc particularités le bouton submit, ça va appeler login user sur ng-submit.

Ça c’est votre partie HTML, vous avez ng-show login valide login erreur donc ils ne sont pas visibles les deux messages ici, comme vous pouvez le voir, et ils vont devenir visibles en fonction de si l’identifiant saisi est correct ou non. Alors comment ça se passe ?

Vous avez le login contrôleur, login contrôleur ici, qui est avec un ng-controler, alors que il est ici dans cette div là, donc qu’est-ce que contient cette div ?

Le scope login user, login user qui est ici, scope. Loging user c’est une fonction donc c’est votre fonction de vérification username user password, username ng modèle, ng-model user password, ça vous permet de vérifier tout simplement bien si les identifiants qu’à entrés l’utilisateur, donc la combinaison identifiant mot de passe est correct, si elle est correct connexion réussie donc on masque le formulaire de login, login forme qui est ici avec la directive Ng show sera entièrement masquée et on va afficher login valide et masquer loading error, login valide, loging erreur masqué, on affiche la div de connexion en remontant aux parents, comme vous avez vu on peut remonter aux scopes parents, c’est une notion d’héritage avec Angular JS avec le type de compte. On remonte ici aux parents, connecté bienvenu username et le type de compte le switch alors je rentre un mot de passe erroné, erreur de connexion, vérifier votre identifiant, votre mot de passe, la page n’a pas été rechargée, je rentre le mode passe correct, le formulaire disparaît bien, on affiche une valeur via Angular JS et connexion réussie, c’est aussi simple que ça, la div associée au contrôleur login contrôleur login user, une fonction que vous appelez toujours sur le scope, tout simplement, le login contrôleur est là et après vous interagissez avec le scope pour récupérer les valeurs qu’à saisie l’utilisateur donc là il y a une communication modèle vue, vue modèle dans les deux sens, ça vous permet de voir le binding to Way voilà, il n’y a rien de plus à dire, tout le reste vous connaissez vous l’avez vu et le switch, le fameux switch, vous avez sûrement comprit le principe de fonctionnement ce qui est pas très compliqué, mais je vous en reparle dans une prochaine vidéo.

Votre plan d’actions !

Maintenant c’est à vous de jouer, vous retrouverez en téléchargement le code source complet de cette application sous cette vidéo, il est complet il est commenté, vous pouvez le réutiliser dans vos applications, si vous avez des questions posez les directement sous cette vidéo, l’équipe d’expert développement facile vous répondra et si vous voulez recevoir les prochains cours, les nouveaux cours directement dans votre boîte mail avec le code source qui va avec, renseignez le formulaire sous cette vidéo avec votre prénom et votre adresse mail, si vous voulez aller beaucoup plus loin, passer au niveau supérieur, cliquez simplement sur l’image là juste au-dessus de moi, c’est une image un lien cliquable, vous serez redirigé dans une deuxième vidéo ou vous allez découvrir la méthode développement facile de A à Z, comment utiliser la puissance des modèles de conceptions dans votre développement d’applications JavaScript HTML 5, comment coder une seule fois pour créer une web App que vous déployez ensuite sur les Smartphones, les tablettes, que ce soit Android, Apple ou Windows phone, même le Web vous ça c’est expliqué dans la deuxième vidéo, l’équipe développement facile sera vraiment aux petits soins avec vous c’est-à-dire dès que vous avez une question sur un cours, un exemple de code source, comment l’utiliser, comment implanter cette fonctionnalité dans vos projets web, posez la question directement à développement facile à l’équipe développement facile en joignant votre code source, en disant, je comprends pas, j’ai pris l’exemple de code source, j’arrive pas à mettre en place cette fonctionnalité l’équipe développement facile vous répondra déjà en corrigeant votre code source, en vous renvoyant un nouvel exemple et en vous donnant des informations supplémentaires, c’est génial, vous êtes vraiment accompagné par des experts, cliquez simplement sur le lien là juste au-dessus de moi, sur l’image pour tout savoir, vous aller être redirigé dans la deuxième vidéo ou vous allez tout découvrir je vous dit à tout de suite dans la deuxième vidéo.

[/ppmtoggle][/ppmaccordion]

Télécharger l’exemple d’échange de données avec AngularJS

Retrouvez le code source commenté de l’échange de données ente de la vue et le modèle dans AngularJS

Posez vos questions sur les interactions à implémenter dans le modèle MVC

Utilisez la zone commentaire pour poser vos questions sur le framework AngularJS