Aller au contenu

Comment utiliser les événements AngularJS de type click submit dblclick

Dans ce nouveau cours sur AngularJS, apprenez à utiliser les événements avec AngularJS.

Découvrez les actions gérées par AngularJS comme le click avec ng-click ou le submit avec ng-submit.

Tout est dans la vidéo ci-dessous.

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

Comment utiliser les événements AngularJS de type click submit dblclick

Bonjour et bienvenu sur Développement Facile.

Ensemble on continue les cours sur le Framework AngularJS développé par Google, vous allez apprendre à utiliser le potentiel du framework AngularJS, pour résumer c’est un Framework qui permet littéralement de simplifier votre développement JavaScript HTML 5 en séparant votre vue le modèle et le contrôleur, vos fichiers JavaScript, vos fichiers HTML 5, une communication entre les deux, par système de binding avec AngularJS ça permet de créer une architecture très solide, très évolutive.

Dans ce cours vidéo vous allez apprendre à utiliser les événements avec AngularJS, JavaScript c’est un langage événementiel ça va être impeccable, ça va vous permettre de communiquer plus facilement les actions de l’utilisateur vers votre modèle ou les changements d’informations dans le modèle pour les répercuter dans la div.

Les événements avec AngularJS

Les événements comment ça se passe ?

Comme je vous l’ai expliqué dans les derniers cours, une vue informe le contrôleur des actions effectuées par l’utilisateur, si l’utilisateur renseigne un formulaire nom, prénom, adresse, postale, adresse e-mail et qu’il valide ou même en cours pendant le renseignement du formulaire en temps réel, ça va communiquer avec un contrôleur et le contrôleur va choisir de mettre à jour ou non les données donc AngularJS possède des attributs supplémentaires pour justement vous permettre de réagir à ces éléments HTML. Par exemple vous avez l’attribut ng-clik qui permet par exemple d’effectuer des actions suite au clic de l’utilisateur, que ce soit un bouton, sur une zone de texte dans un formulaire ou même sur une zone de votre application en mettant l’attribut ng clic sur la div donc cet attribut attend comme valeur une fonction du contrôleur à appeler lors d’un déclenchement de l’événement simplement, ng-click égal la fonction JavaScript que vous avez allez appeler donc un petit exemple c’est ce qu’il y a de plus parlant sur un formulaire vous avez un bouton tout simplement, un bouton avec l’attribut ng-click et vous allez appeler la fonction updateTot, donc mise à jour du total et value tout ça à chaque fois vous mettez tout ça, vous traitez la valeur dans votre fonction JavaScript directement. La fonction JavaScript comment ça se passe ?

Vous avez un champ total dans votre code source entre cote, une valeur, une variable, une propriété globale, dans la fonction JavaScript qui correspond à updateTot, qu’est-ce que vous faites ?

scope.total, avec le scope vous avez eu un cours qui vous explique les scopes en détail, ça vous permet de récupérer des valeurs du modèle et vous la mettez à jour, à chaque fois, l’utilisateur va cliquer sur le bouton, ça va incrémenter 2+1 le total affiché, c’est aussi simple que ça donc pensez à mettre o contrôleur avec, il y a une petite erreur sur le code source, ng-controler au lieu que ce soit event contrôleur ce serait plutôt o contrôleur.

Vous avez également l’attribut ng change qui réagit lui a une valeur de changement dans un champ Via l’événement HTML change, que vous connaissez en JavaScript, un événement assez classique donc par exemple vous pouvez utiliser un champ texte qui est déclenché à chaque modification de l’utilisateur, dans le champ texte à chaque fois que l’utilisateur rentre une donnée ng change modifie le message, ça va appeler la fonction JavaScript modifier message, et dans cette fonction vous pouvez modifier le message en direct, message info entre côte, toujours en passant par le scope et via cette fonction modif message elle est déclaré sur le scope et elle est incluse dans une fonction de type contrôleur, vous avez bien évidemment l’attribut ng-submit, que vous mettez sur le bouton, sur votre formulaire ça vous permet au moment où l’utilisateur valide votre formulaire vous avez ng-submit, la fonction de validation du formulaire qui est appelé donc vous pouvez faire tout un tas de vérifications, les données renseignées sont correctes, par exemple, envoyer les informations soumises pour les mettre dans votre base de données, les enregistrer, interroger un autre service à distance, vous pouvez faire beaucoup de choses avec ng-submit d’une façon entièrement automatique, c’est l’avantage.

Alors qu’est-ce que vous avez d’autre ?

Vous pouvez bien évidemment utiliser d’autres attributs pour réagir aux événements HTML, la majorité des événements HTML JavaScript que vous connaissez sont gérés par AngularJS, par exemple vous avez l’attribut ng-doubleclick, c’est pour capturer l’événement de double clic de l’utilisateur, ng-keydown c’est lorsque l’utilisateur appui sur une touche, vous capturez cet événement, ng-focus c’est lorsque l’utilisateur sélectionne par exemple une div, un champ de formulaire, il sélectionne quelque chose, vous avez focus qui est déclenché.

Exemple pratique AngularJS

Alors maintenant vous allez passer à un exemple pratique avec un exemple de code source complet et commenté, ça va vous permettre de voir comment tout cela fonctionne. Alors pour utiliser les événements, toutes les possibilités des événements avec les listes, avec AngularJS rappelez-vous l’attribue ng-submit on valide forme, sur l’attribut ng-submit qui dépend du contrôleur o listes, vous appelez la fonction on value forme qu’est-ce que va faire on valide forme ?

On regarde le contrôleur o listes, ici vous regardez le contrôleur o listes, vous arrivez dans listes contrôleur qui est ici, et onClickControler ça appelle une fonction sur le scope, donc qu’est-ce que fait onClickControler ?

A chaque fois qu’il y a un clic sur le contrôleur on incrémente le nombre de clics, il y a une petite console prologe, change name et le message, le message renseignez vos coordonnées, nombre de changement du champ, nombre zéro, nombre de clics zéro, pour l’instant tout est bon, tout est à zéro, alors sur addOne, on incrémente le nombre de clics, addOne il est  appelé ou ?

Il suffit de rechercher ng-click, à chaque fois qu’il y a un clique sur la liste de tri, on ajoute +1, donc addOne, ça fait plus 1 sur le nombre de clics. Regardez, j’ai effectué un tri par langage, nombre de clics de un clic et un deuxième, un clic 5, et un autre, à chaque fois ça met à jour la liste donc ça c’est un exemple de comment vous pouvez capturer des clics avec ng-click, vous appelez tout simplement la fonction addOne, scope.addOne, vous faites ce que vous avez à faire, vous avez on change input aussi, input alors on change input, il est appelé sur la on change, à chaque fois que le champ texte va changer, vous allez appeler la fonction on change input qui va faire un change name plus 1, qu’est-ce qui se passe ?

A chaque fois que vous tapez une lettre, +1, là j’en ai tapé 5, j’ai 6, je tape une lettre 7, 8, 9 et à chaque fois bien évidemment, ce champ se met à jour tout simplement, je vais afficher neuf éléments il y aura tous les éléments comme ça, le champ se met à jour, ensuite qu’est-ce que vous avez d’autres comme action ?

Vous avez vu ng-click, ng-change, et vous avez une autre action sur ng-submit, même principe de fonctionnement vous connaissez, donc là vous appelez la fonction onValideForm scope.onValidForm tout simplement, vous changez scope message formulaire soumis, vous regardez ou est scope.message ici voilà, ici État du formulaire scope.message et ça va mettre scope formulaire soumis, je clic sur envoyer, formulaire soumis, voilà c’est très simple la gestion des événements avec AngularJS, là je vais mettre P H 2 changement de nom, HTML la liste s’est mise à jour automatiquement, nombre de clics un, deux clics par valeur quatre clics, et ici renseignez vos coordonnées, il y a un formulaires renseignez ses coordonnées, envoyer formulaire soumis et tout ça, pensez à ng-click, ng-change, ng-submit, et à chaque fois vous associez des fonctions c’est aussi simple que ça, donc maintenant c’est à vous de jouer.

Votre plan d’actions !

Alors maintenant c’est à vous de jouer, donc commencez déjà par télécharger le code source complet et commenté, sous ce cours vidéo, ensuite si vous avez des questions, posez les directement sous cette vidéo à l’équipe développement facile qui vous répondra, dès maintenant vous avez un formulaire sous cette vidéo il vous suffit de renseigner votre prénom et votre adresse e-mail, et vous recevrez des cours complets sur AngularJS sur les framework phaser, des cours pour vous aider à développer des applications performantes et si vous voulez aller beaucoup plus loin dans le développement d’applications performantes HTML 5 JavaScript, CSS 3, il y a une bannière verticale juste au-dessus de moi, vous cliquez dessus vous serez redirigé vers une deuxième vidéo ou vous allez découvrir la méthode développement facile, comment développer deux à trois fois plus rapidement des applications toujours avec une architecture très solide, évolutive, facilement maintenable dans le temps, ça va vous permettre de travailler en équipe, à plusieurs développeurs sur une application tout simplement, à coder une seule fois une WebApp et à la déployer via un framework AngularJS, ionique framework sur tous les Smartphones et les tablettes que ce soit Android ou Apple même Windows phone, vraiment tout ça, je vous explique tout ça dans la deuxième vidéo, et l’équipe développement facile est là pour vous accompagner personnellement, répondre à vos questions individuelles, vous aider pour votre cas spécifique, avec des exemple de code source supplémentaires, cliquez simplement sur le lien, sur la bannière au-dessus de moi, on se retrouve tout de suite dans la deuxième vidéo à tout de suite.

[/ppmtoggle][/ppmaccordion]

Télécharger l’exemple sur l’utilisation des événements avec AngularJS

Retrouvez le code source commenté de l’exemple AngularJS sur les événements vu dans la vidéo

Téléchargement du code source 10 evenements angularjs

Cliquez ici pour télécharger le code source 10 evenements angularjs

Quel nouveau cours sur AngularJS souhaitez vous avoir ?

Utilisez la zone commentaire pour me dire ce que vous souhaiteriez voir aborder dans un prochain cours sur AngularJS

 

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 >>