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)
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+