Comment faire hériter un service ?

AngularJs ne permet pas de faire de l’héritage de classes et de services par défaut.

Ce qui est bien dommage puisque cela permet d’avoir bien souvent du code beaucoup plus propre et ordonné.

Mais je vous propose de voir comment implémenter l’héritage Javascript général à un composant AngularJs et notamment à un service.

 

Introduction :

Comme vous le savez sûrement il y a 2 façons de créer des services sous Angular :

• module.factory(name, factoryFn)
• module.service(name, factoryFn)

On va voir un peu plus en détails comment mettre en place l’héritage dans ces 2 cas.

 

module.factory :

1ère méthode : héritage prototypal

Si vous avez besoin de mettre en place un héritage entre différents services qui sont instanciés par ‘module.factory‘ le pattern d’héritage prototypal fonctionne très bien.

Si vous voulez plus d’infos sur l’héritage prototypal, je vous invite à suivre ce lien : http://naholyr.fr/2011/02/le-point-sur-javascript-et-heritage-prototypal/

1) Créer l’objet service parent:

var serviceParent = (function () {
	  return {
	    methodeParente : function () {
	      // TODO
	    };
	  };
}());

2) Créer le service enfant :

var serviceEnfant = Object.create(serviceParent);
serviceEnfant.methodeParente = function () {
  // extension de la méthode parente
};

module.factory('ServiceEnfant', function () {
  return serviceEnfant;
});

On fait donc ici hériter ‘serviceEnfant’ de ‘serviceParent’, ce qui permet de redéfinir les méthodes existantes du parent comme dans n’importe quel héritage.

2ème méthode : injection du parent

Une autre méthode d’héritage est d’injecter le parent dans le service enfant, puis de créer un nouvel objet qui héritera du prototype du parent.

1) Créer le service parent :

module.factory('ServiceParent', function ($q, $http) {
  return {
    //public API
  };
});

2) Créer le service enfant :

 
module.factory('ServiceEnfant', function (ServiceEnfant, $sce) { 
   var service= Object.create(ServiceParent); 
   service.methodeEnfant = function () { 
       // extension de la méthode parente 
   }; 
   return service; 
});

Cette méthode est sans doute plus simple à mettre en place quand il est nécessaire d’injecter des dépendances dans l’objet parent.

 

module.service :

Le ‘module.service‘ est une alternative au ‘module.factory‘ qui permet de créer un ensemble de méthodes constructeur qui modélisent les objets et de les déclarer comme des services.

Cela se rapproche plus d’une utilisation javascript standard (hors AngularJs) mais peut être utile dans de gros projets ou le model est généré depuis un diagramme UML par exemple.

Et étant donné qu’on se rapproche d’un cas basique de javascript, on peut réutiliser la méthode d’héritage par prototypage de javascript directement.

Voici un exemple ci-dessous :

function Parent(nom) {
	this.nom = nom;
}
Parent.prototype.talk = function() {
	return 'Mon nom est ' + this.nom;
};
Parent.$inject = ['nom'];

function Enfant(nom) {
	Parent.call(this, nom);
}
Enfant.prototype = Object.create(Parent.prototype);
Enfant.prototype.methodeEnfant = function() {
	//
};
Enfant.$inject = ['nom'];

angular.module('demo').service('Parent', Parent);
angular.module('demo').service('Enfant', Enfant);
angular.module('demo').value('nom', 'enfant');

A vous de choisir la méthode qui correspond le mieux à votre façon de coder !