Hi guys, I just released a first version of a new library for AngularJS.

The idea is to have a mock in your AngularJS application, but not deployed on the back side. With this kind of mock you are able to deploy an offline sandbox version of your website.

The library decorates the $http service and uses the localStorage or sessionStorage to store your data.

You will find the library there : github / npm

Installation

Npm

$ npm install ngmockstorage

Bower

$ bower install ngmockstorage

Configuration

Add to your project

(function() {
  'use strict';

  angular.module('<project name>', ['ngMockStorage', ...]);
})();

Define the storage

(localStorage / sessionStorage)

(function() {
  'use strict';

  angular.module('<project name>')
    .config(configFn);

  configFn.$inject = ['$mockStorageProvider'];

  function configFn($mockStorageProvider) {
    $mockStorageProvider.setStorageType('sessionStorage');
  }
})();

Define the storage key prefix

(function() {
  'use strict';

  angular.module('<project name>')
    .config(configFn);

  configFn.$inject = ['$mockStorageProvider'];

  function configFn($mockStorageProvider) {
    $mockStorageProvider.setKeyPrefix('ngMockStorage-');
  }
})();

Define the namespace

(function() {
  'use strict';

  angular.module('<project name>')
    .config(configFn);

  configFn.$inject = ['$mockRouterProvider'];

  function configFn($mockRouterProvider) {
    $mockRouterProvider.setNamespace('api');
  }
})();

Add a resource

The name format : <parent resource name>.<resource name>

Options :

  • primaryKey: (default: ‘id’) identifier of the resource
  • key: (default: ‘id<Resource name>’) param name in the url /<resource name>/:key
  • collection: (default: true) define if the resource is an object or a array
(function() {
  'use strict';

  angular.module('<project name>')
    .config(configFn);

  configFn.$inject = ['$mockRouterProvider'];

  function configFn($mockRouterProvider) {
    $mockRouterProvider.addResource('todos');
    $mockRouterProvider.addResource('todos.infos', {collection : false});
  }
})();

Load datas

(function() {
  'use strict';

  angular.module('<project name>')
    .config(configFn);

  configFn.$inject = ['$mockRouterProvider'];

  function configFn($mockRouterProvider) {
    $mockRouterProvider.addResource('todos');

    $mockRouterProvider.loadDatas('todos', [
      {
        id     : 1,
        title  : 'Todos 1',
        isDone : false
      },
      {
        id     : 2,
        title  : 'Todos 2',
        isDone : false
      }
    ]);
  }
})();

Set log level

(error / warn / info / debug)

(function() {
  'use strict';

  angular.module('<project name>')
    .config(configFn);

  configFn.$inject = ['$mockRouterProvider'];

  function configFn($mockRouterProvider) {
    $mockRouterProvider.setLogLevel('info');
  }
})();