Blue Flower

Chercher

AngularJS : Les services AngularJS

1. Généralités

1.1. Qu'est-ce qu'un service AngularJS?

   Dans AngularJS, un service est un  "objet" au sens JavaScript ( une fonction constructeur par opposition objet littéral ) qui obéit au pattern singleton et qui sert à effectuer des tâches spécifiques; c'est dans les différents services qu'on doit trouver la logique métier d'une application AngularJS. La séparation des rôles des composants d' AngularJS doit être au cœur de la conception de toute  application AngularJS .
Le "Controller" (contrôleur) est responsable de la liaison des données du Modèle aux Vues via le service  $scope et il  n'est en aucun cas concerné  par la mise en place de la  logique métier de l'application, c'est à dire  qu'il ne doit pas  aller chercher les données ou les manipuler.
Un service est  sans état  et il contient des fonctions qui peuvent être appelées de n'importe où, c'est à dire à partir des Controllers, des filtres etc.

AngulaJS  instancie chaque service  avec le service natif $injector au moment de son utilisation; un service est instancié  au moment où l'application en  a besoin. Comme dit précédemment un service est une fonction constructeur qui est invoquée une fois lors de l'exécution avec new, tout comme ce que nous ferions avec une application JavaScript avec la seule différence que c'est AngularJS fqui ait appel à new  sans l' intervention du développeur de l'application. Pour créer un service on  se sert de l'une des méthodes suivantes:

  1. Utilisation de la méthode .service()
  2. Utilisation de la méthode .factory()
  3. Utilisation de la méthode .provider()
  4. Utilisation de la méthode .value()
  5. Utilisation de la méthode .constant()

Dans  AngularJS on a  deux sortes de service; les services internes d' AngularJS ( $http, $scope, $location, $window, etc) et les services qu'on crée  en fonction des besoins.

1.2. Création de services

1.2.1. Utilisation de la méthode .service(...)

La fonction angular.module('mainApp',[]) qui crée une application AngularJS (ici on vient de créer une application dont le nom es mainApp) possède une méthode ".service(...)"  ( voir ci-dessous) qui permet de  créer  un service;  dans l'exemple ci-dessous appelons ce service de l'application AngularJS mainApp,  userService :

var mainApp = angular.module('mainApp', []);
mainApp.service('userService', function(){
    this.users = ['Isako', 'Kodeko', 'Hashimia'];
});

Chaque élément du tableau users est accessible via le service userService. Le service est ainsi créé par la méthode ".service()" ; cette méthode prend deux paramètres ; le premier paramètre est le non du service et le deuxième paramètre le corps de la fonction construisant l'objet service AngularJS;
Comme on le verra par la suite un service est un objet Javascript qui contient différents éléments entre autres des fonctions. Pour utiliser le service on va l'injecter dans l'application via un controller; Gardez à l'esprit que les services sont des objets uniques et qu'ils sont instanciés une fois par l'application angularJS  et qu'un service est instancié lorsque un des composants de l'application angularJS a besoin.
Exemple
Commençons par créer un service très simple, un service qui va calculer le carré d'un nombre donné. Il est de bon ton de mettre tous les services dans un fichier JavaScript séparé des autres fichiers JavaScript de l'application; appelons ce fichier "service.js.

var CalculService = angular.module('CalculService', [ ])
.service('Calcul', function () {
    this.carre = function (a) { return a*a};
})

On a un exemple de module qui créé un service et ce module va être intégré à l'application mainApp et par la suite on va utiliser le service de notre module en plus du sevice créé avec l'application.

var mainApp = angular.module('mainApp', ['CalculService']);
mainApp.controller('CalculController', function ($scope, Calcul) {
    $scope.trouverCarre = function () {
        $scope.reponse = Calcul.carre($scope.number);
    }
});

Sur la vue, nous utilisons le contrôleur pour effectuer la liaison de données comme indiqué ci-dessous:

<div class="container">
        <div>
            <div ng-controller="CalculController">
                Enter a nombre:
                <input type="number" ng-model="number">
                <button  ng-click="trouverCarre()">Carré</button>
                <div>{{reponse}}</div>
            </div>
        </div>
    </div>
 1.2.2. Utilisation de la méthode .factory(...)

Considérons l'application mainApp ci-dessous; cette application (module mainApp) a une méthode factory(...); cette méthode permet de créer une Factory; une Factory est un objet littéral au sens JavaScript   et elle  sera utilisée par la méthode ".service(...)" pour créer un service:

var mainApp = angular.module("mainApp", []);
mainApp.factory('MathService', function() {
   var factory = {};
   factory.multiply = function(a, b) {
      return a * b
   }
   return factory;
}); 

.....

A ce niveau on a juste créé une Factory; celle-ci retourne  juste une valeur utilisable par une fonction contrôleur ou un service ou tout autre fonctionnalité ayant besoin de cette valeur car, par définition, une " Factory est une fonction qui crée des valeurs. Lorsqu'un service, un contrôleur, etc. a besoin d'une valeur à injecter, la factory  crée la valeur à la demande. Ainsi le bout de code ci-dessous utilise la fonction ".service()" pour créer le service effectif dont on a besoin en se servant de la Factory MathService.

mainApp.service('CalcService', function(MathService){
   this.square = function(a) {
      return MathService.multiply(a,a);
   }
});

Ici on a créé un service qui s'appelle CalcService qui utilise la valeur de la fonction créée par la la fonction factory()  ci-dessus.

1.2.3. Utilisation de la méthode provider() pour créer un service

Les providers sont des objets singleton qui peuvent être injectés, par exemple, dans d'autres services, controller (contrôleurs) et directives. Tous les providers sont enregistrés en utilisant différentes "fonctionnalités" , là où le provider est le plus flexible. Quand un provider() est définie il  est disponible à la fois dans les phases de configuration et d'exécution. Un provider() est défini syntaxiquement comme une fonctionnalité cliente  qui implémente une méthode  "$get".
On utilise la "fonctionnalité" Provider() lorsqu'on souhaite exposer une API pour une configuration qui doit être effectuée avant le démarrage de l'application.  ...

1.2.4. Utilisation de la méthode value() pour créer un service

(à suivre).....

1.2.5. Utilisation de la méthode constant() pour créer un service

(à suivre)...

..... 

2.  Service internes d'AngularJS

AngularJS fournit un certain nombre de services internes.  $http est l'un d'entre eux ( tous les services internes d'AngularJS commencent par le signe $)

Exemple:

module.controller('FooController', function($http){
 //...
});
module.controller('BarController', function($window){
//...
);

Dans ces deux exemples on définit deux contrôleur et on y injecte le service $http dans l'un et le service $window dans l'autre.

2.1. Le service $scope

Un $scope est comme un pont automatisé entre le code JavaScript du contrôleur et le DOM qui contient nos données au sein de la vue concernée. $scope est un objet qui non seulement se trouve dans notre JavaScript pour accéder aux données et aux  valeurs présentes dans le code du contrôleur, mais il représente ces valeurs dans le DOM (Document Object Model) de l'application AngularJS. Nous utilisons uniquement $scope au sein du code  des contrôleurs où nous lions les données du contrôleur à la vue.

Ici on a un exemple d' une utilisation de $scope dans un contrôleur appelé "AppCtrl" d'une application AngularJS:

$scope.someValue = 'Hello';

Pour récuperer la valeur au sein de la vue on procède juste comme ci-dessous:

<div ng-controller="AppCtrl">
{{ someValue }}
</div>

2.2. Le service $http

Le service $http est  central pour  AngularJS; avec ce service on traite les communications entre clients et serveurs distants  avec le protocole  HTTP  via l'objet XMLHttpRequest des navigateurs ou via JSONP.
Ce service  est basé sur les API "differed/promise" du service $q et il est sous forme d'une fonction qui prend un seul argument (un objet de configuration); il est utilisé pour générer une requête HTTP  qui, en retour, renvoie une promesse.
Qu'est-ce qu'une promesse (promise)?
Le fonctionnement de Promise dans AngularJS est simple; cette fonctionnalité fait appel à des CallBack qui vont traiter la requête initier par une méthode de $http ici de façon asynchrone; en retour on a une promesse: si le travail asynchrone est terminé, la fonction ".then()" de l'API Promise est déclenché. Cette fonction (ou méthode) prend en paramètre deux fonctions (callBack) , une pour le cas de traitement sans erreur et l'autre pour traitement avec erreur. On verra par la suite qu'un certain nombre de servcies AngularJS retourne une Promise en l'occurrence ici $http;

Exemple

// Simple exemple de requête GET :
$http({
  method: 'GET',
  url: '/someUrl'
}).then(function successCallback(response) {
 // Cette fonction successCallback est un callback qui sera appelé de façon asynchrone     
 // lorsque la reponse est prête when the response is available   },
 function errorCallback(response) {
  // cette fonction errorCallback sera appelée de façon asynchrone si il y a une  erreur concernant la requête 
// ou si le serveur retourne une code d' erreur concernant son status.
});

La fonction $http prend un seul paramètre {method: 'GET', url: 'someUrl'}; ce paramètre comprend la fonction HTTP qui va être utilisée en l'occurrence ici 'GET' et l'url où se trouve la ressource concernée par la requête i.e someUrl . Toute la puissance de la fonctionnalité "Promise" réside  dans ces callback qui font le traitement des  requêtes et qui retournent les réponses  "response" (bonne ou erreur) de façon asynchrone. ...

2.2.1. Les méthodes de $http
Method Description
$http.get() Perform Http GET request.
$http.head() Perform Http HEAD request.
$http.post() Perform Http POST request.
$http.put() Perform Http PUT request.
$http.delete() Perform Http DELETE request.
$http.jsonp() Perform Http JSONP request.
$http.patch() Perform Http PATCH request.

.....

2.3.2. $http.get():

La méthode $http.get() envoie une requête http GET au serveur distant et récupère des données en retour; elle a comme signature:
Signature: HttpPromise $http.get(url)
La méthode $http.get() retourne  un objet  HttpPromise qui possède  différentes méthodes pour traiter la réponse de la requête http GET.  Cet Objet "HttpPromise" possède deux méthodes  particulièrement importantes à savoir les méthodes "success" et "error" : l'exemple ci-dessous nous donne une illustration :

Exemple

<!DOCTYPE html>
<html>
<head>
    <script src="/~/Scripts/angular.js"></script>
</head> <body ng-app ="myApp">     <div>         <div ng-controller="myController">            Response Data: {{data}}            Error: {{error}}         </div>     </div>     <script>         var myApp = angular.module('myApp', []);         myApp.controller("myController", function ($scope, $http) {                  var onSuccess = function (data, status, headers, config) {                 $scope.data = data;             };            var onError = function (data, status, headers, config) {                 $scope.error = status;             }                var promise = $http.get("/demo/getdata");              promise.success(onSuccess);            promise.error(onError);               });     </script> </body> </html>

.Détails :
Ici on illustre notre propos en affichant les données ( data) si la récupération des données s'est passée correctement et l' affichage de l'erreur (error) éventuelle.

précédent