Elles vont remplacer complètement les traditionnels callbacks des fonctions asynchrones.
Tout est dans la vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment utiliser les promises avec AngularJS, oubliez définitivement les Callbacks !
Bonjour et bienvenu sur Développement Facile.
AngularJS – Les promises
Ici Matthieu expert en développement applicatif, dans cette nouvelle vidéo, ce nouveau cours toujours consacré à AngularJS, déjà vous avez eu je crois une bonne dizaine, voir 20 cours, plus de 20 cours sur AngularJS, donc au fur et à mesure, votre expertise va forcément progresser avec AngularJS, et là vous allez voir les promises avec AngularJS, c’est à dire les promises qui remplacent les callback, vous allez tout savoir, savoir comment utiliser les promises avec AngularJS en tirer le maximum pour simplifier votre développement.
Enfaite une promise, promesse en français, c’est l’attente d’un résultat d’une action asynchrone, une action asynchrone c’est que vous faites, c’est comme Ajax, vous faites une requête et vous n’aurez pas le résultat immédiatement, donc vous pouvez faire d’autres choses et à un moment donné le promise, vous aurez le résultat de cette requête.
Cette notion de promise comme je vous l’ai dit ça vous permet de complètement oublié les callback, donc vous en avez pas besoin, les fonctions asynchrones n’en prennent pas en paramètres, elles prennent, elles renvoient une promise.
Une fonction JavaScript asynchrone ne renvoie pas de résultats comme je vous le dis, mais elle prend en paramètre une fonction qui sera appelée lorsque le traitement sera terminé. Cette fonction call back reçoit en paramètres les résultats du traitement.
Avec les promises, les promises elles peuvent avoir trois états.
Un état en attente de résultats, l’action asynchrone est en cours d’exécution, et une fois que l’action asynchrone est terminée, soit vous êtes en état de succès, tout s’est bien passé, soit vous êtes dans un état d’échec, et il y a eu un problème, mais la promise va vous le dire, bien évidemment.
Une fois que la promise est dans un état de succès ou d’échec, cette promise ne peut plus changer d’état, il faut le savoir.
Un objet promise est caractérisé par une méthode then, vous avez bien évidemment d’autres méthodes que vous allez voir au fur et à mesure, qui permet d’agir en cas de modification de son état. Votre promise elle change d’état, lorsqu’elle change d’état avec la méthode then, vous pouvez effectuer des modifications.
Var promise = etape 1, .then function en fonction, vous avez la valeur 1 en entrée, promise état succès, ou fonction promise en état d’erreur.
C’est un exemple tout simple, la méthode then renvoie une nouvelle promise et ça permet d’enchaîner plusieurs actions asynchrones, c’est super pratique, vous faites l’étape 1, then, vous avez, l’état change, vous retournez l’étape 2, then la promesse change, vous avez une nouvelle promesse, elle change etc.
Avec then, vous créez des nouvelles promises, vous enchaînez plusieurs appels de fonctions asynchrones, c’est vraiment très pratique.
Pour créer une promise il faut la créée, donc vous avez le service $q qui possède une méthode defer ça va vous permettre de faire un objet avec une promise, donc var oDeferred ça va vous créer votre objet, égal $q.defer ça va vous permettre de créer votre objet, et avec cet objet vous allez avoir une promise.
La propriété promise de l’objet renvoyé par la méthode defer justement c’est ce que je viens de vous dire, vous permet d’accéder à la promise, donc $q.defer ça vous créez un objet, l’objet est un promise et là vous avez votre promise.
Là l’objet la méthode defer, donc oDeferred, propose des méthodes pour modifier l’état de la promise, donc vous pouvez modifier les tables de la promise.
Vous avez une méthode résolve pour dire que la promise est résolue donc vous la faites passer à l’état de succès, cette méthode résolve prend en paramètre un objet qui sera renvoyé comme résultat de la promise donc un exemple vous voulez récupérer un id, vous passez l’id en paramètre $q.defer, vous créez votre objet, vous faites un set timeout donc toutes les deux secondes vous appelez cette fonction, oDefer.resolve, vous faites, vous appelez votre promise oDefer, vous faites un résolve et vous renvoyez un objet là, vous renvoyez un object propriété id, propriété msg, et vous faites un return oDefer.promise, vous retournez votre promise, elle a été résolue donc vous allez recevoir en résultat de la promise, l’objet avec les propriétés id et .msg.
Exemple pratique AngularJS
Donc vous allez voir un exemple pratique, concret de l’utilisation d’une promise, ça sera beaucoup plus parlant pour vous.
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.
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 promesse, 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, ont dit que la source des données c’est le cache, vous allez découvrir pourquoi on utilise data.src, 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 prend depuis le cache, voilà, c’est, voilà à quoi servent les différents 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. Donc sinon on va récupérer 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éré les données depuis le fichier json.
On fait un http.get, double http, on fait une requête, un get, DATa on spécifit 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 qui est le mieux à faire dans vos applications plutôt que de mettre des chemins en dur, utiliser les constances, ça vous me remercierez plus tard quand les chemins changeront et vous aurez à les changer juste dans la constante au lieu de vous taper 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 fichier, le contenu du fichier json, on le le stock dans le cache, c’est pour ça qu’on reconnaît cache id, il vient de là, ont 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, la promise est stockée ici, toujours dans cache id on stock le résultat, then fonction oFileResult, le résultat de la promise.
Ensuite on retourne une nouvelle promise, oPromise qu’on a créée ici, .promise.then, call back, le call back, qu’est-ce que c’est ?
Vous allez le voir ici dans getData 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éée, bien évidemment par AngularJS, on a un load data, scope.load data, 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 plus de la Factory finalement, donc on retourne toujours cet objet-là, qui a été créé 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 getData tout simplement avec un id et une fonction, on veut le résultat donc les data c’est le résultat regardez ici 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 services.Data toujours regardez .Data et SRC que l’on renseigne ici le cache ou Ajax, tout simplement, après si on voulait 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, non je vais en rajouter une volontairement et elle ne va pas s’afficher donc là j’ai rajouté une ligne, dans le fichier j’ai enregistré, je re clic, mais elle ne va pas s’afficher, pourquoi ?
Parce que 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 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, il ne sera jamais stockée en cache dans le navigateur parce qu’on créé une variable aléatoire dans dev alors que angular-1.3.min.js sera dans le cache du navigateur.
Vous avez vu l’intérêt des promises, chargements 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 donc la Factory est ici, elle s’occupe de créer un objet service que l’on utilise, on appelle get data dessus, ont créé la promise dès que les données sont chargées donc on fait un get, ont recréé une nouvelle promise, et on a résultat ont résout la promise, ensuite on descend ici on résout la deuxième promise, et c’est terminé.
A vous de tester les promises, bon je sais que déjà les callback avec la programmation événementielle faut le comprendre, la notion du modèle de conception observer, faut la comprendre, là vous aller un cran au-dessus avec les promises donc mettez-les en pratique, utilisez-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 appliquez, appliquez, appliquez, encore les exemples de code source que je vous donne dans développement facile, donc vous trouverez le code source en téléchargement sous ce cours vidéo et il est commenté, à vous de l’utiliser, si vous avez des questions posez les directement sous le cours vidéo, directement, l’équipe développement facile vous répondra avec grand plaisir, ils sont là, ils sont à votre service les experts développement facile et sous cette vidéo, vous avez un formulaire, vous renseignez votre prénom, votre adresse mail, vous cliquez sur le bouton et vous recevrez les prochains cours développement facile, que ce soit des cours sur AngularJS, jQUery, Ionique framework, vous les recevrez directement dans votre boite mail.
Si vous voulez aller beaucoup plus loin en développement dès maintenant, cliquez sur l’image juste au-dessus de moi, sur le lien cliquable juste au-dessus de moi et vous allez accéder à une deuxième page, une deuxième vidéo ou vous allez tout savoir, vous aurez en main, dans les mains le code source et toutes les stratégies détaillées pour créer des Web App, que vous déployez, la WebApp vous la codez une seule fois et en un clic, clic, vous la déployez surtout les tablettes, Smartphone, que ce soit Apple, Android, ou Windows phone.
Bien évidemment vous serez accompagné personnellement et individuellement par plusieurs experts de l’équipe développement facile qui ont tous plus de 10 ans d’expérience dans différents langages, qui sont là pour répondre à vos questions, vous rencontrez par exemple des difficultés sur un concept de la méthode développement facile, sur un code source que vous avez du mal à implémenter dans votre projet, dans votre application, vous envoyez simplement un message à l’équipe développement facile, avec votre code source l’équipe développement facile l’expert le qualifié vous répondra directement, en corrigeant de code source en vous donnant des explications supplémentaires et si nécessairement en rajoutant un exemple de code, et tout ça vous le recevrez dans votre boîte mail donc c’est hyper simple, hyper rapide, cliquez simplement sur l’image la juste au-dessus moi, et en moins de 30 jours vous allez acquérir des compétences étonnantes, efficaces, remarquables pour la création de Web app sur les mobiles, je vous retrouve tout de suite dans la deuxième vidéo, à tout de suite.
[/ppmtoggle][/ppmaccordion]
Télécharger l’exemple d’utilisation des promises avec AngularJS
Retrouvez le code source commenté sur l’utilisation des promises dans le framework AngularJS
