https://github.com/mobxjs/mobx-angularjs

MobX connector to AngularJS
https://github.com/mobxjs/mobx-angularjs

angularjs mobx mobx-connector ng-mobx

Last synced: about 2 months ago
JSON representation

MobX connector to AngularJS

• Host: GitHub
• URL: https://github.com/mobxjs/mobx-angularjs
• Owner: mobxjs
• License: mit
• Created: 2016-11-21T16:06:09.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2020-05-10T23:40:05.000Z (over 4 years ago)
• Last Synced: 2024-05-20T07:03:52.383Z (4 months ago)
• Topics: angularjs, mobx, mobx-connector, ng-mobx
• Language: TypeScript
• Homepage:
• Size: 309 KB
• Stars: 51
• Watchers: 8
• Forks: 3
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# mobx-angularjs

[![npm version](https://img.shields.io/npm/v/mobx-angularjs.svg?style=flat-square)](https://www.npmjs.com/package/mobx-angularjs)

[![coverage](https://img.shields.io/codecov/c/github/mobxjs/mobx-angularjs.svg?style=flat-square)](https://codecov.io/gh/mobxjs/mobx-angularjs)

[![npm downloads](https://img.shields.io/npm/dw/mobx-angularjs.svg?style=flat-square)](https://www.npmjs.com/package/mobx-angularjs)

[![Build Status](https://img.shields.io/travis/mobxjs/mobx-angularjs.svg?style=flat-square)](https://travis-ci.org/mobxjs/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](https://github.com/mobxjs/mobx-angular).

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

```

```js

import mobxAngular from 'mobx-angularjs'

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

```

### or

Use CDN and include:

```html

```

```js

angular.module('app', [ 'mobx-angularjs' ])

```

## Usage

```js

import { store } from './store'

angular.component('myComponent', {

  controller() {

    this.store = store

  },

  controllerAs: '$ctrl',

  template: `

    


      {{ $ctrl.store.value }} - {{ $ctrl.store.computedValue }}

      Action

    

  `

})

```


**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](https://parceljs.org/) which requires Node 8+