Comment utiliser les fonctionnalités avancées des promises AngularJS

fermer la fenetre

Des Applications Performantes Sans Vous Prendre La Tête !

Recevez la formation "Développement Facilte" GRATUITEMENT
Avec tous les Codes Sources Commentés
 
(Les événements, la programmation orientée objets, les modèles de conception, Les éditeurs, les outils, 
l'efficacité, CSS3, HTML5, JavaScript, jQuery, Dojo...)

Renseignez votre prénom et votre adresse email ci-dessous :

Dans ce second cours sur les promises dans AngularJS, passez à un niveau avancé avec les différentes méthodes du framework liées aux promises comme reject, resolve, defer …

Tout est dans la vidéo ci-dessous.

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

Comment utiliser les fonctionnalités avancées des promises AngularJS

Bonjour et bienvenu sur Développement Facile.

 

AngularJS – Les promises avancées

Ici Matthieu expert en développement applicatif, donc dans ce nouveau cours vous allez continuer à améliorer vos compétences avec AngularJS et à découvrir l’utilisation des promises d’un niveau un peu plus vous avancé, vous aller allez un peu plus loin.

 

Dans le cours précédent vous avez une introduction à l’utilisation des promises avec un exemple de code source, comment elles fonctionnent, pourquoi on supprime la notion de call back, et là vous allez aller beaucoup plus loin avec les promises et AngularJS.

 

Les promises avancées avec AngularJS

Comme vous l’avez vu précédemment l’objet renvoyé par la méthode defer propose plusieurs méthodes qui permettent ces méthodes, de modifier l’état de la promise.

 

Vous avez la méthode resolve qui résout la promise qui la fait passer à l’état de succès, mais vous avez aussi la méthode reject qui permet de rejeter la promise et de la faire passer à l’état d’échec.

Il y a eu un souci pendant l’exécution de la promise, donc vous avez un exemple q.defer, ça vous renvoi un objet, sur cet objet vous appelez la méthode résolve, la promise est résolue en passant un paramètre à resolve, évidemment, là c’est un exemple ou oDeffered.reject la promise a eu un échec donc il y a eu une erreur et comme ça vous le saurez tout simplement.

 

Voici un exemple plus complet de code source, getid pour récupérer un id, donc vous avez créé votre promise, q.defer, vous avez l’objet qui contient la promise oDefer, vous faites un timeout, si l’id > 0 oDefer.resolve, la promise passe à l’état de succès, en renvoyant un objet avec l’id, le message, sinon l’id est négatif ou égale à zéro, la promise est rejetée, elle passe en état d’échec avec oDefer.reject, vous le transmettez toujours à un objet avec l’id mais un message complètement différent, qui dit que l’id est invalide, ça vous permet de voir pourquoi il y a eu des erreurs bien évidemment, pensez toujours à mettre return oDefer.promise pour retourner la promise qui est terminée, soit en échec, soit à l’état de succès.

 

Il y a une autre méthode aussi qui est disponible avec l’objet renvoyé par la méthode defer c’est notify, cette méthode ça vous permet d’envoyer des informations tout en conservant la promise à l’état d’attente du résultat, par exemple, c’est très utilisé lorsque vous faites un chargement d’item, vous avez les barres, vous savez, les barres de chargements en cours avec le pourcentage de progression qui progresse. Vous pouvez utiliser promise, bien évidemment, à chaque fois vous allez pas passer à la promise à l’état résolue, de succès, parce que le chargement des éléments n’est pas terminé, donc là vous regardez le code source q.defer, vous avez votre objet promise, vous avez n progress pour la progression du changement en pourcentage, vous faites, vous créez un intervalle pour que sur l’intervalle avec JavaScript, il sera appelé toutes les cent millisecondes, toutes les cent millisecondes, donc votre barre de progression va progresser, sur nProgress, vous faites c’est un +=10, et remarquez oDefer.Notify qu’il y a ici, bien vous envoyez un message chargement, 10 % de progression avec la progression du changement, l’avantage c’est que votre promise elle est toujours en état d’attente du résultat, mais vous pouvez envoyer des messages à votre application, qui affichera ce message avec la progression du chargement et dès qu’elle progresse, c’est supérieur ou égal à 100, bien évidemment, le chargement est terminé, vous annulez l’intervalle, vous faites un $.cancel, elle ne sera plus appelée cette fonction et vous résolvez votre promise, oDefer.resolve en envoyant le message chargement terminé.

 

Progression du chargement, changement terminé, la promise passe à l’état de succès avec oDefer.resolve et bien évidemment, vous faites toujours un return de votre promise, oDefer.promise.

 

Voilà c’est aussi simple que ça, vous avez le service $q, qui vous permet de créer l’objet avec la promise, il faut aussi une méthode all qui permet de synchroniser l’exécution de plusieurs promises en une seule.

Je m’explique, une promise est le résultant, en fait vous avez plusieurs promises avec all, qui est synchronisé en une seule promise, une seule promise qui regroupe plusieurs promises et la promise qui est résultante, elle est résolue lorsque toutes les promises sont résolues, voilà par contre si une des promises est rejetée, la promise résultante sera aussi rejetée.

 

La promise renvoyée par la méthode all est résolue lorsque tous les appels à get id sont terminés dans l’exemple que vous allez voir, si l’un des appels échoue, la promise envoyée par la méthode all sera rejetée, donc $q.all vous appelez, vous enchainez plusieurs promises, get id 5, get id 14 etc. ça vous créé une promise principale avec toutes les promises en dessous, si toutes les promises son succès, celles là seront en succès, s’il y a une seule des promises en échec, celles là sera en échec, tout simplement.

 

Le service $q vous propose également la fonction when, cette fonction vous permet d’encapsuler un objet JavaScript dans une promise, si vous encapsulez une promise, la méthode when envoi une promise, par contre la fonction when renvoi la promise retournée par la fonction get id aussi, var promise $q when get id 5, ça vous renvoi la promise, c’est aussi simple que ça.

 

Mais dans un autre cas ou vous pouvez, si l’objet à encapsuler n’est pas une promise, la fonction when va vous renvoyer une nouvelle promise tout simplement, avec comme résultat l’objet encapsulé, donc cette méthode elle est très utile lorsque vous utilisez des librairies, des frameworks JavaScript qui n’ont pas cette notion de promise.

Et que vous devez encapsuler leur traitement dans des promises, utilisez des $q.when, et ça va vous renvoyer une nouvelle promise résolue avec comme résultat l’objet JavaScript, c’est très pratique, donc regardez, $q.when avec un objet id 69 site dev facile, ça va vous renvoyer une nouvelle promise résolue avec comme résultat l’objet JavaScript.

 

Exemple pratique AngularJS

Voici un exemple pratique de code source, ça vous parlera beaucoup mieux.

Alors comment créer des promises concrètement dans le code action script ?

Vous avez votre contrôleur main contrôleur, les vues, ce qui est important c’est le contrôleur de la promise et la Factory, donc déjà vous créez la Factory ça va gérer le chargement des données donc data Factory service, vous allez donc créer votre promise ici, qui est créé $q ici, vous créez la promise, vous créez un service, la gestion du cache, une variable avec la source des données et des méthodes get data avec un id et un call back. Là vous créez votre promise, vous avez votre promise ici, en fonction, si les données sont dans le cache, rappelez-vous la variable cache, la variable cache est reconnue les données sont reconnues, on dit que la source des données c’est le cache, vous allez découvrir pourquoi on utilise data.SRC, c’est à dire la propriété data vue du service, de l’objet service et on résout la promesse on la fait passer à l’état de succès, c’est-à-dire on a chargé les données.

Le but c’est de charger un fichier de données, voilà, là on a chargé un fichier provenant de data.json, tout simplement et si je lance un deuxième chargement des données, on le prends depuis le cache, voilà, voilà à quoi servent les différentes variables.

 

Je vais par exemple rajouter une deuxième valeur pour tout à l’heure, comme ça vous allez voir que les données sont bien chargées de ce fichier. Sinon récupérez les données depuis le fichier json, si elles ne sont pas dans le cache, comme la première fois, ici, si je clique vous allez récupérer les données depuis le fichier json.

On fait un http.get double http, on fait une requête, un get, DATA, on spécifie l’URL, rappelez-vous le cours sur les constantes, dans ce cas bien précis, vous auriez pu utiliser une constante, d’ailleurs c’est ce qui est le mieux à faire dans vos applications plutôt que de mettre des chemins en durs, utilisez les constances, vous me remercierez plus tard quand les chemins changeront et que vous aurez à les changer juste dans la constante au lieu d’appeler tous les fichiers source à modifier.

 

Et un then, comme vous avez vu dans le cours, un then alors on va créer deuxième promise, then ça renvoi une deuxième promise, donc là on récupère le contenu du fichier json, on le stock dans le cache, c’est pour ça qu’on reconnaît le cache id ici, id vient de là, on dit que la source des données ça vient d’Ajax, et on résout la promise en la faisant passer en état de succès, c’est la promise est stockée ici toujours dans cache id, on stock le résultat, then fonction on file result, le résultat de la promise.

 

Ensuite on retourne une nouvelle promise, oPromise qu’on a créé ici, .promise then, call back, le call back, qu’est-ce que c’est ?

Vous allez le voir ici dans get data je vais vous montrer ça juste après, je termine les explications, donc là on retourne la promise dans le service et on retourne le service donc ça c’est votre Factory qui en gros va tester, est-ce que le fichier est dans le cache, sinon il va charger le fichier.

Ensuite vous avez le contrôleur de la promise qui va utiliser set Factory donc on a une instance de la Factory, qui est automatiquement créer bien évidemment, par AngularJS, on a un load data scope.loadData c’est ici, lorsqu’on clique sur le bouton, on fait un load data chargement des données qu’est-ce que ça fait chargement des données ?

Ca va appeler la méthode get data de notre service qui est ici, c’est ce qu’on renvoi, création de l’objet service, donc de la Factory finalement, donc on retourne toujours cet objet-là qui a été créée lorsqu’on a instancié data Factory, AngularJS a créé une instance de data Factory, on a récupéré notre service, donc c’est un objet service on appelle la méthode get data, tout simplement, avec un id et une fonction, on veut le résultat donc les data c’est le résultat, regardez ici call back, que l’on retourne ici, en call back, donc on retourne une nouvelle promise, donc on a notre résultat, oScope.data.data le résultat et la source des données, data service.data toujours, regardez, .data et SRC que l’on renseigne ici. Le cache ou Ajax tout simplement, après si vous ne voulez pas gérer le cache, on aurait pu créer ici un objet DATA et résultats aussi si on le souhaitait, comme vous voulez, voilà c’est aussi simple ça, je lance le chargement la nouvelle ligne donc c’est bien, ça charge bien le fichier data.json, et là je vais effacer, enfin non je vais en rajouter une volontairement et elle ne va pas s’afficher, donc là j’ai rajouté une ligne dans le fichier, je l’ai enregistrée volontairement, je reclique mais elle ne va pas s’afficher, pourquoi ?

Parce qu’on, l’application a pris les données du cache, et uniquement les données du cache, si l’application est relancée, voilà la nouvelle valeur apparaît parce qu’il a rechargé le fichier, donc faut faire attention avec cette notion de cache, dans certains cas, elle est très utile, et dans d’autres cas, il faut la gérer donc sur développement facile, il y a des cours pour vous expliquer comment gérer le cache, la façon toute simple de gérer le cache, c’est de créer un random, dev = random et donc à chaque fois, cela va forcer le chargement du fichier main JS, c’est aussi simple que ça, elle ne sera jamais stockée en cache dans le navigateur Pasqu’on fait, on créer une variable aléatoire dans dev, alors que AngularJS.mim.js 1.3 sera dans le cache du navigateur.

 

Vous avez vu l’intérêt des promises, chargement de données, on utilise une Factory, on fait un get data, on récupère le résultat en renseignant ici, data source data, et c’est la Factory qui va gérer la promise de la Factory est ici, elle s’occupe de créer un objet service que l’on utilise, on appelle get data dessus, on créé la promise dès que les données sont chargées, donc on fait un get, on recréé une nouvelle promise dès qu’on a le résultat, on résout la promise, ensuite on descend ici on rédout la deuxième promise et c’est terminé.

 

A vous de tester les promises, bon je sais déjà les callback avec la programmation événementielle faut le comprendre, la notion de du modèle de conception observer, faut la comprendre, là vous allez un cran au-dessus avec les promises donc mettez la en pratique utilisait-les, et petit à petit ça va rentrer, vous allez vous aussi, mieux les comprendre, les maîtriser les utiliser.

 

Votre plan d’actions !

Maintenant c’est à vous de jouer, comme d’habitude c’est en forgeront que l’on devient forgeron donc mettez en pratique ce cours déjà commencez par télécharger le code source sous ce cours vidéo, et utilisez le code source pour l’adapter dans vos applications, c’est ce qui va vous permettre d’assimiler le concept de promise et de mieux comprendre le principe de fonctionnement.

 

Si vous avez des questions posez les directement sous ce cours vidéo, l’équipe développement facile vous répondra avec grand plaisir et vous avez sous cette vidéo, vous avez un formulaire vous renseignez votre prénom, votre adresse main, vous cliquez sur le bouton recevoir, vous allez recevoir les prochains cours, sur jQuery, AngularJS directement dans votre boîte mail. Et maintenant si vous voulez aller beaucoup plus loin, en moins de 30 jours, acquérir des compétences reconnues en développement, maitriser AngularJS, cliquez simplement sur le lien, sur l’image là juste au-dessus de moi et vous serez redirigés vers une deuxième vidéo, vers une deuxième page qui vous expliquera comment utiliser le même code source donc vous créez votre projet , votre jeu, votre application avec une seule fois le code source et en un clic vous le déployez sur les Smartphones, que ce soit des smartphones Apple ou soit Android, sur toutes les tablettes soit sur Apple ou sur Android, même sous Windows Phone, votre application fonctionnera, ça fait quand vous devez faire évoluer votre application, vous n’avez qu’un seul code source à modifier et à chaque fois en un clic, vous déployez sur plusieurs périphériques.

Tout ça c’est expliqué en détail dans la deuxième vidéo, en plus, en moins de 30 jours vous serez accompagnés par l’équipe développement facile, vous ne serez pas tout seul, les experts, il y a plusieurs experts dans l’équipe développement facile, ils suivront personnellement votre progression, si vous avez des questions sur un code source que vous avez du mal à utiliser, un code source de cours, un concept que vous avez du mal à utiliser, vous envoyez un message à l’équipe développement facile et l’expert de l’équipe, ils sont plusieurs avec plus de 10 années d’expérience, prendra votre message, vous répondra personnellement en corrigeant votre code source, en donnant des explications supplémentaires pour que vous puissiez bien assimiler cette nouvelle compétence dans votre développement, et si nécessaire rajoute un exemple de code source supplémentaire et vous recevrez la réponse directement par mail très rapidement, en un jour ou deux jours, c’est super pratique pour progresser rapidement, cliquez simplement sur le lien sur la bannière juste au-dessus de moi et je vous retrouve dans la deuxième vidéo.

[/ppmtoggle] [/ppmaccordion]

Télécharger l’exemple d’utilisation avancé des promises avec AngularJS

Retrouvez le code source commenté de l’implémentation avancée des promises avec AngularJS

Downloads

  • 23 les promises part2
    23 les promises part2

    Code source commenté sur l'implémentation des promises avec AngularJS.
    L'archive contient également le framework AngularJS en version 1.3 minimisé.

Posez vos questions sur le framework AngularJS

Utilisez la zone commentaire pour donner votre avis sur le framework AngularJS et poser vos questions.

 

Créez Rapidement des Sites Hyper-Interactifs avec vos utilisateurs grâce à la Formation Gratuite jQuery Facile !

Recevez les Stratégies pour utiliser le Potentiel des Frameworks jQuery et Dojo
+
Logo jQuery
+
Des Tutoriels Gratuits Supplémentaires pour utiliser toute la "Richesse" du Framework de Google : AngularJS