Introduction aux événements AngularJS
AngularJS peut être décrit comme un cadre JavaScript utilisé pour établir des applications de page unique (SPA) pour le développement mobile et Web. Le SPA est une page unique où de nombreuses connaissances continuent d'être similaires à l'appui de quelques bits de données peuvent être personnalisées lorsque vous cliquez sur des catégories / options supplémentaires. Toute cette procédure peut soulager votre travail en permettant simplement de dépasser les coûts, en augmentant l'efficacité ainsi qu'en chargeant la page Web plus rapidement. Dans cette rubrique, nous allons découvrir les événements AngularJS.
En utilisant AngularJS, vous pouvez travailler avec des directives et utiliser des attributs HTML en liant simplement les données au HTML avec les expressions. AngularJS peut être une architecture MVC qui rend les applications Web simples à créer dès le début. AngularJS 1.0 a été lancé en 2010, et si nous discutons aujourd'hui; la dernière version d'AngularJS peut être la 1.7.8 qui a été publiée en mars 2019. AngularJS est en outre un framework open source géré simplement par Google en utilisant une énorme communauté de programmeurs.
Conditions préalables
Avant de passer à AngularJS, vous devez avoir une connaissance fondamentale de
- Javascript
- HTML
- CSS
Bases d'AngularJS
Voici les bases d'AngularJS
Directives
Le préfixe ng signifie AngularJS. ng- peut être décrit comme un préfixe réservé aux directives de clé angulaire. Pour éviter les collisions, ils peuvent vous suggérer de ne jamais utiliser le préfixe ng exact dans vos directives plus tard sur la version d'Angular. Ng peut être l'abréviation d'Angular.
Instances de quelques-unes des directives dans AngularJS
- La nouvelle directive ng peut être utilisée pour produire une nouvelle application angulaire
- La directive ng-update met à jour vos applications étonnantes Et aussi leurs dépendances
- La directive ng-app peut être utilisée pour initialiser une application AngularJS.
- La directive ng-init initialise les informations sur l'application.
La directive ng-app explique également à AngularJS que l'élément est un «entrepreneur» avec l'application AngularJS.
Expressions
- Les expressions à travers AngularJS seront décrites entre crochets doubles: expression.
- Pour écrire une expression dans une directive: ng-bind = ”expression”.
Par exemple
Production:
Manette
- L'application d'AngularJS sera contrôlée par de simples contrôleurs.
- Le contrôleur d'application pourrait être décrit avec une directive ng-controller
- Un contrôleur est connu comme un objet JS, construit avec un constructeur d'objet JS standard.
Expliquer les événements AngularJS
Différents types d'événements situés dans AngularJS
AngularJS est incroyablement plein d'événements et comprend un modèle de base pour ajouter des écouteurs d'événements vers le HTML. Il facilite de nombreux événements associés à la souris et au clavier. La plupart de ces événements seront placés sur un élément HTML. Si vous avez écrit du HTML et des événements AngularJS simultanément, après que les deux événements peuvent s'exécuter, cela signifie qu'un événement AngularJS ne remplacera jamais un événement HTML.
Quelques-uns des événements essentiels sont les suivants.
- ng-copy
- ng-click
- ng-cut
- ng-dblclick
- ng-keydown
- ng-keypress
- ng-keyup
- ng-mousedown
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-mouseover
- ng-mouseup
- ng-flou
Nous allons analyser la communication avec les événements.
Angular JS comprend un bus d'événements global qui vous permet de déclencher des événements sur une étendue et de laisser d'autres étendues écouter cet événement et y répondre. Vous pouvez passer des arguments supplémentaires avec l'événement afin que les autres écouteurs puissent répondre de manière appropriée à l'événement. Les événements sont assez simples, mais il y a quelques pièges à eux.
Tout d'abord, en écoutant un événement, vous appelez simplement la méthode $ on () sur une étendue avec un paramètre du nom de l'événement. Ensuite, tout événement portant ce nom déclenchera votre rappel. Organiser un événement, en revanche, nécessite un peu de planification.
Disons que j'ai un événement qui est soulevé ici, dans Child Scope 1, mais nous voulons écouter cet événement dans Child Scope 2. Malheureusement, nous ne pouvons pas y arriver.
Il existe deux options pour déclencher un événement dans Angular JS.
La première consiste à appeler scope. $ Broadcast, ce qui déclenche l'événement sur la portée d'origine, puis l'envoie à toutes les étendues enfants.
L'autre option consiste à appeler la portée. $ emit, qui déclenche l'événement sur la portée d'origine, puis l'envoie dans la chaîne de portée.
Mais il n'y a aucun moyen véritablement mondial de diffuser à partir de la portée d'un enfant. Le moyen d'y parvenir consiste à mettre la main sur $ rootScope et à appeler $ broadcast sur celui-ci, ce qui le renvoie à toutes les étendues enfants.
Allons maintenant ajuster notre code pour qu'il fonctionne avec des événements plutôt qu'avec des étendues héritées. Donc, le premier problème que nous avons remarqué que nous voulons qu'un événement résout est le fait qu'ici, dans le contrôleur de catalogue, cette méthode registerCourse () appelle push directement sur les données de planification. Ce n'est pas son travail.
L'ajout d'éléments à la planification n'est pas quelque chose que le contrôleur de catalogue devrait faire. Au lieu de cela, ce qu'il devrait faire, c'est d'avertir quelqu'un d'autre qu'un cours est en train de s'inscrire, puis de croire que d'autres objets ajouteront les corrections de cours au calendrier. Donc, l'objet qui devrait traiter le calendrier est bien sûr le contrôleur de planification.
Passons donc au contrôleur de planification et ajoutons un écouteur d'événements. Nous appellerons notre cours d'événement enregistré. Le premier paramètre d'un rappel à un événement est un objet événement et ensuite tout paramètre supplémentaire que vous mettez lorsque vous déclenchez l'événement.
Nous allons donc planifier le fait que celui qui a organisé l'événement va également mettre le cap qui a déclenché l'événement sur l'événement. Ensuite, à partir d'ici, nous pouvons faire la logique qui a été initialement créée dans la méthode registerCourse () ici.
Maintenant, au lieu de compter sur la planification pour être sur la portée $, nous allons déjà retirer la portée $ et simplement introduire le service planifié. Et puisque nous introduisons le calendrier ici, nous n'avons plus besoin de le faire figurer sur notre contrôleur de registre.
Nous pouvons donc prendre cette ligne ici, la déplacer vers notre contrôleur de planification, et maintenant supprimer cette dépendance du contrôleur d'enregistrement.
Maintenant, c'est formidable que nous ayons écouté l'événement ici, mais personne ne l'évoque. La place ici dans la méthode registerCourse () sur le contrôleur de catalogue.
Le contrôleur de catalogue ne peut pas déclencher un événement qui peut être écouté par le contrôleur de planification car ce sont des frères et sœurs. Donc, ce que nous devrons faire, c'est apporter une dépendance au $ rootScope.
Ensuite, à partir d'ici, nous pouvons appeler $ rootScope. $ Broadcast () déclencher l'événement que nous recherchons et ajouter le paramètre qui doit être sur cet événement.
Maintenant, nous avons une autre chose que nous pouvons nettoyer. Ici même, nous appelons $ scope.notify, mais nous lançons déjà l'événement selon lequel nous avons enregistré le cours. Nous devons laisser quelqu'un d'autre gérer la notification chaque fois qu'un cours est enregistré.
Revenons donc à notre contrôleur d'enregistrement et ajoutons-y un écouteur d'événements.
Et à partir d'ici, nous pouvons appeler le code pour faire la notification. Il semble beaucoup plus approprié de le faire au sein du contrôleur d'enregistrement, car c'est l'endroit où nous définissons la méthode notify ().
Vérifions cette sortie dans le navigateur et voyons comment cela fonctionne.
Nos changements ont bien fonctionné.
Voyons maintenant le code et analysons les avantages et les inconvénients de l'utilisation des événements. Le premier avantage que nous avons remarqué que nous aimons est que la logique dans chacun des contrôleurs a quelque chose à voir avec ce contrôleur.
Le contrôleur de catalogue a la logique de déclencher l'événement lorsque quelqu'un clique sur le bouton Enregistrer le cours et la logique de marquer un cours enregistré. La planification a la logique d'ajout des éléments à la planification et le contrôleur d'enregistrement a la logique des notifications. Pour cette raison, nous n'avons pas de contrôleur mettant en service un service avec lequel ils n'ont rien à voir.
De plus, notre contrôleur racine n'est pas encombré de dépendances avec lesquelles il n'a rien à voir. Il y a cependant quelques inconvénients. Quiconque gère un événement peut annuler cet événement. Cela peut conduire à de mauvais bugs.
Si un gestionnaire particulier annule un événement et qu'un écouteur qui doit encore entendre parler de cet événement n'a pas été traité. Nous couplons notre contrôleur à ces événements.
L'inconvénient des événements est que nous utilisons une chaîne pour le nom de l'événement et qu'il est difficile d'éviter les conflits de nom d'événement.
La seule protection qui existe est une bonne stratégie de dénomination pour les noms d'événements.
Conclusion - Événements AngularJS
- Élimine l'état du serveur
- Permet la connaissance des applications natives
- Met la logique d'affichage facilement en JavaScript
- Nécessite des informations sur les compétences innovantes ainsi que des procédures
Articles recommandés
Ceci est un guide des événements AngularJS. Ici, nous discutons les bases d'AngularJS et expliquons l'événement AngularJS avec les exemples. Vous pouvez également consulter les articles suivants pour en savoir plus -
- Tests unitaires AngularJS
- Architecture AngularJS
- Directives AngularJS
- Carrière à AngularJS
- 5 principaux attributs d'événements HTML avec des exemples
- Guide des différents événements JavaScript