abl-sdk-feathers

abl-sdk-feathers

1. About
2. Usage
   • AngularJS
   • React
   • Services
   • Querying
   • Utilities
3. Developing

About

ABL's client-side API middleware based on the Feathers.js client. The following modules are included:

• feathers-client as $abl global
• feathers-hooks
• feathers-rest
• feathers-socketio
• feathers-reactive returns all service methods as RxJS observables that automatically update on real-time events.

Usage

Reference the minified scripts in index.html:

<script src="node_modules/abl-sdk-feathers/dst/abl-sdk.vendor.min.js"></script>
<script src="node_modules/abl-sdk-feathers/dst/abl-sdk.min.js"></script>

Specify the abl-sdk-feathers module as a dependency of your AngularJS application:

var app = angular.module('abl', ['abl-sdk-feathers']);

Configure the $ablProvider service

app.config(function($ablProvider) {
    // Set the API endpoint for all requests
    $ablProvider.setEndpoint('https://api.ablist.win');
    //Set the API key to be added to REST headers for all outgoing requests
    $ablProvider.setApiKey('sk3$dlkj3Dljk3');
    // Use sockets with REST fallback
    $ablProvider.useSocket(false);
    // You can optionally provide additional opts for socket.io-client
    $ablProvider.setServices(['properties','units']);
});

AngularJS

Inject the $abl service into any controller, service or directive where you need it:

app.controller('SampleController', ["$scope", "$abl", function($scope, $abl) {
  // As a Promise
  var activities = $abl.services.activities.find({})
                    .then(function(res) { 
                      console.log(res);}
                    ); 
  // As an Observable
  var activities = $abl.services.activities.find({})
                    .subscribe(function(res) { 
                      console.log(res);}
                    )); 
}]);

React

The abl-sdk-feathers instance is accessible via the global variable $abl so usage is exactly the same:

function findActivities(query) {  
  // As a Promise
  $abl.services.activities.find(query)
    .then(function(res) { 
        return res;
      }
  ); 
  // As an Observable
  $abl.services.activities.find(query)
    .subscribe(function(res) { 
        return res;
      }
  )); 
}

Services

Services are the heart of every Feathers application and JavaScript objects (or instances of ES6 classes) that implements certain methods. Feathers itself will also add some additional methods and functionality to its services.

See the Feathers.js services documentation for more detail.

Service methods

Service methods are pre-defined CRUD methods that your service object can implement. Below is a complete example of the Feathers service interface:

const myService = {
  find(params) {},
  get(id, params) {},
  create(data, params) {},
  update(id, data, params) {},
  patch(id, data, params) {},
  remove(id, params) {},
  setup(app, path) {}
}

$abl.use('/my-service', myService);

Or as an ES6 class:

'use strict';

class MyService {
  find(params) {}
  get(id, params) {}
  create(data, params) {}
  update(id, data, params) {}
  patch(id, data, params) {}
  remove(id, params) {}
  setup(app, path) {}
}

$abl.use('/my-service', new MyService());

Querying

See the Feathers.js querying documentation for more detail.

// Find all unread messages in room #2
$abl.service('messages').find({
  query: {
    read: false,
    roomId: 2
  }
});

GET /messages?read=false&roomId=2

Utilities

$abl.showToast(message, cssClass, duration)

Launch an Angular Material toast with an optional CSS class and display duration:

$abl.showToast('Something OK happened. Nothing to see here!');

$abl.showToast('Error! You have been bad!', 'errorToast', 5000);

Developing

To work with the code, just run:

npm install && gulp

Build

gulp build