Comment utiliser les providers avec AngularJS

Découvrez la notion de provider avec AngularJS.

Un provider est responsable de la configuration et la création d’un service.

Tout est dans la vidéo ci-dessous.

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

Comment utiliser les providers avec AngularJS

Bonjour et bienvenu sur Développement Facile.

AngularJS – Les providers

Je me présente, Matthieu expert en développement applicatif, je suis là pour vous aider à comprendre et à surtout utiliser dans votre développement tout le potentiel d’AngularJS donc dans ce cours vous allez découvrir la notion de provider, petit à petit vous avez eu plusieurs cours sur le modèle de conception IoC, le modèle de conception MVC, comment les utiliser avec AngularJS, l’architecture, les modules, etc. et au fur et à mesure des cours vidéo que vous avez reçu vous aller monter en puissance, en compétence.

Dans ce cours vous allez découvrir les providers.

Qu’est-ce que c’est les providers ?

Lorsque vous avez fait un service il doit être paramétré, dans le cours précédent vous avez vu les services, les Factory, comment c’était associé, comment ça fonctionnait. Parce que un service il doit être paramétré comme je vous le disais, pendant la phase de configuration d’un module et dans ce cas-là vous devez utiliser un provider.

Alors un provider il est responsable de la configuration et de la création de votre service, d’un service avec AngularJS et notamment du service que vous avez besoin. Il est injectable uniquement dans la dépendance, pardon il est injectable uniquement dans la méthode config d’un module. C’est très utile lorsqu’un service est utilisé par plusieurs applications, vous avez créé un service, il est utilisé par plusieurs applications et en fonction de l’application bien évidemment votre service vous allez le configurer différemment. Le provider ça va vous permettre de gérer la configuration de votre service en fonction de l’application sur lequel ce service est exécuté.

Alors le service http est fournie par le provider http provider bien évidemment, il faut configurer http provider, l’URL que vous allez appeler, son mode de fonctionnement et en fonction d’une application c’est à chaque fois différent. Le provider http provider permet par exemple de définir des headers http qui sont utilisés à chaque requête effectuée par le service http, donc la déclaration d’un provider s’effectue simplement avec la méthode provider d’un module, module.provider. Les paramètres de la méthode provider sont : le nom du service bien évidemment, le nom du service configuré, une classe avec la propriété qui retourne une nouvelle instance du service, normal.

Exemple pratique AngularJS

Vous allez voir à travers un exemple pratique, votre service, le provider qui va configurer votre service en fonction de votre application sur lequel le service est exécuté. C’est partit pour l’exemple.

Dans cet exemple de code source, vous allez apprendre à créer un provider, c’est-à-dire un route provider, à rediriger en fonction du chemin saisi par exemple, dans une URL.

Là vous avez une URL par défaut index.html, donc ça vous affiche provient d’un appel par AngularJS du fichier App.html, qu’est-ce qui se passe dans le fichier HTML ?

Vous avez ici page title, vous avez juste ça et une vue, ng vue, la vue c’est ça, le message du modèle et provient, le message du modèle c’est ça, et ça provient que vous avez reconnu comment faire ça ?

Avec ng-vue, il est définit ici, vous avez appControllerModel, appControllerModel, vous allez voir comment il est mis en place.

Déjà vous définissez votre modèle avec un message, d’une part, ensuite vous avez, d’autre part un autre contrôleur, ViewController MainController, donc la model.message il vient de appController, controllerModele, qui est ici un contrôleur avec URL du template, donc c’est la ou vous définissez votre config, le oModule.Config pour en rapport avec pour les providers, pour utiliser les provider tout simplement.

Vous définissez une config, AppConfig ça va appeler config avec routeProvider, quand c’est le chemin par défaut donc celui-là, c’est le chemin par défaut, qu’est-ce qu’on fait au chemin par défaut ?

On utilise un templateUrl, app.html on a ng-view app.html on met son contenu tout simplement, et le contrôleur app.Controller, si vous regardez le contrôleur il contient scope.modele.message, modele.message qui est affiché, c’est pour ça qu’il y a ça, maintenant dans le route provider vous avez d’autres chemins, bonus, ça va mettre le template bonus validé, au lieu d’appeler un fichier HTML comme template qui était ici, à la place de ça, que ce soit le contenu de ces fichiers html, ce sera écrit tout simplement bonus validé.

Qu’est-ce que je fais ?

Je me mets à la fin tout simplement /bonus, ça affiche bonus validé, ensuite je met /promo, vous allez voir ça va afficher autre chose, /promo, code promo activé comme c’était prévu, et dans tous les autres cas ça affiche une erreur, si ici vous tapez n’importe quoi, ce code n’existe pas et si vous revenez à l’accueil, le lancement, donc c’est les routes provider ça permet de définir plusieurs URL à partir du même chemin, à partir de votre index.html, en fonction des paramètres vous pouvez appeler carrément afficher le contenu d’un fichier html qui réutilise toute la puissance d’AngularJS avec les contrôleurs, ou carrément donner dans le template directement le code html moi je vous conseille, comme vous avez vu dans les cours développement facile, de toujours séparer votre code en plusieurs fichiers, donc à chaque fois de faire des url de template, plutôt moi je fais ça c’est pour vous montrer dans l’exemple, plutôt que de faire ça, vous créez des fichiers html par exemple là ce serait bonus.html, promo.html, error.html, et dedans vous mettez votre code, si vous voulez mettre du contenu un petit peu dynamique, ou évolué, vous utilisez comme ici les contrôleurs d’AngularJS, et vous avez vu que c’est déjà d’une part c’est simple à mettre en place et en plus c’est très puissant à partir de la même URL, vous pouvez créer des pages très puissantes avec AngularJS.

Vous avez tout ce qu’il faut pour utiliser les providers maintenant c’est à vous de jouer.

Votre plan d’actions !

Alors votre plan d’action, vraiment, j’insiste mais je vais le faire de plus en plus d’insister dans chaque cours vidéo, vous devez prendre des exemples de code source, donc téléchargez le code source sous cette vidéo et les adapter en fonction de vos applications, c’est comme ça vous allez comprendre le principe de fonctionnement des provider avec AngularJS et que vous allez rester petit à petit au fur et à mesure du temps dans votre maîtrise d’AngularJS.

Toute façon si vous avez des questions posez les directement sous ce cours vidéo, les experts de l’équipe développement facile sont à votre disposition pour vous aider à progresser rapidement.

Maintenant vous avez un formulaire sous cette vidéo, vous renseignez simplement votre prénom, votre adresse e-mail, vous cliquez sur recevoir et instantanément, vous allez recevoir par exemple, chaque semaine, tous les 15 jours, ou tous les mois des cours gratuitement, entièrement gratuits, des cours pour utiliser AngukarJS, le Framework jQuery, ionique framework, gratuitement vous allez recevoir plusieurs cours avec la méthode développement, et si vous voulez aller beaucoup, vous êtes free-lance, employés développeur dans une entreprise et vous souille souhaitez améliorer vos compétences à la vitesse grand V, cliquez simplement sur l’image sur le lien cliquable et vous allez découvrir dans le détail comment créer des Web App, en codant une seule fois et en un clic, les déployant sur tous les périphériques que ce soit Apple, Android, Windows phone, que ce soit des tablettes, des Smartphones votre application fonctionnera.

Bien évidemment vous aurez les experts de l’équipe développement facile donc il y a plusieurs experts qui ont 10 années d’expérience dans le développement et plusieurs langages de programmation si vous avez une difficulté par exemple à partir d’un cours, un exemple de code source, vous avez des bugs quand vous le mettez en place dans votre application, suffit d’envoyer un simple message, Bonjour j’ai du mal à utiliser cela, vous joignez votre code source, l’expert le plus qualifié de la méthode développement facile va regarder vos codes source, les corriger, il va vous donner des explications supplémentaires par parce que vous n’avez pas compris, et si nécessaire va vous donner un exemple encore en plus et vous recevrez tout ça directement dans votre boîte mail, c’est aussi simple que ça, donc pour profiter de l’accompagnement développement facile de toutes les stratégies avec Ionique framework, AngularJS, la création de web app, cliquez simplement sur la bannière, sur l’image juste au-dessus de moi je retrouve tout de suite dans la deuxième vidéo à tout de suite.

[/ppmtoggle] [/ppmaccordion]

Télécharger l’exemple de code source vu dans la vidéo

Retrouvez le code source commenté sur la mise en place d’un provider avec AngularJS

Avez vous déjà utilisé un provider pour paramétrer vos services ?

Utilisez la zone commentaire pour poser vos questions sur la mise en place d’un provider avec AngularJS