Les services sont des objets JavaScript qui fournissent des méthodes et des propriétés que vous pouvez injecter dans un controller.
Tout est expliqué dans la vidéo
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment utiliser les services AngularJS
Bonjour et bienvenu sur Développement Facile.
AngularJS – Les services
Ici Matthieu expert en développement applicatif, vous allez continuer à découvrir tout le potentiel du framework de Google AngularJS, un framework que j’adore, très simple à utiliser et avec énormément de possibilités pour simplifier votre développement.
Dans ce nouveau cours vous allez apprendre à utiliser les services avec AngularJS, vous allez voir les services c’est vraiment très puissant pour vos développements, pour vos applications.
Un service c’est tout simplement un objet JavaScript qui fournit des méthodes et des propriétés qui peuvent être injectées dans un contrôleur, dans un filtre, une directive ou même dans un autre service.
AngularJS vous propose de base, plusieurs services comme dollars http pour effectuer des requêtes http, des request, get post et $location par exemple, pour gérer la navigation.
Les noms des services AngularJS sont toujours préfixés avec le caractère dollar, simple à retenir, cette convention permet de différencier les services d’AngularJS des autres services, c’est surtout des services que vous allez créer.
Déjà premièrement pour utiliser un service, il suffit d’utiliser simplement la fonctionnalité d’injection de dépendances d’AngularJS, donc vous déclarez un contrôleur qui dépend du service http donc modules.Controler pour déclarer votre contrôleur, vous donnez un nom au contrôleur et fonction avec les entrés scope http et ensuite vous faites votre traitement avec httpget, vous appelez une URL, vous récupérez des data, voulez affectez à une variable scope et ensuite vous les affichez dans votre page HTML, c’est aussi simple que ça, je ne dis pas que c’est facile mais il y a très peu de ligne de code, vous allez comprendre le principe d’utilisation des services vous allez vous régaler, bien vous amuser.
Alors vous pouvez également, comme je vous l’ai dit, créer des services, la déclaration d’un service dans un module se fait avec les méthodes service ou factory, vous déclarez votre service ou vous déclarez une factory. La méthode service elle prend comme paramètre le nom du service et un constructeur d’objet JavaScript, fonction userInfos, vous créez module.service, vous l’appelez userInfos, et vous appelez votre fonction userInfos, votre constructeur, c’est une fonction qui va retourner un objet JavaScript.
Ensuite vous avez lors de la résolution du service, dans le cours précédent, vous avez tout appris, pas tout appris, mais appris comment fonctionne l’injecteur de dépendance, l’injecteur écrit une nouvelle instance de service, il va effectuer un new sur le constructeur passé en paramètre. Et la méthode factory quant à elle, elle prend en paramètre pareil le nom du service puis une fonction factory qui retourne une nouvelle instance du service, factory service fonctionnent ensemble, factory va vous servir à créer une instance du service dans des cas bien précis.
module.factory le nom du service qui va être utilisé et ensuite votre fonction qui va retourner une nouvelle instance du service.
Exemple pratique AngularJS
Vous allez voir à travers un exemple très pratique, ça peut vous paraître abstrait, service factory, c’est de la théorie, on va rentrer, vous allez rentrer dans la pratique et voir ce que ça donne, c’est partit.
Voici un exemple de code source, mais cette fois vous allez avoir raison deux exemples de code source pour que vous puissiez utiliser, créer des services dans vos applications créées avec AngularJS.
Alors le premier exemple c’est celui-là, c’est-à-dire vous donnez un nombre et ça calcule la puissance 8×8=64 et 8 × 64 ² trois 512, avec un chiffre plus petit, 4×4=16, x4=32, ça doit faire 64 et sinon 5×5 25 et 25x 5 ça fait 125.
Comment faire ça très simplement avec Angular ?
Vous créez deux services, math service qui va être utilisé ici, pour avec plusieurs méthodes c’est-à-dire c’est la création d’un service avec plusieurs méthodes, donc une méthode d’ajout de chiffre, soustraction, multiplication, division de chiffre.
Voilà ensuite vous avez un autre service, ça s’appelle calculator service qui va utiliser une instance de math service, avec deux méthodes aussi, dans les services vous définissez des méthodes, une méthode, Le Carré et le cube, donc le carré ça multiplie et le cube on multiplie ça par cette valeur et cette valeur on la multiplie ensemble, voilà si c’est cinq, par exemple on va prendre 2, c’est 2×2=4, et 2 × 4=8 tout simplement, si on prend 3, 3 ×3=9, 3×9=27.
De la même façon, vous avez vos deux services ici, qui ont des méthodes définies qui s’utilisent eux-mêmes, le math service, le service math service est utilisé par calculator service donc des méthodes.
Et vous avez le contrôleur calculator, contrôleur qui va utiliser CalculatorService ici, tout simplement, et dans CalculatorService on a doSquare, c’est une fonction, doCube c’est une fonction, donc tout simplement coté HTML, on renseigne un nombre pour le calcul deux boutons, doSquare, doCube, c’est au si simple que ça. ng-click, doSquare, ng-click et doCube est défini et on utilise CalculatorService qui est défini ici .square, on lui transmet le nom, scope.number, .cube et scope.number, number il est ici, input le .number, ng-click doSquare doCube, je reprends une fois.
Vous définissez vos services, MathServices en premier qui a des méthodes d’addition, soustraction, multiplication ou division ensuite CalculatorService qui permet de faire des calculs au carré ou au cube, et il utilise un autre service donc on appel sur MathService des méthodes, multiply, vous avez ensuite votre contrôleur, CalculatorController, qui utilise CalculatorService, donc on appelle la méthode square sur CalculatorService en lui passant le paramètre number, pareil pour doCube, doSquare. Voilà c’est au si simple que ça, de créer des services avec AngularJS.
Dans le deuxième exemple en fait c’est une fonction d’édition, vous pouvez éditer voilà tout simplement ou ajouter des informations dans le tableau, tout simplement, là, j’ai fait une erreur volontaire, un numéro de téléphone, 16, je vois qu’il y a une erreur, je l’édite en direct, je sauvegarde l’erreur est corrigée, je peux rajouter un autre élément dans le tableau, tout simplement, avec des chiffres, voilà il y a une erreur c’est possible de l’éditer aussi simplement que ça, et on peut supprimer bien évidemment, des éléments dans le tableau.
Alors comment faire ça ?
Avec des services, regardez le code HTML, c’est un contrôleur avec, on affiche un formulaire, on va saisir le nom, e-mail, et le téléphone, l’id sachant cacher et un bouton on va appeler setContact et ensuite en dessous on a notre tableau, donc le tableau ici, on parcourt les contacts qui sont dans le tableau contact liste, on les affiches et on a deux fonctions d’édition, ou la suppression en transmettant toujours le contact id sur l’édition et la suppression.
Niveau JavaScript comment ça se passe ?
Le service ContactService qui lui, le tableau qui contient tous les contacts, avec l’id 0, il n’y en a qu’un par défaut, si je recharge la page, il n’y a qu’un seul contact, je peux bien évidemment en mettre un deuxième, alors je fais un copier-coller, un virgule, id on l’incrémente, on va mette Matthieu, Matthieu, 33 23 voilà donc si je recharge il aura deux éléments dans le tableau, et comme tout à l’heure, il est possible d’en ajouter d’autres aussi simplement que ça.
Donc ça c’est vos éléments dans le tableau, donc contact service ici, ensuite vous définissez les méthodes avec plusieurs méthodes d’accès, vous avez une méthode sauvegardée d’un nouveau contact, on rajoute, on incrémente une id, donc là il va être égal à deux, tout simplement, parce qu’il y a déjà deux éléments, sinon il y aura un petit problème lors de l’édition, on l’incrémente à deux parce qu’il y a deux éléments donc je vais le mettre, c’est le nombre d’éléments présents par défaut dans le tableau, voilà, donc on incrémente l’id et on push dans le tableau des contacts qui est ici ou alors on effectue une mise à jour d’un contact, si contact id existe on effectue la mise à jour d’un contact, ça c’est pour récupérer un contact, donc on parcourt dès qu’on reconnaît l’id, on récupère, pour deleter c’est la même chose on parcourt dès qu’on reconnaît l’id on le supprime et là ça renvoi la liste de tous les contacts.
Ensuite vous avez contactController avec les méthodes d’ajout, suppression et de mises à jour d’un contact, donc là on récupère la contact liste avec le service.Liste vous pourrez mettre .get liste si vous voulez getld, on va mettre getAll, je préfère, c’est plus français voilà, on refait un petit test, Didier [email protected], un numéro, on dit qu’on s’est trompé c’est .fr on sauvegarde, tout est sauvegardé, donc on récupère la liste, sauvegardé d’un contact, contact service toujours on appelle le service .save, rappelez-vous il y a une méthode save, il suffit de lui transmettre le contact, scope.newcontact, suppression, on lui transmet un id, enfin des lettres un id, et on met à jour new contact, et pareil pour l’édition d’un contact, ont fait une copie grâce à angular.copy, on récupère get id et on fait une copie dans new contact, et après avec new contact il est ajouté, c’est aussi simple que ça.
Si vous regardez, ça c’est un new contact, quand on fait un save, on enregistre le new contact, save contact, si vous regardez il est ici .new contact, ensuite l’édition édit contact qu’est-ce que ça fait est edit contact ?
C’est ici, edit contact et on récupère new contact. Voilà, on l’a récupéré ici, c’est ce qu’on a fait, on refait un save, ça va le sauvegarder parce qu’il y a déjà un id, ensuite vous avez la suppression delete contact, delete contact, on le delete, donc ce qui donne, on peut très bien faire une édition mais supprimer ce contact, voilà tout simplement, et celui-là on peut le sauvegarder, il est bien sauvegardé.
La suppression d’un contact donc regardez bien, delete contact, contact.id, sur celui qu’on a appuyé, on le supprime et ici on à supprimer par exemple, on a supprimé celui qu’on était en train d’éditer et bien on l’enlève automatiquement, donc en quelques lignes de codes, vous avez votre service de gestion donc un service qui permet de gérer des contacts donc un carnet d’adresses par exemple, ça vous permet de gérer très facilement un carnet d’adresses en quelques ligne de code.
Vous retrouvez les de code source en téléchargement sous ce cours comme d’habitude maintenant c’est à vous de jouer.
Votre plan d’actions !
Alors maintenant c’est à vous de jouer, téléchargez le code source sous cette vidéo, reprenez le, adaptez le à vos applications, corrigez le, améliorez le, c’est ce qui va vous permettre de progresser très rapidement à la vitesse de l’éclair.
Comme d’habitude posez vos questions sous ce cours vidéo, l’équipe développement facile vous répondra avec grand plaisir vraiment, et sous cette vidéo il y a un formulaire mail, donc renseignez simplement votre prénom et votre adresse e-mail et vous allez recevoir gratuitement les prochains cours développement facile, que ce soit sur AngularJS, jQuery, etc. vous allez recevoir plusieurs cours qui vont vous permettre de progresser rapidement.
Maintenant si vous voulez aller vraiment beaucoup plus loin, juste au-dessus de moi, il y a une bannière, une image, cliquez dessus dès maintenant, vous allez être redirigé dans une deuxième avec une deuxième vidéo et vous allez découvrir la puissance d’AngularJS, Ionique framework, les stratégies de la méthode développement facile dans le détail pour vous aider à créer des web app, vous codez une seule fois votre application, votre jeu et en un clic, façon de parler, il y a plusieurs click, bien évidemment mais avec le même code source, et quelques clics, vous allez déployer votre application sur les Smartphones, que ce soient les iPads, les tablettes iPad, et les Smartphone iPhone, Smartphone Android, les smartphones sous Windows Phone, les tablettes sous Android, les tablettes Windows phone, à partir du même code source votre jeu, votre application est disponible sur tous ces périphériques.
Cliquez ici au-dessus de moi, sur l’image, tout est expliqué dans la deuxième page, dans la deuxième vidéo je vous dis à tout de suite.
[/ppmtoggle][/ppmaccordion]
Télécharger l’exemple d’utilisation des services avec AngularJS
Retrouvez le code source commenté sur l’implémentation des services avec AngularJS
