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.
NPM
npm install --save @ranndev/angularjs-store
Yarn
yarn add @ranndev/angularjs-store
CDN
<!-- For development -->
<script src="https://cdn.jsdelivr.net/npm/@ranndev/[email protected]/dist/umd/angularjs-store.js"></script>
<!-- For production -->
<script src="https://cdn.jsdelivr.net/npm/@ranndev/[email protected]/dist/umd/angularjs-store.min.js"></script>This tutorial will quickly get you started for the basics of AngularJS Store. For more advanced tutorials, check out the Tutorials with Javascript or Tutorials with Typescript from the official documentation.
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.
const initialState = { count: 0 };
const counterStore = new NgStore(initialState);Making the store injectable
Wrapping the store by AngularJS service to make it injectable.
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.
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.
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.
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
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();
}
});
});- Official Documentation - https://angularjs-store.gitbook.io/docs
- Sample App - https://angularjs-store-demo.netlify.com
- Source Code - https://github.com/ranndev/angularjs-store-demo
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.
This project is licensed under the MIT License - see the LICENSE file for details