2.0.4 • Published 6 years ago

angular-datalayer v2.0.4

Weekly downloads
32
License
MIT
Repository
github
Last release
6 years ago

Datalayer

Datalayer is a simple AngularJS service abstraction to consume data from a RESTful Api. The code base is very simple to change and adapt to your backend in case it is not RESTful.

Install

You can download it by:

  • Using npm and running npm install angular-datalayer --save
  • Download manually and include the <script type="text/javascript" src="./path/to/your/datalayer.min.js">

Starter guide

angular
  .module('app', ['angular-datalayer'])
  .controller('Controller', function (datalayer) {
    var User = datalayer({ model: 'users' });
  });

or

var dataLayer = require('angular-datalayer');

angular
  .module('app', [
    dataLayer
  ])
  .controller('Controller', function (datalayer) {

  });

Usage

datalayer({ url: '<string>', model: '<string>', version: '<sctring>', id_reference: '<string>' })

Configuration Json

You can in any point modify ajax calls by specifying the request attribute the desire configurations following the angularjs $http configuration json. Please check the documention before adding any change.

{
  url: '.',
  model: '',
  version: 'v1',
  id_reference: 'id',
  request: {
    query: {
      method: 'GET'
    },
    get: {
      method: 'GET'
    },
    all: {
      method: 'GET'
    },
    $save: {
      method: 'POST'
    },
    $update: {
      method: 'PUT'
    },
    delete: {
      method: 'DELETE'
    }
  }
};

Arguments

  • url: Base url point to API
    • Default: ./
    • Required: false
  • model: Represents the resource of the api
    • Default: null
    • Required: true
  • version: The version of the API
    • Default: v1
    • Required: false
  • id_reference: Which field represents the unique identifier
    • Default: id
    • Required: false

Returns <class> Resource

Returns the class Resource with the default actions attached

Resource.query(query, isArray = true, config)

Params: <object> query ex: { age: { $gt: 15 } }
Params: <boolean> isArray optional default: true
Params: <object> config optional
Returns: <array> Resource

Resource.get(option, config)

Params: <object> option ex: { id: <number> }
Params: <object> config optional
Returns: <object>|<Array> Resource

Resource.all(config)

Params: <object> config optional
Returns: <array> Resource

Resource.delete(option, config)

Params: <object> option ex: { id: <number> }
Params: <object> config optional
Returns: null

Code examples

var User = datalayer({ model: 'users' });

var john = new User();
var carlos = User.get({ id: 10 });

john.name = 'John';
john.surname = 'Howard';
john.age = '28';

carlos.age = 29;

john.$save()
.then(function (data) {
  console.log(data);
});
/**
 * Will print
 * {
 * 	id: 1,
 * 	name: 'John',
 * 	surname: 'Howard',
 * 	age: 28
 * }
 */

carlos
  .$save()
  .then(function (data) {
    ...
  });

User.get({ id: [10, 11, 12] })
.then(function (users){
 for (var i = 0, len = users.length; i < len; i++) {
  if (users[i].gender === 'male') {
   users[i].status = 'inactive';
  }

  users[i].$save();   // update
 }
});

User.query({ gender: { $eq: 'male' } })
  .then(function (users) {
    for (var i = 0, len = users.length; i < len; i++) {
      if (users[i].age > 70) {
        users[i].status = 'inactive';
      }

      users[i].$save();   // update
    }
  })
  .catch(function (error) {
    console.log(error);
  });

User.delete({ id: 20 });  // delete

Using events

Datalayer by default dispatch two main events, dl-save and dl-model.save, when a save or update operation occours. We can listen to a particular model events, lets say dl-task.save or when a save operations happened dl-save.

angular.moduel('app')
.controller('Controller1', function (scope, datalayer){
 var Task = datalayer({ model: 'task' });
 var subscriptionId = Task.$on('dl-task.save', onSave);

 function onSave(task) {
  alert('Task ' + task.name + ' created')!
 }

 scope.$on('$destroy', function() {
    Task.$off(subscriptionId);
 });
});

angular.moduel('app')
.controller('Controller2', function (scope, datalayer){
 var ref = datalayer({ model: 'task' });
 var subscriptionId = ref.$on('dl-save', onSave);

 function onSave(data) {
  alert('Something has been saved', data);
 }

 scope.$on('$destroy', function() {
    ref.$off(subscriptionId);
 });
});

Handling Pagination

lets say the api return a json not a array:

option 1
Preserving the total

{
 total: 150,
 items: [{...}, {...}]
}
var User = datalayer({ model: 'users' });

User.query({ gender: { $eq: 'male' }, page: 1, limit: 10 }, false)
.then(function (users){
 for (var i = 0, len = users.items.length; i < len; i++) {
  users.items[i] = new User(users.items[i])
 }
});

option 2 Using $http transformResponse option

var User = datalayer({ model: 'users' });

User.query({ gender: { $eq: 'male' }, page: 1, limit: 10 }, false, {
 transformResponse: function (data){
  if (data && data.items) {
   return data.items;
  }
 }
})
.then(function (users){

});
2.0.4

6 years ago

2.0.3

6 years ago

1.2.1

9 years ago

1.2.0

9 years ago

1.1.9

9 years ago

1.1.8

9 years ago

1.1.7

9 years ago

1.1.6

9 years ago

1.1.5

9 years ago

1.1.4

9 years ago

1.1.3

9 years ago

1.1.2

9 years ago

1.1.1

9 years ago

1.1.0

9 years ago

1.0.9

9 years ago

1.0.8

10 years ago

1.0.7

10 years ago

1.0.6

10 years ago

1.0.5

10 years ago

1.0.4

10 years ago

1.0.3

10 years ago

1.0.2

10 years ago

1.0.1

10 years ago

1.0.0

10 years ago