You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →

Book a Demo Install Sign in

angularjs-spawn-x

Package Overview

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

angularjs-spawn-x

AngularJS connector for spawn-x. (Reactive management for javaScript applications)

1.0.5

latest

Source

npm

Version published: 8 years ago

Maintainers: 1

Created: 8 years ago

Source

angularjs-spawn-x

AngularJS connector for 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

<script src="path/to/angularjs-spawn-x/lib/angularjs-spawn-x.umd.min.js"></script>

Usage

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>App</title>
</head>
<body>
  <app-root></app-root>

  <script src="/dist/app.bundle.js"></script>
</body>
</html>

Add the ngSpawnModule in dependencies

app/index.js

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

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

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
  }
}

app/containers/app.component.js

import angular from 'angular';


export default angular
  .module('AppComponent', [])
  .component('appRoot', {
    controller: ['ngSpawn', 'userActions', AppComponent],
    template: `
      <app-presenter
        users="$ctrl.users"
        text="$ctrl.text"
        data="$ctrl.data"
        add-user="$ctrl.addUser">
      </app-presenter>
    `,
  })
  .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

import angular from 'angular';


export default angular
  .module('PresenterComponent', [])
  .component('appPresenter', {
    bindings: {
      users: '<',
      text: '<',
      data: '<',
      addUser: '&',
    },
    controller: [PresenterComponent],
    template: `
      <div>
        <h1>User List</h1>
        <ul>
          <li ng-repeat="user in $ctrl.users">{{ ::user.name }} | {{ ::user.age }}</li>
        </ul>
        <form ng-submit="$ctrl.handleSubmit($event)">
          <input type="text" name="name"/>
          <input type="number" name="age"/>
          <button type="submit">Add New User</button>
        </form>
      </div>
    `,
  })
  .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

Keywords

FAQs

What is angularjs-spawn-x?

Is angularjs-spawn-x well maintained?

Package last updated on 15 Mar 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

angularjs-spawn-x

angularjs-spawn-x

install

Usage

index.html

Add the ngSpawnModule in dependencies

app/index.js

Configure store with ngSpawnProvider wich has standarts functions createStore and addInterceptor

app/store/index.js

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

app/actions/user.js

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

app/containers/app.component.js

app/components/presenter.component.js

LICENSE

Keywords

Related posts

Tracking Protestware Spread: 28 npm Packages Affected by Payload Targeting Russian-Language Users

Contagious Interview Campaign Escalates With 67 Malicious npm Packages and New Malware Loader