Aller au contenu

Comment surveiller le modèle AngularJS avec la technique watch et effectuer du debug

Apprenez à utiliser la méthode watch de AngularJS pour surveiller une propriété de votre modèle.

Avec cette méthode pour pourrez très simplement faire du debug sur votre application.

Tout est expliqué dans la vidéo ci-dessous.

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

Comment surveiller le modèle AngularJS avec la technique watch et effectuer du debug

 

Bonjour et bienvenu sur Développement Facile.

Voici un nouveau cours dédié au fabuleux framework AngularJS dans lequel vous allez apprendre à gérer le modèle. Vous savez qu’AngularJS il est architecturé autour du modèle de conception modèle vue contrôleur, et bien là vous allez apprendre tout ce que vous pouvez faire avec le modèle, comment justement gérer vos données, les répercuter dans toutes les mises à jour de vos données dans la vue, et inversement.

 

Le modèle avec AngularJS

Alors, comment gérer votre modèle ?

Déjà, vous avez watch, une méthode watch qui vous permet de surveiller une propriété de votre modèle et d’être notifié automatiquement à chaque modification.

Cette méthode watch fonctionne directement sur l’objet scope. Vous avez un premier paramètre c’est une fonction qui retourne l’élément du modèle sur lequel l’observation va se faire, ça peut être une propriété, un objet, ce que vous voulez et ensuite une chaîne de caractère ou une chaîne de caractères qui représente l’élément à surveiller.

Le premier paramètre est régulièrement appelé, soit une chaîne de caractères, soit une fonction, un objet qui représente l’élément observé, pour déterminer s’il a été modifié ou non, il faut savoir que ça va consommer des ressources de faire un watch, ce paramètre va être surveillé et appelé en continu, pour voir s’il a été modifié donc faire une notification en cas de modification.

Il y a un deuxième paramètre, c’est une fonction qui sera appelée à chaque fois que l’élément watch sera mis à jour donc vous allez récupérer deux valeurs dans cette fonction, l’ancienne valeur et la nouvelle valeur, tout simplement.

Alors un petit exemple de code source, que vous avez sur votre exemple de code source watch, user value, donc on va observer la valeur user value et derrière ça va appeler la fonction avec la nouvelle valeur et l’ancienne valeur, et donc scope.debug par exemple, vous mettez la nouvelle valeur, l’ancienne valeur et à chaque fois que ça être modifié, vous aurez des notifications.

Un watch ça peut être très intéressant dans votre développement, lorsque vous effectuez du debug, vous avez un bug, vous avez repéré la variable, vous avez un doute sur une variable, vous vous dites peut être qu’elle prend une mauvaise valeur à un moment, vous mettez tout simplement un watch avec un scope. Debug, ou vous remplissez un fichier texte de debug et à chaque fois cette valeur va changer, avec le watch vous le saurez et vous saurez exactement à quel endroit dans votre code et pourquoi elle change, ça va vous permettre d’effectuer votre debug beaucoup plus rapidement.

C’est une technique très intéressante, vous avez la méthode watchGroup qui va vous permettre là, d’observer plusieurs propriétés du modèle, donc le premier paramètre c’est la liste des éléments à surveiller, et le deuxième paramètre est appelé dès que l’une des propriétés observées a été modifiée, donc c’est vraiment très pratique avec watchGroup vous pouvez surveiller user value par exemple, le password et à chaque fois vous appelez la fonction avec la nouvelle valeur, l’ancienne valeur directement, vous savez que sur votre groupe deux valeurs à observées il y a eu un changement, ça peut également très pratique comme stratégie de debug.

Vous pouvez également surveiller une collection, donc comme vous avez une liste dans un formulaire, c’est une collection avec watchCollection vous serez informé en temps réel des changements sur cette collection, et pareil ça va appeler la fonction avec la nouvelle valeur, l’ancienne valeur vous pourrez récupérer l’objet et savoir si votre collection, il y a eu de nouveaux éléments ajoutés dedans, les connaitre, ou s’il y a eu des éléments supprimés dedans ou des éléments qui ont été mis à jour, tout simplement.

 

Exemple pratique AngularJS

Voici un exemple de code source, ça va beaucoup plus vous parler les watch, donc la surveillance de valeurs, de propriétés bien spécifiques, donc dans un cas debug, je peux vous dire que cette fonctionnalité va vous sauver la vie, et vous permettre de récupérer, savoir ou et à quel moment a été modifié votre valeur et donc de corriger le bug plus facilement.

Comment créer un watch ?

C’est très simple, toujours onClicControler donc onClicControler il part de ListeControler, vous avez votre contrôleur sur la liste, oListe qui est ici ng-controler, oListe qui regroupe toutes cette zone-là, oListe qui regroupe tout simplement toute cette zone ici.

Et donc dans oListe vous appelez ListeControler, la fonction JavaScript juste ListeControler, vous montez sur onClicControler et vous ajoutez un watch, et donc le watch vous le faites sur query donc query il est ici sur le champ « Filtrez par nom », à chaque fois que l’utilisateur va taper quelque chose, déjà onChangeIpnut, est appelé input.

Vous pouvez cumuler plusieurs attributs, l’attribut ng-change, ng-modele sur query et effectuer un watch, et à chaque fois dans le log, donc scope.log qui est ici, log des changements donc la variable log, et bien vous allez mettre la valeur non modifiée du, la valeur modifiée ici, nouvelle valeur, on va mettre filtre nom, nouvelle valeur, ce sera plus parlant et l’ancienne valeur et vous allez voir, justement, le watch permet en temps réel de se rendre compte à chaque fois qu’il y a eu une modification de valeur donc ça peut vous êtes très utile dans le cas du debug de vos applications.

Qu’est-ce que ça donne ?

Vous effectuez un filtre pardon, donc on va afficher tous les langages, donc PHP, nouvelle valeur saisie PHP, ça correspond, l’ancienne valeur c’était PH, bien évidemment, alors je supprime le filtre, nouvelle valeur, zéro, l’ancienne valeur c’était PHP.

Je tape JavaScrip toujours bien évidemment la liste fonctionne, regardez il y a tous les éléments, je tape JavaScript, l’ancienne valeur sans le T, nouvelle valeur JavaScript et là je vais faire couper ancienne valeur zéro, nouvelle valeur inverse, ancienne valeur est à zéro, nouvelle valeur JavaScript.

Vous avez vu, enfaite le watch vous devez l’imaginer comme quelque chose de très puissant pour vos debug, par exemple vous avez une variable, vous ne savez pas ce qui se passe. Dans votre application qui est assez complexe avec beaucoup de fichiers JavaScript à un moment elle plante, vous pouvez faire un watch sur user par exemple, au lieu de mettre query ici vous mettrez user, et à chaque fois faire du debug, donc appelez directement console.log, ce qu’on va faire ici, console.log, et ici il vous suffit …et donc de, voilà à chaque fois que vous tapez, ancienne valeur vous avez dans votre console la nouvelle valeur qui se met à jour.

Ça vous permet justement dans votre fichier de log de vérifier un petit peu ce qui se passe et de détecter au bon endroit votre variable là où elle se met à planter donc la HTML HTML, c’est vraiment très puissant watch pour par exemple effectuer du debug et vous avez tout un tas d’autres possibilités, d’autres fonctionnalités que vous pouvez mettre en avant avec watch.

 

Votre plan d’action !

Maintenant comme d’habitude c’est à vous de jouer, vous avez le code source directement en téléchargement sous ce cours vidéo, il est commenté, vous pouvez le télécharger, l’utiliser dans vos projets pour implémenter les fonctionnalités de watch pour votre modèle.

Si vous avez des questions posez-les directement sous ce cours donc posez vos questions sous ce cours, l’équipe développement facile vous répond directement.

Maintenant vous avez un formulaire juste en dessous de cette vidéo, vous renseignez simplement votre prénom, votre adresse mail, et vous recevrez directement les prochains cours que ce soit dédié à AngularJS, le framework Phaser, tout ce qui va vous permettre de créer des applications de plus en plus performantes.

Et si vous voulez aller beaucoup, vous êtes professionnels c’est votre métier, vous voulez améliorer votre niveau d’expertise en développement d’applications performantes HTML 5, JavaScript, les Webb App.

Cliquez simplement sur le lien là au-dessus de moi, vous serez redirigés dans une deuxième vidéo ou vous allez tout savoir sur la méthode développement facile, donc concrètement comment créer des architectures d’applications qui soient solides, robustes et évolutives, comment travailler facilement en équipe grâce par exemple à l’utilisation des modèles de conceptions en JavaScript, des frameworks qui vous simplifies la vie comme AngularJS, Ionic framework, le framework Phaser, tout ce qui vous permet de créer des applications ou même des jeux très performants, que vous pouvez exécuter ensuite sur tablette que ce soit l’iPad ou Android, les tablettes Apple ou  Windows phone, idem pour les Smartphones donc vous codez vraiment une seule fois une web app JavaScript HTML 5, CSS 3 et vous la déployez directement sur toutes les tablettes Smartphone, Android, Apple, Windows phone.

Tout ça s’est expliqué dans la deuxième vidéo, cliquez simplement sur la bannière au-dessus de moi, je vous retrouve tout de suite dans la deuxième vidéo, à tout de suite.

[/ppmtoggle][/ppmaccordion]

Télécharger l’exemple d’utilisation de la méthode watch avec AngularJS

Retrouvez le code source commenté sur l’utilisation de la méthode watch d’AngularJS pour faire du debug.

Téléchargement du code source 11 changement modele watch angularjs

Cliquez ici pour télécharger le code source 11 changement modele watch angularjs

Quel méthode utilisez vous pour debugger votre applications ?

Utilisez la zone commentaire pour partager vos astuces de debuggage.

 

EXCLUSIF : Les 7 Secrets Révélés de JavaScript pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : La formation « JavaScript Facile » OFFERTE pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : Créez VOS Applications JavaScript — en moins de 7 jours grâce à notre formation OFFERTE « JavaScript Facile »

Que diriez-vous de Développer des Applications JavaScript Performantes — dès la semaine prochaine ?

TÉLÉCHARGEZ : Les codes sources du livre « JavaScript Facile » pour Créer VOS Applications — dès la semaine prochaine !

Cliquez ici pour tout recevoir >>