Awesome

mobx-angularjs

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)

<a href="http://mobxjs.github.io/mobx" target="_blank">Read more about MobX</a>

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+