{"id":15184689,"url":"https://github.com/ranndev/angularjs-store","last_synced_at":"2025-10-01T23:30:51.640Z","repository":{"id":143781094,"uuid":"159281411","full_name":"ranndev/angularjs-store","owner":"ranndev","description":"A tool to easily manage state in your AngularJS Application.","archived":true,"fork":false,"pushed_at":"2020-09-01T13:38:55.000Z","size":1133,"stargazers_count":10,"open_issues_count":18,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-09T15:05:19.161Z","etag":null,"topics":["angular1","angularjs","angularjs-store","state-management","state-manager","store"],"latest_commit_sha":null,"homepage":"https://angularjs-store.gitbook.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ranndev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-27T05:34:59.000Z","updated_at":"2024-03-14T17:39:34.000Z","dependencies_parsed_at":"2023-06-08T12:45:17.351Z","dependency_job_id":null,"html_url":"https://github.com/ranndev/angularjs-store","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ranndev%2Fangularjs-store","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ranndev%2Fangularjs-store/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ranndev%2Fangularjs-store/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ranndev%2Fangularjs-store/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ranndev","download_url":"https://codeload.github.com/ranndev/angularjs-store/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234779855,"owners_count":18885268,"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","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":["angular1","angularjs","angularjs-store","state-management","state-manager","store"],"created_at":"2024-09-27T17:22:02.382Z","updated_at":"2025-10-01T23:30:51.303Z","avatar_url":"https://github.com/ranndev.png","language":"TypeScript","readme":"# AngularJS Store - NgStore\n\n![AngularJS Store with AngularJS](./images/favicon-with-angularjs.png)\n\nAngularJS Store will guide you to create a one-way data flow in your application (Single Source of Truth). Manage your AngularJS application's state into a very predictable way.\n\n[![Build Status](https://github.com/ranndev/angularjs-store/workflows/build/badge.svg?branch=master)](https://github.com/ranndev/angularjs-store/actions)\n[![codecov](https://codecov.io/gh/ranndev/angularjs-store/branch/develop/graph/badge.svg)](https://codecov.io/gh/ranndev/angularjs-store)\n[![Greenkeeper badge](https://badges.greenkeeper.io/ranndev/angularjs-store.svg)](https://greenkeeper.io/)\n\n## Installation\n\n**NPM**\n\n```\nnpm install --save @ranndev/angularjs-store\n```\n\n**Yarn**\n\n```\nyarn add @ranndev/angularjs-store\n```\n\n**CDN**\n\n```html\n\u003c!-- For development --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@ranndev/angularjs-store@4.0.2/dist/umd/angularjs-store.js\"\u003e\u003c/script\u003e\n\n\u003c!-- For production --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@ranndev/angularjs-store@4.0.2/dist/umd/angularjs-store.min.js\"\u003e\u003c/script\u003e\n```\n\n## Quick Start\n\nThis tutorial will quickly get you started for the basics of AngularJS Store.\nFor more advanced tutorials, check out the [Tutorials with Javascript](https://angularjs-store.gitbook.io/docs/tutorials-with-javascript) or [Tutorials with Typescript](https://angularjs-store.gitbook.io/docs/tutorials-with-typescript) from the [official documentation](https://angularjs-store.gitbook.io/docs).\n\n**Creating a store**\n\nFirst, you need to import the `NgStore` class from `angularjs-store` or if you are using CDN, `NgStore` class is globally available.\n\n```javascript\nconst initialState = { count: 0 };\nconst counterStore = new NgStore(initialState);\n```\n\n**Making the store injectable**\n\nWrapping the store by AngularJS service to make it injectable.\n\n```javascript\nconst app = angular.module('app', []);\n\napp.service('counterStore', function counterStore() {\n  const initialState = { count: 0 };\n  const counterStore = new NgStore(initialState);\n\n  return counterStore;\n});\n```\n\n**Getting the current state**\n\nUsing the `copy` method to get a copy of state.\n\n```javascript\nconst app = angular.module('app', []);\n\napp.controller('YourController', function YourController($scope, counterStore) {\n  const counterState = counterStore.copy(); // { count: 0 }\n  $scope.count = counterState.count; // 0\n});\n```\n\n**Updating the state**\n\nUsing the `dispatch` for updating the state.\n\n```javascript\nconst app = angular.module('app', []);\n\napp.controller('YourController', function YourController(counterStore) {\n  // counterStore.copy() = { count: 0 }\n\n  counterStore.dispatch('INCREMENT_COUNT', (currentState) =\u003e {\n    return { count: currentState.count + 1 };\n  });\n\n  // counterStore.copy() = { count: 1 }\n\n  counterStore.dispatch('DECREMENT_COUNT', (currentState) =\u003e {\n    return { count: currentState.count - 1 };\n  });\n\n  // counterStore.copy() = { count: 0 }\n});\n```\n\n**Listening on state changes**\n\nUsing the `hook` method to listen on dispatched actions.\n\n```javascript\nconst app = angular.module('app', []);\n\napp.controller('YourController', function YourController($scope, counterStore) {\n  counterStore.hook('INCREMENT_COUNT', (counterState) =\u003e {\n    $scope.count = counterState.count;\n  });\n\n  counterStore.hook('DECREMENT_COUNT', (counterState) =\u003e {\n    $scope.count = counterState.count;\n  });\n});\n```\n\n**Stop listening on dispatched actions**\n\n```javascript\nconst app = angular.module('app', []);\n\napp.controller('YourController', function YourController($scope, counterStore) {\n  const hookLink = counterStore.hook('INCREMENT_COUNT', (state) =\u003e {\n    $scope.count = state.count;\n\n    // Destory the HookLink when count reaches 10.\n    // After the HookLink gets destroyed, the hook will no longer receive any dispatched actions.\n    if ($scope.count === 10) {\n      hookLink.destroy();\n    }\n  });\n});\n```\n\n## Documentation\n\n- Official Documentation - https://angularjs-store.gitbook.io/docs\n\n## Demo\n\n- Sample App - https://angularjs-store-demo.netlify.com\n- Source Code - https://github.com/ranndev/angularjs-store-demo\n\n## Contributing\n\nAngularJS Store is an open source project and we love to receive contributions from our community — you! There are many ways to contribute, from writing tutorials or blog posts, improving the documentation, submitting bug reports and feature requests. See the [guidelines](CONTRIBUTING).\n\n## Collaborators\n\n- [Rannie Peralta](https://github.com/ranndev)\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Franndev%2Fangularjs-store","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Franndev%2Fangularjs-store","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Franndev%2Fangularjs-store/lists"}