https://github.com/ranndev/angularjs-store
A tool to easily manage state in your AngularJS Application.
https://github.com/ranndev/angularjs-store
angular1 angularjs angularjs-store state-management state-manager store
Last synced: 4 months ago
JSON representation
A tool to easily manage state in your AngularJS Application.
- Host: GitHub
- URL: https://github.com/ranndev/angularjs-store
- Owner: ranndev
- License: mit
- Archived: true
- Created: 2018-11-27T05:34:59.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2020-09-01T13:38:55.000Z (over 5 years ago)
- Last Synced: 2025-01-09T15:05:19.161Z (about 1 year ago)
- Topics: angular1, angularjs, angularjs-store, state-management, state-manager, store
- Language: TypeScript
- Homepage: https://angularjs-store.gitbook.io
- Size: 1.08 MB
- Stars: 10
- Watchers: 3
- Forks: 3
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# AngularJS Store - NgStore
AngularJS 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.
[](https://github.com/ranndev/angularjs-store/actions)
[](https://codecov.io/gh/ranndev/angularjs-store)
[](https://greenkeeper.io/)
## Installation
**NPM**
```
npm install --save @ranndev/angularjs-store
```
**Yarn**
```
yarn add @ranndev/angularjs-store
```
**CDN**
```html
```
## Quick Start
This tutorial will quickly get you started for the basics of AngularJS Store.
For 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).
**Creating a store**
First, you need to import the `NgStore` class from `angularjs-store` or if you are using CDN, `NgStore` class is globally available.
```javascript
const initialState = { count: 0 };
const counterStore = new NgStore(initialState);
```
**Making the store injectable**
Wrapping the store by AngularJS service to make it injectable.
```javascript
const app = angular.module('app', []);
app.service('counterStore', function counterStore() {
const initialState = { count: 0 };
const counterStore = new NgStore(initialState);
return counterStore;
});
```
**Getting the current state**
Using the `copy` method to get a copy of state.
```javascript
const app = angular.module('app', []);
app.controller('YourController', function YourController($scope, counterStore) {
const counterState = counterStore.copy(); // { count: 0 }
$scope.count = counterState.count; // 0
});
```
**Updating the state**
Using the `dispatch` for updating the state.
```javascript
const app = angular.module('app', []);
app.controller('YourController', function YourController(counterStore) {
// counterStore.copy() = { count: 0 }
counterStore.dispatch('INCREMENT_COUNT', (currentState) => {
return { count: currentState.count + 1 };
});
// counterStore.copy() = { count: 1 }
counterStore.dispatch('DECREMENT_COUNT', (currentState) => {
return { count: currentState.count - 1 };
});
// counterStore.copy() = { count: 0 }
});
```
**Listening on state changes**
Using the `hook` method to listen on dispatched actions.
```javascript
const app = angular.module('app', []);
app.controller('YourController', function YourController($scope, counterStore) {
counterStore.hook('INCREMENT_COUNT', (counterState) => {
$scope.count = counterState.count;
});
counterStore.hook('DECREMENT_COUNT', (counterState) => {
$scope.count = counterState.count;
});
});
```
**Stop listening on dispatched actions**
```javascript
const app = angular.module('app', []);
app.controller('YourController', function YourController($scope, counterStore) {
const hookLink = counterStore.hook('INCREMENT_COUNT', (state) => {
$scope.count = state.count;
// Destory the HookLink when count reaches 10.
// After the HookLink gets destroyed, the hook will no longer receive any dispatched actions.
if ($scope.count === 10) {
hookLink.destroy();
}
});
});
```
## Documentation
- Official Documentation - https://angularjs-store.gitbook.io/docs
## Demo
- Sample App - https://angularjs-store-demo.netlify.com
- Source Code - https://github.com/ranndev/angularjs-store-demo
## Contributing
AngularJS 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).
## Collaborators
- [Rannie Peralta](https://github.com/ranndev)
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details