{"id":853,"date":"2015-10-29T00:29:02","date_gmt":"2015-10-28T23:29:02","guid":{"rendered":"https:\/\/kbyte.snowpenguin.org\/blog\/?p=853"},"modified":"2020-09-27T00:36:43","modified_gmt":"2020-09-26T22:36:43","slug":"itangular2-condividere-un-servizio-tra-piu-appsenangular2-single-service-for-multiple-apps","status":"publish","type":"post","link":"https:\/\/kbyte.snowpenguin.org\/blog\/en\/2015\/10\/29\/itangular2-condividere-un-servizio-tra-piu-appsenangular2-single-service-for-multiple-apps\/","title":{"rendered":"Angular2: single service for multiple apps"},"content":{"rendered":"<p>Angular2 is great for SPA (Single Page Application), but sometime you need to use multiple apps in a page because you just want to add some Angular &#8220;widgets&#8221; apps.<\/p>\n<p>If you want to use shared data, you can use a service class, but the dependency injection in this case is not easy as it looks.<\/p>\n<p><!--more--><\/p>\n<p>We have two Angular2 apps that use a simple service class:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n\/\/ service.ts\nimport {Injectable, Inject} from 'angular2\/angular2';\nimport {HTTP_BINDINGS, Http} from 'angular2\/http';\n\n@Injectable()\nexport class DataService {\nhttp: Http;\n\nupdated = new EventEmitter();\n\nconstructor(@Inject(Http) http:Http) {\nthis.http = http;\n}\n\n&#x5B;...]\n}\n<\/pre>\n<p>This service needs the Http binding from the dependecy injection. The widgets apps use it in their methods:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n\/\/ widget1.ts\nimport {Component, View, bind} from 'angular2\/angular2';\nimport {HTTP_BINDINGS, Http} from 'angular2\/http';\nimport {DataService} from '.\/service';\n\n@Component({\nselector: 'widget1',\n})\n@View({&#x5B;...]})\nclass Widget1 {\n\ndataService: DataService;\n\nconstructor(dataService: DataService) {\nthis.dataService = dataService;\n}\n\n&#x5B;...]\n}\n<\/pre>\n<p>Here come the hard part: every bootstrap execution will create an instance of the DataService type, but we want only one single instance.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n\/\/ DataService object created\nbootstrap(Widget1, &#x5B;\nHTTP_BINDINGS,\nDataService\n]\n);\n\n\/\/ DataService object created\nbootstrap(Widget2, &#x5B;\nHTTP_BINDINGS,\nDataService\n]\n);\n<\/pre>\n<p>We can avoid this behaviour with a factory that will create the instance and act like a singleton:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n\/\/ service.ts\nvar sdInstance = null;\n\nexport function DataServiceFactory(http:Http) {\nif(sdInstance == null) {\nsdInstance = new DataService(http);\n}\n\nreturn sdInstance;\n}\n<\/pre>\n<p>Now we have to change the injector bindings into the bootstrap executions for every widget:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n\/\/ DataService object created\nbootstrap(Widget1, &#x5B;\nHTTP_BINDINGS,\nbind(DataService)\n.toFactory(DataServiceFactory, &#x5B;Http]),\n]\n);\n\n\/\/ DataService object not created\nbootstrap(Widget2, &#x5B;\nHTTP_BINDINGS,\nbind(DataService)\n.toFactory(DataServiceFactory, &#x5B;Http]),\n]\n);\n<\/pre>\n<p>This solution isn&#8217;t free from any defects. The DataService instance is injected by the injector of the first widget who calls the factory, so the service belongs it. But this pattern is easy to write and understand.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Angular2 is great for SPA (Single Page Application), but sometime you need to use multiple apps in a page because you just want to add some Angular &#8220;widgets&#8221; apps. If you want to use shared data, you can use a service class, but the dependency injection in this case is not easy as it looks.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[176],"tags":[69,70,75],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Angular2: single service for multiple apps - Kbyte@Snowpenguin<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kbyte.snowpenguin.org\/blog\/en\/2015\/10\/29\/itangular2-condividere-un-servizio-tra-piu-appsenangular2-single-service-for-multiple-apps\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular2: single service for multiple apps - Kbyte@Snowpenguin\" \/>\n<meta property=\"og:description\" content=\"Angular2 is great for SPA (Single Page Application), but sometime you need to use multiple apps in a page because you just want to add some Angular &#8220;widgets&#8221; apps. If you want to use shared data, you can use a service class, but the dependency injection in this case is not easy as it looks.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kbyte.snowpenguin.org\/blog\/en\/2015\/10\/29\/itangular2-condividere-un-servizio-tra-piu-appsenangular2-single-service-for-multiple-apps\/\" \/>\n<meta property=\"og:site_name\" content=\"Kbyte@Snowpenguin\" \/>\n<meta property=\"article:published_time\" content=\"2015-10-28T23:29:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-09-26T22:36:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kbyte.snowpenguin.org\/blog\/wp-content\/uploads\/2014\/11\/snowpenguin-blogo.png\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Kbyte\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@kbytesys\" \/>\n<meta name=\"twitter:site\" content=\"@kbytesys\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kbyte\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kbyte.snowpenguin.org\/blog\/en\/2015\/10\/29\/itangular2-condividere-un-servizio-tra-piu-appsenangular2-single-service-for-multiple-apps\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kbyte.snowpenguin.org\/blog\/en\/2015\/10\/29\/itangular2-condividere-un-servizio-tra-piu-appsenangular2-single-service-for-multiple-apps\/\"},\"author\":{\"name\":\"Kbyte\",\"@id\":\"https:\/\/kbyte.snowpenguin.org\/blog\/#\/schema\/person\/f3113c5247622ffcdd4e830ed842a7e4\"},\"headline\":\"Angular2: single service for multiple apps\",\"datePublished\":\"2015-10-28T23:29:02+00:00\",\"dateModified\":\"2020-09-26T22:36:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kbyte.snowpenguin.org\/blog\/en\/2015\/10\/29\/itangular2-condividere-un-servizio-tra-piu-appsenangular2-single-service-for-multiple-apps\/\"},\"wordCount\":323,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kbyte.snowpenguin.org\/blog\/#\/schema\/person\/f3113c5247622ffcdd4e830ed842a7e4\"},\"keywords\":[\"angular\",\"angular2\",\"typescript\"],\"articleSection\":[\"Articles\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kbyte.snowpenguin.org\/blog\/en\/2015\/10\/29\/itangular2-condividere-un-servizio-tra-piu-appsenangular2-single-service-for-multiple-apps\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kbyte.snowpenguin.org\/blog\/en\/2015\/10\/29\/itangular2-condividere-un-servizio-tra-piu-appsenangular2-single-service-for-multiple-apps\/\",\"url\":\"https:\/\/kbyte.snowpenguin.org\/blog\/en\/2015\/10\/29\/itangular2-condividere-un-servizio-tra-piu-appsenangular2-single-service-for-multiple-apps\/\",\"name\":\"Angular2: single service for multiple apps - Kbyte@Snowpenguin\",\"isPartOf\":{\"@id\":\"https:\/\/kbyte.snowpenguin.org\/blog\/#website\"},\"datePublished\":\"2015-10-28T23:29:02+00:00\",\"dateModified\":\"2020-09-26T22:36:43+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/kbyte.snowpenguin.org\/blog\/en\/2015\/10\/29\/itangular2-condividere-un-servizio-tra-piu-appsenangular2-single-service-for-multiple-apps\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kbyte.snowpenguin.org\/blog\/en\/2015\/10\/29\/itangular2-condividere-un-servizio-tra-piu-appsenangular2-single-service-for-multiple-apps\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kbyte.snowpenguin.org\/blog\/en\/2015\/10\/29\/itangular2-condividere-un-servizio-tra-piu-appsenangular2-single-service-for-multiple-apps\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kbyte.snowpenguin.org\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular2: single service for multiple apps\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kbyte.snowpenguin.org\/blog\/#website\",\"url\":\"https:\/\/kbyte.snowpenguin.org\/blog\/\",\"name\":\"Kbyte@Snowpenguin\",\"description\":\"The inner conflict of a fullstack dev\",\"publisher\":{\"@id\":\"https:\/\/kbyte.snowpenguin.org\/blog\/#\/schema\/person\/f3113c5247622ffcdd4e830ed842a7e4\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kbyte.snowpenguin.org\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/kbyte.snowpenguin.org\/blog\/#\/schema\/person\/f3113c5247622ffcdd4e830ed842a7e4\",\"name\":\"Kbyte\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kbyte.snowpenguin.org\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7e0ebb5f55788dd3f5e14739d348876a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7e0ebb5f55788dd3f5e14739d348876a?s=96&d=mm&r=g\",\"caption\":\"Kbyte\"},\"logo\":{\"@id\":\"https:\/\/kbyte.snowpenguin.org\/blog\/#\/schema\/person\/image\/\"},\"url\":\"https:\/\/kbyte.snowpenguin.org\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular2: single service for multiple apps - Kbyte@Snowpenguin","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kbyte.snowpenguin.org\/blog\/en\/2015\/10\/29\/itangular2-condividere-un-servizio-tra-piu-appsenangular2-single-service-for-multiple-apps\/","og_locale":"it_IT","og_type":"article","og_title":"Angular2: single service for multiple apps - Kbyte@Snowpenguin","og_description":"Angular2 is great for SPA (Single Page Application), but sometime you need to use multiple apps in a page because you just want to add some Angular &#8220;widgets&#8221; apps. If you want to use shared data, you can use a service class, but the dependency injection in this case is not easy as it looks.","og_url":"https:\/\/kbyte.snowpenguin.org\/blog\/en\/2015\/10\/29\/itangular2-condividere-un-servizio-tra-piu-appsenangular2-single-service-for-multiple-apps\/","og_site_name":"Kbyte@Snowpenguin","article_published_time":"2015-10-28T23:29:02+00:00","article_modified_time":"2020-09-26T22:36:43+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/kbyte.snowpenguin.org\/blog\/wp-content\/uploads\/2014\/11\/snowpenguin-blogo.png","type":"image\/png"}],"author":"Kbyte","twitter_card":"summary_large_image","twitter_creator":"@kbytesys","twitter_site":"@kbytesys","twitter_misc":{"Scritto da":"Kbyte","Tempo di lettura stimato":"2 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kbyte.snowpenguin.org\/blog\/en\/2015\/10\/29\/itangular2-condividere-un-servizio-tra-piu-appsenangular2-single-service-for-multiple-apps\/#article","isPartOf":{"@id":"https:\/\/kbyte.snowpenguin.org\/blog\/en\/2015\/10\/29\/itangular2-condividere-un-servizio-tra-piu-appsenangular2-single-service-for-multiple-apps\/"},"author":{"name":"Kbyte","@id":"https:\/\/kbyte.snowpenguin.org\/blog\/#\/schema\/person\/f3113c5247622ffcdd4e830ed842a7e4"},"headline":"Angular2: single service for multiple apps","datePublished":"2015-10-28T23:29:02+00:00","dateModified":"2020-09-26T22:36:43+00:00","mainEntityOfPage":{"@id":"https:\/\/kbyte.snowpenguin.org\/blog\/en\/2015\/10\/29\/itangular2-condividere-un-servizio-tra-piu-appsenangular2-single-service-for-multiple-apps\/"},"wordCount":323,"commentCount":0,"publisher":{"@id":"https:\/\/kbyte.snowpenguin.org\/blog\/#\/schema\/person\/f3113c5247622ffcdd4e830ed842a7e4"},"keywords":["angular","angular2","typescript"],"articleSection":["Articles"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kbyte.snowpenguin.org\/blog\/en\/2015\/10\/29\/itangular2-condividere-un-servizio-tra-piu-appsenangular2-single-service-for-multiple-apps\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kbyte.snowpenguin.org\/blog\/en\/2015\/10\/29\/itangular2-condividere-un-servizio-tra-piu-appsenangular2-single-service-for-multiple-apps\/","url":"https:\/\/kbyte.snowpenguin.org\/blog\/en\/2015\/10\/29\/itangular2-condividere-un-servizio-tra-piu-appsenangular2-single-service-for-multiple-apps\/","name":"Angular2: single service for multiple apps - Kbyte@Snowpenguin","isPartOf":{"@id":"https:\/\/kbyte.snowpenguin.org\/blog\/#website"},"datePublished":"2015-10-28T23:29:02+00:00","dateModified":"2020-09-26T22:36:43+00:00","breadcrumb":{"@id":"https:\/\/kbyte.snowpenguin.org\/blog\/en\/2015\/10\/29\/itangular2-condividere-un-servizio-tra-piu-appsenangular2-single-service-for-multiple-apps\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kbyte.snowpenguin.org\/blog\/en\/2015\/10\/29\/itangular2-condividere-un-servizio-tra-piu-appsenangular2-single-service-for-multiple-apps\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kbyte.snowpenguin.org\/blog\/en\/2015\/10\/29\/itangular2-condividere-un-servizio-tra-piu-appsenangular2-single-service-for-multiple-apps\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kbyte.snowpenguin.org\/blog\/"},{"@type":"ListItem","position":2,"name":"Angular2: single service for multiple apps"}]},{"@type":"WebSite","@id":"https:\/\/kbyte.snowpenguin.org\/blog\/#website","url":"https:\/\/kbyte.snowpenguin.org\/blog\/","name":"Kbyte@Snowpenguin","description":"The inner conflict of a fullstack dev","publisher":{"@id":"https:\/\/kbyte.snowpenguin.org\/blog\/#\/schema\/person\/f3113c5247622ffcdd4e830ed842a7e4"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kbyte.snowpenguin.org\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":["Person","Organization"],"@id":"https:\/\/kbyte.snowpenguin.org\/blog\/#\/schema\/person\/f3113c5247622ffcdd4e830ed842a7e4","name":"Kbyte","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kbyte.snowpenguin.org\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7e0ebb5f55788dd3f5e14739d348876a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7e0ebb5f55788dd3f5e14739d348876a?s=96&d=mm&r=g","caption":"Kbyte"},"logo":{"@id":"https:\/\/kbyte.snowpenguin.org\/blog\/#\/schema\/person\/image\/"},"url":"https:\/\/kbyte.snowpenguin.org\/blog\/author\/admin\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/kbyte.snowpenguin.org\/blog\/wp-json\/wp\/v2\/posts\/853"}],"collection":[{"href":"https:\/\/kbyte.snowpenguin.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kbyte.snowpenguin.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kbyte.snowpenguin.org\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kbyte.snowpenguin.org\/blog\/wp-json\/wp\/v2\/comments?post=853"}],"version-history":[{"count":3,"href":"https:\/\/kbyte.snowpenguin.org\/blog\/wp-json\/wp\/v2\/posts\/853\/revisions"}],"predecessor-version":[{"id":857,"href":"https:\/\/kbyte.snowpenguin.org\/blog\/wp-json\/wp\/v2\/posts\/853\/revisions\/857"}],"wp:attachment":[{"href":"https:\/\/kbyte.snowpenguin.org\/blog\/wp-json\/wp\/v2\/media?parent=853"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kbyte.snowpenguin.org\/blog\/wp-json\/wp\/v2\/categories?post=853"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kbyte.snowpenguin.org\/blog\/wp-json\/wp\/v2\/tags?post=853"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}