2.0.4 • Published 5 years ago

angular-datalayer v2.0.4

Weekly downloads
32
License
MIT
Repository
github
Last release
5 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

5 years ago

2.0.3

5 years ago

1.2.1

7 years ago

1.2.0

8 years ago

1.1.9

8 years ago

1.1.8

8 years ago

1.1.7

8 years ago

1.1.6

8 years ago

1.1.5

8 years ago

1.1.4

8 years ago

1.1.3

8 years ago

1.1.2

8 years ago

1.1.1

8 years ago

1.1.0

8 years ago

1.0.9

8 years ago

1.0.8

8 years ago

1.0.7

8 years ago

1.0.6

8 years ago

1.0.5

8 years ago

1.0.4

8 years ago

1.0.3

8 years ago

1.0.2

8 years ago

1.0.1

8 years ago

1.0.0

8 years ago