{"id":290,"date":"2015-02-24T14:16:45","date_gmt":"2015-02-24T13:16:45","guid":{"rendered":"http:\/\/lalloue.fr\/blog\/?p=290"},"modified":"2015-03-02T18:03:36","modified_gmt":"2015-03-02T17:03:36","slug":"comment-faire-heriter-un-service","status":"publish","type":"post","link":"http:\/\/lalloue.fr\/blog\/comment-faire-heriter-un-service\/","title":{"rendered":"Comment faire h\u00e9riter un service ?"},"content":{"rendered":"<p><a href=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2014\/12\/AngularJS-large.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-166\" src=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2014\/12\/AngularJS-large-300x84.png\" alt=\"AngularJS-large\" width=\"300\" height=\"84\" srcset=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2014\/12\/AngularJS-large-300x84.png 300w, http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2014\/12\/AngularJS-large.png 383w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>AngularJs ne permet pas de faire de l&#8217;h\u00e9ritage de classes et de services par d\u00e9faut.<\/p>\n<p>Ce qui est bien dommage puisque cela permet d&#8217;avoir bien souvent du code beaucoup plus propre et ordonn\u00e9.<\/p>\n<p>Mais je vous propose de voir comment impl\u00e9menter l&#8217;h\u00e9ritage Javascript g\u00e9n\u00e9ral \u00e0 un composant AngularJs et notamment \u00e0 un service.<\/p>\n<p><!--more--><\/p>\n<p>&nbsp;<\/p>\n<h3>Introduction :<\/h3>\n<p>Comme vous le savez s\u00fbrement il y a 2 fa\u00e7ons de cr\u00e9er des services sous Angular :<\/p>\n<ul>\n<li>module.factory(name, factoryFn)<\/li>\n<li>module.service(name, factoryFn)<\/li>\n<\/ul>\n<p>On va voir un peu plus en d\u00e9tails comment mettre en place l&#8217;h\u00e9ritage dans ces 2 cas.<\/p>\n<p>&nbsp;<\/p>\n<h3>module.factory :<\/h3>\n<h6>1\u00e8re m\u00e9thode : h\u00e9ritage prototypal<\/h6>\n<p>Si vous avez besoin de mettre en place un h\u00e9ritage entre diff\u00e9rents services qui sont instanci\u00e9s par &#8216;<em>module.factory<\/em>&#8216; le pattern d\u2019h\u00e9ritage prototypal fonctionne tr\u00e8s bien.<\/p>\n<p><em>Si vous voulez plus d&#8217;infos sur l&#8217;h\u00e9ritage prototypal, je vous invite \u00e0 suivre ce lien :\u00a0<a href=\"http:\/\/naholyr.fr\/2011\/02\/le-point-sur-javascript-et-heritage-prototypal\/\">http:\/\/naholyr.fr\/2011\/02\/le-point-sur-javascript-et-heritage-prototypal\/<\/a><\/em><\/p>\n<p><strong>1) Cr\u00e9er l&#8217;objet service parent:<\/strong><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar serviceParent = (function () {\r\n\t  return {\r\n\t    methodeParente : function () {\r\n\t      \/\/ TODO\r\n\t    };\r\n\t  };\r\n}());\r\n<\/pre>\n<p><strong>2) Cr\u00e9er le service enfant :<\/strong><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar serviceEnfant = Object.create(serviceParent);\r\nserviceEnfant.methodeParente = function () {\r\n  \/\/ extension de la m\u00e9thode parente\r\n};\r\n\r\nmodule.factory('ServiceEnfant', function () {\r\n  return serviceEnfant;\r\n});\r\n<\/pre>\n<p>On fait donc ici h\u00e9riter &#8216;serviceEnfant&#8217; de &#8216;serviceParent&#8217;, ce qui permet de red\u00e9finir les m\u00e9thodes existantes du parent comme dans n&#8217;importe quel h\u00e9ritage.<\/p>\n<h6>2\u00e8me m\u00e9thode : injection du parent<\/h6>\n<p>Une autre m\u00e9thode d&#8217;h\u00e9ritage est d&#8217;injecter le parent dans le service enfant, puis de cr\u00e9er un nouvel objet qui h\u00e9ritera du prototype du parent.<\/p>\n<p><strong>1) Cr\u00e9er le service parent :<\/strong><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nmodule.factory('ServiceParent', function ($q, $http) {\r\n  return {\r\n    \/\/public API\r\n  };\r\n});\r\n<\/pre>\n<p><strong>2) Cr\u00e9er le service enfant :<\/strong><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\"> \r\nmodule.factory('ServiceEnfant', function (ServiceEnfant, $sce) { \r\n   var service= Object.create(ServiceParent); \r\n   service.methodeEnfant = function () { \r\n       \/\/ extension de la m\u00e9thode parente \r\n   }; \r\n   return service; \r\n});\r\n<\/pre>\n<p>Cette m\u00e9thode est sans doute plus simple \u00e0 mettre en place quand il est n\u00e9cessaire d&#8217;injecter des d\u00e9pendances dans l&#8217;objet parent.<\/p>\n<p>&nbsp;<\/p>\n<h3>module.service :<\/h3>\n<p>Le &#8216;<em>module.service<\/em>&#8216; est une alternative au &#8216;<em>module.factory<\/em>&#8216; qui permet de cr\u00e9er un ensemble de m\u00e9thodes constructeur qui mod\u00e9lisent les objets et de les d\u00e9clarer comme des services.<\/p>\n<p>Cela se rapproche plus d&#8217;une utilisation javascript standard (hors AngularJs) mais peut \u00eatre utile dans de gros projets ou le model est g\u00e9n\u00e9r\u00e9 depuis un diagramme UML par exemple.<\/p>\n<p>Et \u00e9tant donn\u00e9 qu&#8217;on se rapproche d&#8217;un cas basique de javascript, on peut r\u00e9utiliser la m\u00e9thode d&#8217;h\u00e9ritage par prototypage de javascript directement.<\/p>\n<p>Voici un exemple ci-dessous :<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nfunction Parent(nom) {\r\n\tthis.nom = nom;\r\n}\r\nParent.prototype.talk = function() {\r\n\treturn 'Mon nom est ' + this.nom;\r\n};\r\nParent.$inject = ['nom'];\r\n\r\nfunction Enfant(nom) {\r\n\tParent.call(this, nom);\r\n}\r\nEnfant.prototype = Object.create(Parent.prototype);\r\nEnfant.prototype.methodeEnfant = function() {\r\n\t\/\/\r\n};\r\nEnfant.$inject = ['nom'];\r\n\r\nangular.module('demo').service('Parent', Parent);\r\nangular.module('demo').service('Enfant', Enfant);\r\nangular.module('demo').value('nom', 'enfant');\r\n<\/pre>\n<p>A vous de choisir la m\u00e9thode qui correspond le mieux \u00e0 votre fa\u00e7on de coder !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>AngularJs ne permet pas de faire de l&#8217;h\u00e9ritage de classes et de services par d\u00e9faut. Ce qui est bien dommage puisque cela permet d&#8217;avoir bien souvent du code beaucoup plus propre et ordonn\u00e9. Mais je vous propose de voir comment impl\u00e9menter l&#8217;h\u00e9ritage Javascript g\u00e9n\u00e9ral \u00e0 un composant AngularJs et notamment \u00e0 un service.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[17,9],"tags":[19,39],"_links":{"self":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts\/290"}],"collection":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/comments?post=290"}],"version-history":[{"count":11,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts\/290\/revisions"}],"predecessor-version":[{"id":317,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts\/290\/revisions\/317"}],"wp:attachment":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/media?parent=290"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/categories?post=290"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/tags?post=290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}