{"id":27279129,"url":"https://github.com/coolshare/coolshareangularpubsub","last_synced_at":"2026-05-17T17:39:09.222Z","repository":{"id":57207124,"uuid":"86949863","full_name":"coolshare/CoolshareAngularPubSub","owner":"coolshare","description":"A package/service to provide publish/subscribe pattern for communication in Angular","archived":false,"fork":false,"pushed_at":"2017-06-24T08:02:02.000Z","size":75,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-20T00:22:16.000Z","etag":null,"topics":["angular","communications","coolshare","design-pattern","design-patterns","patterns","publish-subscribe","pubsub"],"latest_commit_sha":null,"homepage":"http://markqian.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coolshare.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-01T23:44:24.000Z","updated_at":"2017-06-20T23:58:09.000Z","dependencies_parsed_at":"2022-09-08T14:22:37.558Z","dependency_job_id":null,"html_url":"https://github.com/coolshare/CoolshareAngularPubSub","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/coolshare/CoolshareAngularPubSub","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coolshare%2FCoolshareAngularPubSub","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coolshare%2FCoolshareAngularPubSub/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coolshare%2FCoolshareAngularPubSub/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coolshare%2FCoolshareAngularPubSub/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coolshare","download_url":"https://codeload.github.com/coolshare/CoolshareAngularPubSub/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coolshare%2FCoolshareAngularPubSub/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267561857,"owners_count":24107744,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","communications","coolshare","design-pattern","design-patterns","patterns","publish-subscribe","pubsub"],"created_at":"2025-04-11T17:47:56.515Z","updated_at":"2026-05-17T17:39:09.187Z","avatar_url":"https://github.com/coolshare.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Coolshare Pub/Sub for Angular\r\n===========================\r\n\r\nBy Mark Qian 3/2017 (markqian@hotmail.com)\r\n\r\nThe demo page: http://angularpubsub.coolshare.surge.sh\r\n\r\nDescription:\r\n\r\n\tCommon ways to communicate between modules of your application using core Angular functionality include:\r\n\r\n    - Using services\r\n    - A module can be injected into another module\r\n    - Using events\r\n    - By assigning models on $rootScope\r\n    - Directly between controllers, using $parent, $$childHead, $$nextSibling, etc.\r\n    - Directly between controllers, using ControllerAs, or other forms of inheritance\r\n    - More...\r\n    \r\n    There are three categories: \r\n    \t- global (such as rootScope) or relative (like parent)\r\n    \t- events\r\n    \t- DI\r\n    \t\r\n    The problem with first two categories is that you have to hard code the reference of parties. This is really bad \r\n    as things changing during development and it is hard to be tested.\r\n    \r\n    To target the problem, Angular provides a powerful mean, DI, to isolate service producers and consumers. \r\n    Even though DI provides some degree of isolation, it uses references(the machine addresses) to represent dependencies,\r\n    which reduces a lot of potential on flexibility. \r\n    \r\n    My point is that to achieve the better flexibility, the application level logic including module relation such as dependencies \r\n    between modules should not reside in codes. They are the \"spirit\" of the application just like human being mind should be \r\n    isolated/extracted from the body (codes of modules). DI in Angular can not achieve this since all the logic is represented by \treferences.  \r\n    \r\n    An ideal flexible application should be built into two parts: a container with all the modules \r\n    in your layout and the logic that make the modules work together. It will be perfect if the logic can be\r\n    extracted out of codes (container) and loaded as needed (at runtime!).\r\n    \t  \r\n    My \"different approach\" is point-to-point publish/subscribe with dependency out of codes as plain text. \r\n    \r\n    You may say, wait a minute: Angular has built-in environment for publish/subscribe - the emit and broadcast. \r\n    If you don't use broadcast heavily, it might be OK. It will become a performance issue if you have a huge scope \r\n    hierarchy and use publish/subscribe as your major mean for communication between modules or any DOM components. \r\n    The broadcasting is really overkill for most cases. Instead, straight point to point invocation is enough for many of us.\r\n\r\nThe key features:\r\n\r\n - You can publish topics from both javascript components and HTML templates\r\n - You can specify any event to trigger the publishing\r\n - Macro Key Words allow you to publish with data you specified.\r\n \r\n\r\nInstructions to use:\r\n\r\n A). publish a topic in two ways:\r\n    \r\n\t0).install this package:\r\n\t\r\n\t\tnpm install coolshare_angular_pubsub --save\r\n    \r\n \t1). publish from javascript (components). To publish a topic in javascript, \r\n \t    you need to do the following:\r\n \t    \r\n \t    //Import\r\n \t    import {pm} from './PubSubManager/PubSubManager'\r\n \t    \r\n \t    pm.publish(\"/MyTopic1\", {\"data\":{\"name\":\"John\"}});\r\n \t    \r\n \t    \r\n \t    where the second parameter of the \"publish\" method is \"options\" which contains the \r\n \t    data you like to pass with the topic.\r\n \t    \r\n \t2). publish from HTML (templates). To publish a topic in HTML, \r\n \t    you need to do the following:\r\n \t    \r\n \t    //declare the \"Publisher\" in ngModel\r\n \t    import { Publisher }  from './PubSubManager/Publisher';\r\n\r\n\t\t@NgModule({\r\n\t\t  imports:      [ BrowserModule ],\r\n\t\t  declarations: [ Publisher],\r\n\t\t  bootstrap:    [ AppComponent ]\r\n\t\t})\r\n\t\r\n\t\t//in your template\t\r\n\t\t\u003cbutton publisher=\"{'topic':'/RightPane/Botton/dh', 'options':{'dh':10}}\"\u003eButton1\u003c/button\u003e\r\n\t\t\u003ca publisher=\"{'topic':'/InsidePane/Link/fg','event':'mouseover'}\"\u003eLink1\u003c/a\u003e\r\n      \r\n      where the attribute \"options\", optional, contains the data you want to pass with the topic.\r\n      The content contained by \"options\" needs to be in a JSON format which will be evaluated into a javascript object.\r\n      \r\n      The \"event\" attribute is optional and the default is \"click\".\r\n\r\n      Macro Key Words:\r\n      ***************\r\n      \r\n        1). ___VALUE___ - this key word pointing to the value of the contained element. For example\r\n           \r\n\t           \u003cselect publisher=\"{'topic':'/RightPane/Dropdown/bg', 'options':{'bgColor':'___VALUE___'}}\"\u003e\r\n\t            \t\u003coption value=\"#ff0000\"\u003eRed\u003c/option\u003e\r\n\t            \t\u003coption value=\"#00ff00\"\u003eGreen\u003c/option\u003e\r\n\t            \t\u003coption value=\"#0000ff\"\u003eBlue\u003c/option\u003e\r\n            \t\u003c/select\u003e\r\n\t           \r\n\t          The example above indicate the \"bgColor\" in the options will be set to the value of select when a change\r\n\t          event occurs.        \r\n               \r\n  B). subscribe/unsubscribe a topic\r\n  \r\n    To subscribe a topic, you need to do the following:\r\n \t    \r\n \t    //Import\r\n \t    import {pm} from './PubSubManager/PubSubManager';\r\n \t    \r\n \t    //In constructor\r\n \t   \tvar topic = \"/LeftPane/Botton/bg\";\r\n \t   \t\r\n \t   \t//subscribe the topic and save the id return\r\n\t    self.subscriptionMap[topic] = pm.subscribe(topic, function(options:any) {\r\n\t    \tpm.log(\"LeftPane received topic \"+topic+\" and options=\"+JSON.stringify(options));\r\n\t    \tself.bg = options.color;\r\n\t    });\r\n\t    \r\n\t    //...\r\n\t    \r\n\t    //unsubscribe later\r\n\t    var topic = \"/LeftPane/Botton/bg\";\r\n\t    pm.unsubscribe(topic, self.subscriptionMap[topic]);\r\n\t    \r\n  \r\n  C). To run the sample code, you need to \r\n\r\n\t\t0). Prepare required environment\r\n\t\t\r\n\t\t    you need to install node.js\r\n\t\t    and git\r\n\t\t    \r\n\t\t  \r\n\t\t1). Download it by\r\n\t\t\r\n\t\t    git clone https://github.com/coolshare/CoolshareAngularPubSub.git CoolshareAngularPubSub\r\n\t\t    \r\n\t\t    then \r\n\t\t    \r\n\t\t    cd CoolshareAngularPubSub\r\n\t\t    \r\n\t\t2). Do installation\r\n\t\t         \r\n\t\t\tnpm install\r\n\t\t       \r\n\t\t       \r\n\t\t3). Start the server and browser by\r\n\t\t\r\n\t\t    npm start\r\n\t\t         \r\n\t\t\r\n\t\t    Then point your browser to http://localhost:8080\r\n\t\t    \r\n\t\tClick each component on the page and the result will be shown in the console.\r\n\t\t\r\n\t\tHave fun!\r\n\r\n  D). To install it into your React application, you need to \r\n  \r\n     1). npm install coolshare_angular_pubsub --save\r\n     \r\n     2). Follow the instructions in A). B). above to use it in your application.\r\n     \r\n         Note: instead of \r\n         \r\n             import {pm} from './PubSubManager/PubSubManager';\r\n             import { Publisher }  from './PubSubManager/Publisher';\r\n             \r\n         you need to \r\n         \r\n             import {pm} from 'PubSubManager/PubSubManager';\r\n             import { Publisher }  from 'PubSubManager/Publisher';\r\n     \r\n     \r\nGo Mark's home page http://MarkQian.com to see more.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoolshare%2Fcoolshareangularpubsub","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoolshare%2Fcoolshareangularpubsub","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoolshare%2Fcoolshareangularpubsub/lists"}