Skip to content

The idea of this library is to have a mock in your AngularJS application, but not deployed on the back side. The library decorates the $http service and uses the localStorage or sessionStorage to store your data.

AshDevFr/ngMockStorage

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

46 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ngMockStorage

Build Status

NPM

Version

Current version: 0.1.10

Usage

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');
  }
})();

Enable Advanced Mode

(function() {
  'use strict';

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

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

  function configFn($mockRouterProvider) {
    $mockRouterProvider.setRouteMode('advanced');
  }
})();

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

Simple mode
(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
      }
    ]);
    
    $mockRouterProvider.addResource('todos.detail', {collection: false});

    $mockRouterProvider.loadDatas('todos', {
      createdBy: 'Someone'
    });
  }
})();
Advanced mode
(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
      }
    ]);
    
    $mockRouterProvider.addResource('todos.detail', {collection: false});

    $mockRouterProvider.loadDatas('todos', {
      createdBy: 'Someone'
    }, {idTodos: 1);
    
    $mockRouterProvider.loadDatas('todos', {
      createdBy: 'Another one'
    }, {idTodos: 2);
  }
})();

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');
  }
})();

Todo

  • Write a proper README
  • Optimize code
  • Write tests

ChangeLog

  • 0.1.10
Add an advanced mode to allow a more compliant mock system
  • 0.1.9
Fix issue with put/patch when the resource is not a collection
  • 0.1.8
Add Object.assign polyfill
  • 0.1.7
Library :
  - Code refacto
  - $http fallback
  
Samples :
  - Fix tranformRequest issue
  • 0.1.6
Add a not uglified file in dist
  • 0.1.5
Library :
  - Add loadDatas method
  • 0.1.4
Library : 
  - Add interceptors support
  - Add request/response transformations support
  
Samples : 
  - Add interceptors
  - Add transformRequest & TransformResponse
  • 0.1.3
Remove some duplicate code
Add a serve task in gulp
  • 0.1.2
Remove some duplicate code

About

The idea of this library is to have a mock in your AngularJS application, but not deployed on the back side. The library decorates the $http service and uses the localStorage or sessionStorage to store your data.

Resources

Stars

Watchers

Forks

Packages

No packages published