{"category":{"version":"57804064827bd50e006b04fc","project":"54344d89bfaa3d0800c4d7fa","_id":"57804064827bd50e006b04fd","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2014-10-07T22:53:45.315Z","from_sync":false,"order":0,"slug":"guides","title":"Guides"},"project":"54344d89bfaa3d0800c4d7fa","user":"54344d6cbfaa3d0800c4d7f7","version":{"__v":1,"_id":"57804064827bd50e006b04fc","project":"54344d89bfaa3d0800c4d7fa","createdAt":"2016-07-09T00:08:04.866Z","releaseDate":"2016-07-09T00:08:04.866Z","categories":["57804064827bd50e006b04fd","57804064827bd50e006b04fe","57804064827bd50e006b04ff","57804064827bd50e006b0500","57804064827bd50e006b0501"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"2.9.0","version":"2.9"},"_id":"57804064827bd50e006b0505","__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-06-28T21:47:01.679Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":3,"body":"### Where to get JSData\n\n- npm - `npm install --save js-data`\n- bower - `bower install --save js-data`\n- jsdelivr - `//cdn.jsdelivr.net/js-data/2.0.0/js-data.js`\n- cdnjs - `//cdnjs.cloudflare.com/ajax/libs/js-data/2.0.0/js-data.js`\n\nWhen 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.\n\n### Dependencies\n\nJSData 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. \n\nIf 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.\n\n### Get JSData into your app\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script type=\\\"text/javascript\\\" src=\\\"path/to/js-data.min.js\\\"></script>\\n<script>\\n  var store = new JSData.DS();\\n</script>\",\n      \"language\": \"html\",\n      \"name\": \"Script tag\"\n    }\n  ]\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var JSData = require('js-data');\\nvar store = new JSData.DS();\",\n      \"language\": \"javascript\",\n      \"name\": \"commonjs\"\n    }\n  ]\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"define(['js-data', function (JSData) {\\n  var store = new JSData.DS();\\n});\",\n      \"language\": \"javascript\",\n      \"name\": \"AMD\"\n    }\n  ]\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"import JSData from 'js-data';\\nlet store = new JSData.DS();\",\n      \"language\": \"javascript\",\n      \"name\": \"ES6\"\n    }\n  ]\n}\n[/block]\n### Example Build Configurations\n\n##### r.js\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Running `r.js -o require.config.js` will produce `bundle.js`\\n\\nIn `index.html` switch `script/main` between `main` (load scripts dynamically) and `bundle` (load bundled scripts)\\n\",\n      \"language\": \"markdown\",\n      \"name\": \"README.md\"\n    },\n    {\n      \"code\": \"({\\n  name: 'main',\\n  mainConfigFile: 'main.js',\\n  out: 'bundle.js',\\n  optimize: 'none'\\n})\\n\",\n      \"language\": \"javascript\",\n      \"name\": \"require.config.js\"\n    },\n    {\n      \"code\": \"require.config({\\n  paths: {\\n    'js-data': '../../bower_components/js-data/dist/js-data'\\n  }\\n});\\n\\nrequire([\\n    'app'\\n  ], function (app) {\\n    app.bootstrap(); // or whatever\\n  }\\n);\\n\",\n      \"language\": \"javascript\",\n      \"name\": \"main.js\"\n    },\n    {\n      \"code\": \"<!DOCTYPE html>\\n<html>\\n<head>\\n  <title>My App</title>\\n  <!-- load scripts dynamically -->\\n  <script data-main=\\\"main\\\" src=\\\"https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js\\\"></script>\\n\\n  <!-- load bundled scripts -->\\n  <!--<script data-main=\\\"bundle\\\" src=\\\"https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js\\\"></script>-->\\n</head>\\n<body>\\n<h1>My App</h1>\\n</body>\\n</html>\\n\",\n      \"language\": \"html\",\n      \"name\": \"index.html\"\n    }\n  ]\n}\n[/block]\n##### browserify\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Running `browserify -x axios app.js > bundle.js` will produce `bundle.js`\\n\\nNote the external dependency \\\"axios\\\" that is excluded from the build (it's not needed when using js-data-angular).\\n\",\n      \"language\": \"markdown\",\n      \"name\": \"README.md\"\n    },\n    {\n      \"code\": \"var JSData = require('js-data');\\nconsole.log('It works! Using js-data ' + JSData.version.full);\\n\",\n      \"language\": \"javascript\",\n      \"name\": \"app.js\"\n    },\n    {\n      \"code\": \"<!DOCTYPE html>\\n<html>\\n<head>\\n  <title>My App</title>\\n  <!-- load bundled scripts -->\\n  <script src=\\\"bundle.js\\\"></script>\\n</head>\\n<body>\\n<h1>My App</h1>\\n</body>\\n</html>\\n\",\n      \"language\": \"html\",\n      \"name\": \"index.html\"\n    }\n  ]\n}\n[/block]\n\n##### webpack\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Running `webpack` will produce `bundle.js`\\n\\nNote the external dependency \\\"axios\\\" that is excluded from the build (it's not needed when using js-data-angular).\\n\",\n      \"language\": \"markdown\",\n      \"name\": \"README.md\"\n    },\n    {\n      \"code\": \"var JSData = require('js-data');\\nconsole.log('It works! Using js-data ' + JSData.version.full);\\n\",\n      \"language\": \"javascript\",\n      \"name\": \"app.js\"\n    },\n    {\n      \"code\": \"module.exports = {\\n  entry: './app.js',\\n  output: {\\n    filename: 'bundle.js'\\n  }\\n};\\n\",\n      \"language\": \"javascript\",\n      \"name\": \"webpack.config.js\"\n    },\n    {\n      \"code\": \"<!DOCTYPE html>\\n<html>\\n<head>\\n  <title>My App</title>\\n  <!-- load bundled scripts -->\\n  <script src=\\\"bundle.js\\\"></script>\\n</head>\\n<body>\\n<h1>My App</h1>\\n</body>\\n</html>\\n\",\n      \"language\": \"html\",\n      \"name\": \"index.html\"\n    }\n  ]\n}\n[/block]","excerpt":"Getting JSData into your app","slug":"installation","type":"basic","title":"Installation"}

Installation

Getting JSData into your app

### 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 [block:code] { "codes": [ { "code": "<script type=\"text/javascript\" src=\"path/to/js-data.min.js\"></script>\n<script>\n var store = new JSData.DS();\n</script>", "language": "html", "name": "Script tag" } ] } [/block] [block:code] { "codes": [ { "code": "var JSData = require('js-data');\nvar store = new JSData.DS();", "language": "javascript", "name": "commonjs" } ] } [/block] [block:code] { "codes": [ { "code": "define(['js-data', function (JSData) {\n var store = new JSData.DS();\n});", "language": "javascript", "name": "AMD" } ] } [/block] [block:code] { "codes": [ { "code": "import JSData from 'js-data';\nlet store = new JSData.DS();", "language": "javascript", "name": "ES6" } ] } [/block] ### Example Build Configurations ##### r.js [block:code] { "codes": [ { "code": "Running `r.js -o require.config.js` will produce `bundle.js`\n\nIn `index.html` switch `script/main` between `main` (load scripts dynamically) and `bundle` (load bundled scripts)\n", "language": "markdown", "name": "README.md" }, { "code": "({\n name: 'main',\n mainConfigFile: 'main.js',\n out: 'bundle.js',\n optimize: 'none'\n})\n", "language": "javascript", "name": "require.config.js" }, { "code": "require.config({\n paths: {\n 'js-data': '../../bower_components/js-data/dist/js-data'\n }\n});\n\nrequire([\n 'app'\n ], function (app) {\n app.bootstrap(); // or whatever\n }\n);\n", "language": "javascript", "name": "main.js" }, { "code": "<!DOCTYPE html>\n<html>\n<head>\n <title>My App</title>\n <!-- load scripts dynamically -->\n <script data-main=\"main\" src=\"https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js\"></script>\n\n <!-- load bundled scripts -->\n <!--<script data-main=\"bundle\" src=\"https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js\"></script>-->\n</head>\n<body>\n<h1>My App</h1>\n</body>\n</html>\n", "language": "html", "name": "index.html" } ] } [/block] ##### browserify [block:code] { "codes": [ { "code": "Running `browserify -x axios app.js > bundle.js` will produce `bundle.js`\n\nNote the external dependency \"axios\" that is excluded from the build (it's not needed when using js-data-angular).\n", "language": "markdown", "name": "README.md" }, { "code": "var JSData = require('js-data');\nconsole.log('It works! Using js-data ' + JSData.version.full);\n", "language": "javascript", "name": "app.js" }, { "code": "<!DOCTYPE html>\n<html>\n<head>\n <title>My App</title>\n <!-- load bundled scripts -->\n <script src=\"bundle.js\"></script>\n</head>\n<body>\n<h1>My App</h1>\n</body>\n</html>\n", "language": "html", "name": "index.html" } ] } [/block] ##### webpack [block:code] { "codes": [ { "code": "Running `webpack` will produce `bundle.js`\n\nNote the external dependency \"axios\" that is excluded from the build (it's not needed when using js-data-angular).\n", "language": "markdown", "name": "README.md" }, { "code": "var JSData = require('js-data');\nconsole.log('It works! Using js-data ' + JSData.version.full);\n", "language": "javascript", "name": "app.js" }, { "code": "module.exports = {\n entry: './app.js',\n output: {\n filename: 'bundle.js'\n }\n};\n", "language": "javascript", "name": "webpack.config.js" }, { "code": "<!DOCTYPE html>\n<html>\n<head>\n <title>My App</title>\n <!-- load bundled scripts -->\n <script src=\"bundle.js\"></script>\n</head>\n<body>\n<h1>My App</h1>\n</body>\n</html>\n", "language": "html", "name": "index.html" } ] } [/block]