Skip to content

Latest commit

 

History

History
109 lines (74 loc) · 3.04 KB

README.md

File metadata and controls

109 lines (74 loc) · 3.04 KB
Raw

mobx-angularjs

npm version coverage npm downloads Build Status

MobX connector to AngularJS

This package is for Angular 1.x, if you're looking for the Angular 2+ version, it's here.

MobX is a modern reactive state management library.

This simple library connects MobX to Angular.

Why use MobX

The advantages of MobX are:

  • Normalized - MobX lets you define computed values that are based on the minimal state

  • Reactivity - MobX Automatically figures out when to re-invoke subscribers according to which observables they use. This allows for extremely performant applications

  • Plain objects - Use plain objects and classes with MobX decorators, or even observe existing objects (from external sources for example)

  • MobX is being used heavily in the community (mainly with React)

Read more about MobX

Why use this library

Performance and magic!

This library brings the magic of automatic data binding, together with incredibly high performance.

All you need is to wrap your template with a mobx-autorun directive. The directive will automatically re-run the $digest cycle on the scope, whenever something that the template uses changes.

It will also dispose of the autorun callback when the scope is destroyed.

Installation

Install, import, and include:

$ npm install --save mobx-angularjs

import mobxAngular from 'mobx-angularjs'

angular.module('app', [ mobxAngular ])

or

Use CDN and include:

<!-- development -->
<script src="https://unpkg.com/mobx-angularjs/mobx-angularjs.js"></script>

<!-- production -->
<script src="https://unpkg.com/mobx-angularjs/mobx-angularjs.min.js"></script>
angular.module('app', [ 'mobx-angularjs' ])

Usage

import { store } from './store'

angular.component('myComponent', {
  controller() {
    this.store = store
  },
  controllerAs: '$ctrl',
  template: `
    <div mobx-autorun>
      {{ $ctrl.store.value }} - {{ $ctrl.store.computedValue }}
      <button ng-click="$ctrl.store.action()">Action</button>
    </div>
  `
})

Important note: Make sure you always mark your isolated scope block (such as ng-if) with the mobx-autorun directive so that MobX can react to it.

Example

Clone this repository:

$ git clone https://github.com/mobxjs/mobx-angularjs
$ cd mobx-angularjs

Install dependencies:

$ npm install

Start example server:

$ npm run example

Note: Example uses Parcel which requires Node 8+