Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

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

Angular connector for spawn-x
https://github.com/atellmer/angular-spawn-x

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

Last synced: 4 days ago
JSON representation

Angular connector for spawn-x

Awesome Lists containing this project

README 

        
# angular-spawn-x

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



## install

With npm:

```

npm install angular-spawn-x --save

```

With yarn:

```

yarn add angular-spawn-x

```



## Usage



#### index.html

```html



  

  App

  

  



  Loading...



```

#### main.ts

```javascript

import { enableProdMode } from '@angular/core';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';



import { AppModule } from './app/app.module';

import { environment } from './environments/environment';



if (environment.production) {

  enableProdMode();

}



platformBrowserDynamic().bootstrapModule(AppModule);

```



### Add the ngSpawnModule in dependencies

#### app/app.module.ts

```javascript

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { HttpModule } from '@angular/http';

import { NgSpawnModule } from 'angular-spawn-x';



import { configureStore } from './store';

import { AppComponent } from './app.component';

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

import { UserActions } from './actions/user';



@NgModule({

  declarations: [

    AppComponent,

    PresenterComponent

  ],

  imports: [

    BrowserModule,

    FormsModule,

    HttpModule,

    NgSpawnModule.forRoot(configureStore)

  ],

  providers: [UserActions],

  bootstrap: [AppComponent]

})

export class AppModule { }

```

### Configure store with standarts functions createStore and addInterceptor

#### app/store/index.ts

```javascript

import { createStore, addInterceptor } from 'angular-spawn-x';



const initialState = {

  users: [],

  some: {

    text: 'Hello World'

  },

  parent: {

    child: 'I am child'

  }

};



function logger(store) {

  return next => action => {

    next(action);

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

  }

}



export function configureStore() {

  return createStore(initialState, addInterceptor(logger));

}

```



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

#### app/actions/user.ts

```javascript

import { Injectable } from '@angular/core';

import { NgSpawn } from 'angular-spawn-x';



@Injectable()

export class UserActions {

  constructor(private ngSpawn: NgSpawn) {}



  addUser = user => {

    this.ngSpawn.update('users', {

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

      type: 'ADD_NEW_USER'

    });

  }

}

```

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

#### app/app.component.ts

```javascript

import {

  Component,

  OnInit,

  OnDestroy,

  ChangeDetectionStrategy

} from '@angular/core';

import { NgSpawn } from 'angular-spawn-x';

import { UserActions } from '../actions/user';



@Component({

  selector: 'app-root',

  changeDetection: ChangeDetectionStrategy.OnPush,

  template: `

    

    

  `

})

export class AppComponent implements OnInit, OnDestroy {



  constructor(

    private ngSpawn: NgSpawn,

    private userActions: UserActions

  ){}



  ngOnInit() {

    //selection from store

    const selection = {

      users: 'users',

      text: 'some.text',

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

    };

    //connect to store

    this.ngSpawn.connect(selection)(this);

  }



  ngOnDestroy() {

    //disconnect from store

    this.ngSpawn.disconnect(this);

  }



  addUserHandler(user) {

    this.userActions.addUser(user);

  }

}

```



#### app/components/presenter.component.ts

```javascript

import {

  Component,

  OnInit,

  Input,

  Output,

  EventEmitter,

  ChangeDetectionStrategy

 } from '@angular/core';



@Component({

  selector: 'app-presenter',

  changeDetection: ChangeDetectionStrategy.OnPush,

  template: `

    


      
User List


      
    

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

          


      

        

        

        Add New User

      

    


  `

})

export class PresenterComponent implements OnInit {

  @Input() users: any;

  @Input() text: string;

  @Input() data: string;

  @Output() addUser = new EventEmitter();



  constructor() {}



  ngOnInit() {}



   handleSubmit = ev => {

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

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



    this.addUser.emit({

      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)