Apprenez à envoyer des événements et à vous en abonner en suivant le modèle de conception Observer avec AngularJS.
Tout est dans la vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
La technique pour utiliser les événements avancés AngularJS broadcast emit on
Bonjour et bienvenu sur Développement Facile.
AngularJS – Les évènements avancés
Vous allez accéder à un nouveau cours sur AngularJS, dans le cours précédent vous avez commencé un peu à voir les évènements, là vous allez aller au niveau supérieur, en découvrant les événements avancés, AngularJS repose sur le principe du modèle de conception observer, là vous allez apprendre à envoyer des événements, soit que des enfants, soit tout le monde, a vous abonner à des événements donc c’est ce que vous allez découvrir dans ce cours, le modèle de conception observer et comment gérer les événements.
Pour communiquer entre eux les différents scopes … par exemple cela vous permet de savoir quand une action vient d’être effectuée et que l’utilisateur a effectué une action, ça a été répertorié il y a un traitement et tout, et derrière vous envoyez un événement et du coup tous les scopes qui sont abonnés vont effectuer des actions en fonction de l’événement qu’ils vont recevoir et de l’objet qui va être joint à cet événement tout simplement.
Avec AngularJS chaque scope est capable d’envoyer un événement avec des paramètres et chaque scope peut s’abonner à un événement comme je vous l’ai dit ça repose sur le modèle de conception observer, si vous ne connaissez pas le modèle de conception observer, il y a cours Développement Facile. Donc utilisez le moteur de recherche vous trouverez, il y a même deux ou trois cours Développement Facile avec des exemples, dans plusieurs langages, que ce soit PHP, JavaScript pour utiliser l’événement observer.
Revenons-en à AngularJS, pour s’abonner à un événement avec AngularJS, vous appelez la méthode $on sur un scope directement.
Cette méthode en paramètre, bien évidemment, le nom de l’événement et une fonction qui va être appelée à chaque fois que cet événement va être émis tout simplement. Et donc vous avez en paramètre l’événement envoyé plus les arguments envoyés dans l’événement pour la fonction, vous vous abonnez avec $on, vous spécifiez le nom de l’événement plus une fonction qui va être appelée, cette fonction en paramètre l’objet événement avec les arguments qui seront envoyés par l’événement.
Quand vous envoyez un événement, soit avec un scope, avec cet événement vous pouvez envoyer des informations, un objet, donc c’est vraiment très pratique.
Vous avez un exemple de code source qui s’affiche ici, donc le scope il s’abonne à l’événement on state change, à chaque fois qu’il y a un changement d’état, vous appelez la fonction donc avec le premier paramètre l’objet événement, deuxième paramètre l’objet user, et vous faites un test, si l’utilisateur est connecté if user isconnect donc la variable isconnect vous la mettez à true, sinon vous la mettez à false, c’est une fonction très simple de gestion d’événement.
Après bien évidemment en fonction de vos applications, vous vous ferrez beaucoup plus compliqué, l’important c’est que vous ayez les bases et que vous les réutilisiez à votre avantage dans vos projets, pour envoyer un événement comment vous faites ?
Vous avez deux méthodes, soit $emit, soit $broadcast. Ces deux méthodes prennent en paramètre bien évidemment le nom de l’événement, suivi des arguments à envoyer donc à tous les écouteurs, tous les scopes qui se sont abonnés à cet événement, donc la méthode $emit ça permet d’envoyer l’événement au scope parent, donc vous avez votre scope-là qui envoie un événement, il l’envoi en remontant à tous les scopes parents, alors que la méthode broadcast c’est l’inverse, vous avez votre scope ici, elle envoi l’événement à tous les scopes enfant, en redescendant tout simplement. Après c’est en fonction, soit vous voulez informer les scopes parents, vous utilisez $emit, soit vous voulez informer les scopes enfants, vous utilisez $broadcast pour envoyer votre événement.
Voilà un événement ou vous informez un exemple de code, ou vous informez les scopes parents avec $emit, que vous avez là, donc $emit, vous envoyez l’événement onStateChanged, il y a eu un changement d’état et la valeur, l’objet que vous voulez envoyer, user le prénom avec propriété user prénom qui a pour valeur sPrenom c’est une variable qui est remplacée automatiquement, ou propriété sPwd qui a pour valeur S, le nouveau password, et en même temps, vous envoyez cet événement Broadcast aux scopes enfants, justes onStateChanged sans objet joint, valeur new.
C’est des exemples de code source pour que vous compreniez un peu l’utilisation des événements.
Sachez qu’un événement envoyé avec la méthode $emit peut être stoppée grâce à la méthode propagation, $emit vous informez les scopes parents, vous ne souhaitez peut être pas informer tout le monde, $emit, vous utilisez la méthode stop propagation c’est-à-dire au lieu que l’événement il se diffuse à tous les scopes, à un certain scope vous pouvez stopper l’événement, il ne sera pas $emit aux autres scopes suivants, tout simplement.
Ça peut être très pratique et si vous souhaitez envoyer un événement à tous les scopes, que ce soit les parents, ou les enfants, vous avez $emit et $broadcast, mais à chaque fois ça vous fait appeler deux méthodes finalement, si vous voulez envoyer un événement à tout le monde, vous utilisez dollars root scope qui est le scope global de l’application, c’est le scope le plus haut, c’est le parent de tout le monde, et vous utilisez la méthode Broadcast qui envoie un événement redescendant à tous les enfants donc c’est aussi simple que ça.
On est au scope parent, broadcast qui envoie un événement à tous les enfants et là vous informez tout le monde dans l’application.
Voici un exemple de code source tout simplement, donc là c’est une fonction addListener que vous voyez souvent, c’est pour s’ajouter entant qu’écouteurs, le scope s’abonne aux événements on state change et après ça va appeler la fonction, et par contre à chaque fois que le scope va être informé lui-même va stopper la propagation de l’événement pour éviter que tous les parents soit informés sur l’envoi d’un événement $emit.
L’avantage de stopper les envois c’est que ça va vous économiser des ressources surtout si vous avez énormément de scopes parents, pensez à utiliser event.stopPropagation, ça mange pas de pain, ça vous permet d’économiser les ressources qui sont très précieuses en développement JavaScript HTML 5, pensez-y, c’est important.
Pour envoyer voici un exemple de code source, pour envoyer un événement à tous les scopes lorsque l’utilisateur se déconnecte, vous partez depuis root scope vous faites un broadcast ça envoi l’événement à tous les enfants, aussi simples ça, là sur le Broadcast vous envoyez l’événement on login déco et sans valeur donc comme ça tous les scopes savent que l’utilisateur s’est déconnecté, donc ils peuvent réagir soit changer les données et informer la vue comme quoi vous verrez sur une certaine zone, vous avez été déconnecté, par exemple, le formulaire de reconnexion qui apparaît, en direct à la déconnexion de l’utilisateur.
Exemple pratique AngularJS
Voici un exemple pratique de code source, ça va vous permettre de voir en direct le fonctionnement des événements, du modèle de conception observer, tout ça avec AngularJS, c’est parti.
Alors pour illustrer l’utilisation des événements avancés avec AngularJS, l’abonnement, l’émission d’événement, soit aux parents, soit scopes parents, soit aux scopes enfants, vous allez découvrir l’utilisation d’une barre de chargement, un loader de ressources c’est-à-dire comme cela, un chargement des éléments en cours, tout ça, ça se passe avec des événements AngularJS donc comment on fait ?
Déjà vous avez NG contrôleur pour gérer le chargement en cour avec des variables, ressources chargées en pourcentage comme que vous voyez ici, ça affiche une progression du chargement, il y a 50 ressources à charger et une progression, un pourcentage de progression, donc tout simplement, remarquez les expressions donc un calcul, vous avez vu dans le cours précédent que vous pouvez effectuer des calculs directement dans les variables, c’est ce qui est utilisé ici, pareil même principe, on va remplacer ces variables par des valeurs, comment ça se passe ?
Tout simplement vous avez loadControl, loadRessource, plusieurs contrôleurs pour votre affichage du chargement. On va partir de loadControl, vous vous abonnez à l’événement ressource load, il y a un événement qui va être diffusé dans votre application qui s’appelle ressource loaded, vous vous abonnez dessus et à chaque fois que cet événement sera émis qu’est-ce que vous faites ?
Vous incrémentez ressource modèle qui est ici donc une ressource supplémentaire de chargée et vous vérifiez si toutes les ressources sont chargées, il y a 50 fichiers à charger, à chaque fois que vous l’incrémentez, cet événement il est envoyé à chaque fois qu’une ressource donc ça peut être un fichier zip, un fichier XML, un fichier JavaScript, un fichier image qui est chargé, et à chaque fois qu’il est chargé on envoie un événement donc lui il est prévenu bien évidemment donc on incrémente le nombre de ressources chargées et si tout est chargé on envoi l’événement ressource finished donc on envoi l’événement à tous les scopes enfants donc tous les scopes enfants qui se situent ici.
Alors voilà, vous avez cette partie donc une fois que ce loader est prêt vous appelez loader.init, vous avez votre Factory loader qui est load ressource, qu’est-ce que vous faites ?
Vous utilisez, vous appelez votre Factory en appelant la méthode init avec le nombre de ressources 50 donc load ressource vous appelez la méthode init, c’est une fonction, le numéro c’est 50 que vous venez d’envoyer ici, très simple sur votre Factory la méthode init avec le nombre de ressources 50, que vous avez définies et là, vous faites une fonction de random pour charger suivant un temps aléatoire votre fichier avec une fonction de timeout et à chaque fois qu’un fichier est chargé donc c’est un timeout on simule le chargement d’un fichier en faisant un timeout, vous envoyez aux enfants Broadcast ressource loaded, donc main contrôleur, load contrôleur et les enfants sont ici tout simplement.
Voilà là le chargement est fini, et donc vous envoyez cet événement aux enfants ressource loaded qui est abonné à ressource loaded ?
Cet enfant-là, qui le récupère avec le nombre de ressources chargées qui vous mets à jour et voilà vous avez votre système de chargement en cours d’événement, bien évidemment vous faites une boucle sur le timeout tant qu’il y a des éléments à charger et à chaque fois qu’un élément est chargé, broadcast, élément chargé, élément chargé, élément chargé, et vous êtes informés ici en temps réel ce qui donne pour résultats le Broadcast est envoyé et élément chargé, élément chargé, progression du chargement en cours qui est calculé automatiquement et le chargement est terminé.
On affiche chargement terminé qui se passe ici, chargement terminé, rappelez-vous les directives show load qui est ici, on l’affiche, on le masque pardon, et on affiche à la place, là on masque la div et on affiche à la place ici, chargement terminé, alors chargement terminé il est ici, parce que dans main contrôleur on s’est abonné à l’événement ressource finished, donc là on broadcast téléchargement des ressources terminé donc onBroadcast ressource finish lui il reçoit, il change le statut main contrôleur il est là, il change le statut et il va mettre chargement terminé donc initialisation d’applications chargement des éléments en cours on va mettre, chargement terminé, ce qui se passe chargement des éléments en court lui il est abonné à l’événement ressource finished donc dès que l’événement va être diffusé, donc là il va bientôt être diffusé, chargement terminé.
Vous avez vraiment un exemple très basique d’utilisation des événements AngularJS et ça devrait vous aider à vous en sortir assez facilement.
Votre plan d’actions !
Maintenant c’est à vous de jouer donc votre plan d’action déjà, comme d’habitude sous ce cours vidéo, vous téléchargez le code source complet et commenté que vous pouvez réutiliser dans vos projets, ensuite si vous avez des questions posez les directement sous ce cours à l’équipe développement facile qui vous répondra à directement, et si vous voulez recevoir automatiquement les dernières informations, formations, les cours développement facile sur AngularJS, le framework Phaser, renseignez dans le formulaire sous ce cours vidéo, votre prénom votre adresse mail et vous recevrez les derniers cours directement dans votre boîte mail, ce qui est très pratique si vous voulez progresser en continu, les cours sont entièrement gratuit donc profitez-en.
Par contre si vous êtes professionnels et vous voulez aller vraiment beaucoup plus loin dans votre développement, dans votre niveau d’expertise, cliquez simplement sur la bannière là juste au-dessus de moi, sur le lien vous allez être redirigé vers une deuxième vidéo, où je vous explique en détail comment créer des applications JavaScript HTML 5 très performantes, que vous codez une seule fois et que vous déployez sous forme de Web APP sur toutes les tablettes que ce soit Apple ou Android, Windows phone, sur tous les Smartphones de la même façon que ce soit Apple, Android ou Windows phone, l’avantage c’est que vous codez une seule fois et vous déployez sur tous les stores Apple Store, google Play, Windows store vous allez apprendre à travailler en équipe, utiliser les modèles de conception.
Et vous avez l’avantage d’un accompagnement premium avec l’équipe développement facile, vous avez un exemple de code source que vous ne savez pas implémenter, une fonctionnalité à implémenter dans vos projets, vous envoyez votre question l’équipe développement facile avec votre code source, elle corrige votre source et vous renvoi une réponse très détaillée pour vous permettre d’être autonome, pour utiliser la méthode développement facile et toutes les fonctionnalités que vous allez découvrir donc tout ça c’est expliqué dans la deuxième vidéo cliquez simplement sur le lien, sur l’image.
Je vous retrouve tout de suite dans la deuxième vidéo à tout de suite.
[/ppmtoggle][/ppmaccordion]
Télécharger les exemples d’implémentation de la gestion des événements avancé avec AngularJS
Retrouvez le code source commenté des exemples qui vous ont été présentés dans la vidéo.
Téléchargement du code source 13 broadcast evenements avancés angularjs
