Installation

Where to get JSData

npm - npm install --save js-data
bower - bower install --save js-data
jsdelivr - //cdn.jsdelivr.net/js-data/2.0.0/js-data.js
cdnjs - //cdnjs.cloudflare.com/ajax/libs/js-data/2.0.0/js-data.js

When installing via a package manager, the installed dist/ folder has js-data.js, js-data-debug.js, js-data.min.js and js-data.min.map. The CDNs have each of those four files as well.

Dependencies

JSData requires the presence of a Promise constructor in the global environment. In the browser, window.Promise must be available. In Node, global.Promise must be available. Here is a handy library for polyfilling: https://github.com/jakearchibald/es6-promise.

If you can't polyfill the environment, then configure JSData to use a specific Promise constructor directly: JSData.DSUtils.Promise = MyPromiseLib;. This direct configuration method is useful for telling JSData to use the Bluebird library or Angular's $q, etc.

Get JSData into your app

<script type="text/javascript" src="path/to/js-data.min.js"></script>
<script>
  var store = new JSData.DS();
</script>

var JSData = require('js-data');
var store = new JSData.DS();

define(['js-data', function (JSData) {
  var store = new JSData.DS();
});

import JSData from 'js-data';
let store = new JSData.DS();

Example Build Configurations

r.js

Running `r.js -o require.config.js` will produce `bundle.js`

In `index.html` switch `script/main` between `main` (load scripts dynamically) and `bundle` (load bundled scripts)

({
  name: 'main',
  mainConfigFile: 'main.js',
  out: 'bundle.js',
  optimize: 'none'
})

require.config({
  paths: {
    'js-data': '../../bower_components/js-data/dist/js-data'
  }
});

require([
    'app'
  ], function (app) {
    app.bootstrap(); // or whatever
  }
);

<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
  <!-- load scripts dynamically -->
  <script data-main="main" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js"></script>

  <!-- load bundled scripts -->
  <!--<script data-main="bundle" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js"></script>-->
</head>
<body>
<h1>My App</h1>
</body>
</html>

browserify

Running `browserify -x axios app.js > bundle.js` will produce `bundle.js`

Note the external dependency "axios" that is excluded from the build (it's not needed when using js-data-angular).

var JSData = require('js-data');
console.log('It works! Using js-data ' + JSData.version.full);

<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
  <!-- load bundled scripts -->
  <script src="bundle.js"></script>
</head>
<body>
<h1>My App</h1>
</body>
</html>

webpack

Running `webpack` will produce `bundle.js`

Note the external dependency "axios" that is excluded from the build (it's not needed when using js-data-angular).

var JSData = require('js-data');
console.log('It works! Using js-data ' + JSData.version.full);

module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js'
  }
};

<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
  <!-- load bundled scripts -->
  <script src="bundle.js"></script>
</head>
<body>
<h1>My App</h1>
</body>
</html>