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.

Installation

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>

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 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();
    }
  });
});

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.

Collaborators

• Rannie Peralta

License

This project is licensed under the MIT License - see the LICENSE file for details