Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/atellmer/angularjs-spawn-x

AngularJS connector for spawn-x
https://github.com/atellmer/angularjs-spawn-x

angular angularjs flux javascript javascript-library mobx observer reactive redux rxjs state store zone

Last synced: 4 days ago
JSON representation

AngularJS connector for spawn-x

Awesome Lists containing this project

README 

        
# angularjs-spawn-x

### AngularJS connector for [spawn-x](https://github.com/atellmer/spawn-x).



## install

With npm:

```

npm install angularjs-spawn-x --save

```

With yarn:

```

yarn add angularjs-spawn-x

```

With bower:

```

bower install angularjs-spawn-x --save

```

```html



```



## Usage



#### index.html

```html



  

  

  App



  



  



```



### Add the ngSpawnModule in dependencies

#### app/index.js

```javascript

import '../index.html';

import angular from 'angular';

import ngSpawnModule from 'angularjs-spawn-x';



import configureStore from './store';



import AppComponent from './containers/app.component';

import PresenterComponent from './components/presenter.component';

import userActionsModule from './actions/user';



angular.module('appModule', [

    ngSpawnModule,

    AppComponent,

    PresenterComponent,

    userActionsModule

  ])

  .config(configureStore)

  .name;



angular.element(() => {

  angular.bootstrap(document, ['appModule']);

});

```

### Configure store with ngSpawnProvider wich has standarts functions createStore and addInterceptor

#### app/store/index.js

```javascript

configureStore.$inject = ['ngSpawnProvider'];



export default function configureStore(ngSpawnProvider) {

  const initialState = {

    users: [],

    some: {

      text: 'Hello World'

    },

    parent: {

      child: 'I am child'

    }

  };



  ngSpawnProvider.createStore(

    initialState,

    ngSpawnProvider.addInterceptor(logger)

  );



  function logger(store) {

    return next => action => {

      next(action);

      console.log('action: ', action.type + ' -> ', action.data);

    }

  }

}

```



### Inject ngSpawn into your app, and use select, detect, reject and update methods

#### app/actions/user.js

```javascript

import angular from 'angular';



export default angular

  .module('userActionsModule', [])

  .factory('userActions', factory)

  .name;



factory.$inject = ['ngSpawn'];



function factory(ngSpawn) {

  const addUser = user => {

    ngSpawn.update('users', {

      data: ngSpawn.select('users').concat(user),

      type: 'ADD_NEW_USER'

    });

  };



  return {

    addUser

  }

}

```

### For subscribe or unsubscribe on data use connect and disconnect methods like below

#### app/containers/app.component.js

```javascript

import angular from 'angular';



export default angular

  .module('AppComponent', [])

  .component('appRoot', {

    controller: ['ngSpawn', 'userActions', AppComponent],

    template: `

      

      

    `,

  })

  .name;



function AppComponent(ngSpawn, userActions) {



  //selection from store

  const selection = {

    users: 'users',

    text: 'some.text',

    data: ['parent.child', state => state.parent.child]

  };



  this.$onInit = () => {

    //connect to store

    ngSpawn.connect(selection)(this);

  }



  this.$onDestroy = () => {

    //disconnect from store

    ngSpawn.disconnect(this);

  }



  this.addUser = user => {

    userActions.addUser(user);

  }

}

```



#### app/components/presenter.component.js

```javascript

import angular from 'angular';



export default angular

  .module('PresenterComponent', [])

  .component('appPresenter', {

    bindings: {

      users: '<',

      text: '<',

      data: '<',

      addUser: '&',

    },

    controller: [PresenterComponent],

    template: `

      


        
User List


        
    

              
  • {{ ::user.name }} | {{ ::user.age }}
    • 

            


        

          

          

          Add New User

        

      


    `,

  })

  .name;



function PresenterComponent() {

  this.handleSubmit = ev => {



    console.log('some text from state: ', this.text);

    console.log('some data from state: ', this.data);



    this.addUser()({

      name: ev.target.name.value,

      age: ev.target.age.value

    });



    ev.target.name.value = '';

    ev.target.age.value = '';

  }

}

```



## LICENSE



MIT © [Alex Plex](https://github.com/atellmer)