{"__v":6,"_id":"5770617ad7c6cd1900a57e79","category":{"version":"57706179d7c6cd1900a57e6e","project":"56830b883b87430d00483b3d","_id":"57706179d7c6cd1900a57e70","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-12-29T22:39:05.596Z","from_sync":false,"order":1,"slug":"documentation","title":"Documentation"},"project":"56830b883b87430d00483b3d","user":"56830b4870331a0d00484a77","version":{"__v":1,"_id":"57706179d7c6cd1900a57e6e","project":"56830b883b87430d00483b3d","createdAt":"2016-06-26T23:12:57.873Z","releaseDate":"2016-06-26T23:12:57.873Z","categories":["57706179d7c6cd1900a57e6f","57706179d7c6cd1900a57e70","57706179d7c6cd1900a57e71","57706179d7c6cd1900a57e72","57706179d7c6cd1900a57e73","57706179d7c6cd1900a57e74"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-01-08T15:51:10.391Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":5,"body":"**The basic features makes apiNG to a high-flyer for receiving and displaying data, you regularly consume via [$http](https://docs.angularjs.org/api/ng/service/$http).**\n\napiNG enables you to receive, aggregate, limit, order and display data from one or more sources. The complete setup is dead simple, just by adding data-attributes to your html.\n\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Table of Content\"\n}\n[/block]\n* **[Features](#features)**\n* **[Simple Setup](#simple-setup)**\n* **[Parameters](#parameters)** \n* **[Events](#events)** \n* **[Built-in plugin \"JSON-Loader\"](#built-in-plugin-json-loader)**\n* **[Built-in plugin \"XML\"](#built-in-plugin-xml)**\n* **[Built-in plugin \"Local-Storage\"](#built-in-plugin-local-storage)**\n* **[Built-in plugin \"NG-Array\"](#built-in-plugin-ng-array)**\n\n<br>\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Features\"\n}\n[/block]\n## Setup :fa-wrench:\n* **Easy to setup** via HTML data-attributes\n* Additional, you can **pre-define your default settings** in a **[config file](configuration)**, which could be overwritten by every apiNG instance\n* Store your **access tokens & api keys** in the **[credential-manager](advanced#credential-manager)**\n* **Isolated scope** - Use **more than one apiNG instance** per page.\n* You can **nestle apiNG instances**\n\n## Get & Aggregate your data :fa-download:\n* **Receive data** from any source (JSON/XML File, URL or REST API)\n* Receive data **from more than one source** and **aggregate** all the data\n* Enhance with **additional data from local storage**\n* Enhance with **additional data from your controller**\n\n## Optimize your data :fa-tasks:\n* **Limit** the received data **per request**\n* **Limit** the aggregated data **per apiNG instance**\n* **Sort** your data **by property** (asc or desc)\n* **Remove duplicates** from your aggregated data\n* **Merge duplicates** from your aggregated data\n* **Create identifiers** by combining some properties in your own way\n\n## Display your data :fa-eye:\n* apiNG delivers the **data to your angular template**\n* Use **template files** or **inline html** as template\n* **Change the template file on the fly**\n* The data is available in **`$scope.results`**, which you could access in your template with `{{results}}`\n* Inject additional **payload data** into your template, which you could access with `{{payload}}`\n\n## Work with your data :fa-exchange:\n* As needed, the data can be **available** in an **injectable and persistent angular value** [(Plnkr)](http://plnkr.co/edit/cziMAy?p=preview)\n\n<br>\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Simple Setup\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"success\",\n  \"title\": \"Plnkr demo (view & edit)\",\n  \"body\": \"[plnkr.co/xmflhJ](http://plnkr.co/edit/xmflhJ?p=preview)\"\n}\n[/block]\n1. [Install apiNG](installation)\n2. Add the apiNG directive to your html:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<aping aping-jsonloader=\\\"[{ 'path': 'https://randomuser.me/api/' }]\\\">\\n    <pre>{{results | json}}</pre>\\n</aping>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"`$scope.results` contains the data and is available in the template.\",\n  \"title\": \"\"\n}\n[/block]\n&nbsp;\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Parameters\"\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Attribute\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Sample\",\n    \"h-3\": \"Description\",\n    \"h-4\": \"\",\n    \"0-0\": \"**`template-url`**\",\n    \"0-1\": \"`string`\",\n    \"0-2\": \"`template.html`\",\n    \"0-3\": \"Path to template file\\nUse result data in template with `{{results}}`\",\n    \"0-4\": \"\",\n    \"1-0\": \"**`items`**\",\n    \"1-1\": \"`int`\",\n    \"1-2\": \"`20`\",\n    \"1-3\": \"Number of displayed items **per request**\",\n    \"1-4\": \"\",\n    \"2-0\": \"**`max-items`**\",\n    \"2-1\": \"`int`\",\n    \"2-2\": \"`100`\",\n    \"2-3\": \"Number of items of this **apiNG instance**<br>Use `-1` for no limitation\",\n    \"2-4\": \"\",\n    \"3-0\": \"**`order-by`**\",\n    \"3-1\": \"`string`\",\n    \"3-2\": \"`timestamp`\",\n    \"3-3\": \"Order result by this attribute<br>Use `$NONE` for no order<br>Use `$RANDOM` for random order\",\n    \"3-4\": \"yes\",\n    \"4-0\": \"**`order-reverse`**\",\n    \"4-1\": \"`boolean`\",\n    \"4-2\": \"`false`\",\n    \"4-3\": \"Use `true` for reverse order<br>Default value: `false`\",\n    \"4-4\": \"yes\",\n    \"7-0\": \"**`remove-doubles`**\",\n    \"7-1\": \"`boolean`\",\n    \"7-2\": \"`false`\",\n    \"7-3\": \"Use `true` to remove identical objects\\nor with the same ID (`id-by`).\\nGets ignored if `merge-doubles` is set.\\nDefault value: `false`\",\n    \"7-4\": \"yes\",\n    \"8-0\": \"**`payload-json`**\",\n    \"8-1\": \"`json object`\",\n    \"8-2\": \"`{'key1':'value1'}`\",\n    \"8-3\": \"Inject additional data into your template.\\nUse payload data in template with `{{payload}}`\",\n    \"8-4\": \"yes\",\n    \"9-0\": \"**`value-name`**\",\n    \"9-1\": \"`string`\",\n    \"9-2\": \"`videos`\",\n    \"9-3\": \"Inject `apingResults` into your app. [(Plnkr)](http://plnkr.co/edit/cziMAy?p=preview)\\nAccess the results with `apingResults.valueName`\",\n    \"5-0\": \"**`id-by`**\",\n    \"5-1\": \"`string` or `json array`\",\n    \"5-2\": \"`intern_id`\\n`['name','date']`\\n`['user.0','user.1']`\",\n    \"5-3\": \"Create id for each item by this properties.\\nProperty name: `aping_id`\",\n    \"6-0\": \"**`merge-doubles`**\",\n    \"6-1\": \"`boolean`\",\n    \"6-2\": \"`false`\",\n    \"6-3\": \"Use `true` to merge objects with the same ID.\\nWorks only with `id-by`\\nDefault value: `false`\",\n    \"10-0\": \"**`result-name`**\",\n    \"10-1\": \"`string`\",\n    \"10-2\": \"`events`\",\n    \"10-3\": \"Change the `result-name` to set the `$scope`\\nproperty that will contain the results.\\nDefault value: `results`\",\n    \"11-0\": \"**`protocol`**\",\n    \"11-1\": \"`string`\",\n    \"11-2\": \"`https`\",\n    \"11-3\": \"Change the `protocol` of some plugins to `https`\\nor `http`. If no value is set, the some requests will get\\nmade without any given protocol.\\nUse this parameter, if you work with Ionic, Cordova or PhoneGaph\"\n  },\n  \"cols\": 4,\n  \"rows\": 12\n}\n[/block]\n**Sample:**\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<aping\\n    template-url=\\\"templates/events.html\\\"\\n    items=\\\"10\\\"\\n    order-by=\\\"timestamp\\\"\\n    order-reverse=\\\"true\\\"\\n    remove-doubles=\\\"true\\\"\\n    payload-json=\\\"{'title':'All Events (Munich and Berlin)'}\\\"\\n    aping-jsonloader=\\\"[{'path':'events_munich.json'}, {'path':'events_berlin.json'}]\\\">\\n</aping>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"success\",\n  \"title\": \"Plnkr demo (view & edit)\",\n  \"body\": \"[plnkr.co/k3DPNc](http://plnkr.co/edit/k3DPNc?p=preview)\"\n}\n[/block]\n<br>\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Events\"\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Event\",\n    \"h-1\": \"Description\",\n    \"0-0\": \"**`apiNG.resultMerged`**\",\n    \"1-0\": \"**`apiNG.templateRendered`**\",\n    \"0-1\": \"This event fires every time a plugin submits some data and apiNG merged this data with `$scope.results`\",\n    \"1-1\": \"This event fires every time the template is rendered.\"\n  },\n  \"cols\": 2,\n  \"rows\": 2\n}\n[/block]\n<br>\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Built-in plugin \\\"JSON-Loader\\\"\"\n}\n[/block]\n## 1. Sample\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<aping\\n    template-url=\\\"templates/events.html\\\"\\n    aping-jsonloader=\\\"[{'path':'json/events.json'}]\\\">\\n</aping>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n## 2. USAGE\n\n**Supported Sources**\n* JSON files (local)\n* JSON files (external)\n* restful JSON urls\n* restful JSONP urls\n\n\n### Requests\n|  parameter  | sample | default | description | optional |\n|----------|---------|---------|---------|---------|\n| **`path`** | `data.json` |  | **Valid values:** <br>* JSON files (local)<br>* JSON files (external)<br>* restful JSON urls<br>* restful JSONP urls  | no |\n| **`format`**  | `jsonp` | `json` | Request format (`json` or `jsonp`) |  yes  |\n| **`xAuthToken`**  | `e42cb6a6ecc949c88` |  | Headers X-Auth-Token |  yes  |\n| **`resultProperty`** | `result_items` |  | Property name, containing the result. For deep results, use this this syntax: `data.0.results`  | yes |\n| **`items`**  | `20` | | Items per request (`0`-`n`) |  yes  |\n| **`orderBy`** | `position` |  | Order result by this attribute<br>Use `$RANDOM` for random order |  yes | \n| **`orderReverse`** | `true` | `false` | Use `true` for reverse order | yes | \n\nSample requests:\n* `[{'path':'data.json', 'items':5}]`\n* `[{'path':'//rawgit.com/JohnnyTheTank/apiNG/master/bower.json'}]`\n* `[{'path':'https://api.dailymotion.com/user/Bishop-live/videos'}]`\n* `[{'path':'http://jsonplaceholder.typicode.com/posts/1', 'format':'jsonp'}]`\n<br><br>\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Built-in plugin \\\"XML\\\"\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"success\",\n  \"body\": \"[plnkr.co/MXxMni](http://plnkr.co/edit/MXxMni?p=preview)\",\n  \"title\": \"Plnkr demo (view & edit)\"\n}\n[/block]\n## 1. Sample\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<aping\\n    template-url=\\\"templates/events.html\\\"\\n    aping-xml=\\\"[{'path':'xml/events.xml'}]\\\">\\n</aping>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n## 2. USAGE\n\n**Supported Sources**\n* XML files (local)\n* XML files (external)\n\n\n### Requests\n|  parameter  | sample | default | description | optional |\n|----------|---------|---------|---------|---------|\n| **`path`** | `data.json` |  | **Valid values:** <br>* XML files (local)<br>* XML files (external)  | no |\n| **`resultProperty`** | `result_items` |  | Property name, containing the result. For deep results, use this this syntax: `data.0.results`  | yes |\n| **`items`**  | `20` | | Items per request (`0`-`n`) |  yes  |\n| **`orderBy`** | `position` |  | Order result by this attribute<br>Use `$RANDOM` for random order |  yes | \n| **`orderReverse`** | `true` | `false` | Use `true` for reverse order | yes | \n\nSample requests:\n* `[{'path':'data.xml', 'items':5}]`\n* `[{'path':'https://raw.githubusercontent.com/JohnnyTheTank/apiNG/master/demos/xml/event.xml'}]`\n<br><br>\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Built-in plugin \\\"Local Storage\\\"\"\n}\n[/block]\n## 1. Sample\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<aping\\n    template-url=\\\"templates/favorites.html\\\"\\n    aping-local-storage=\\\"[{'key':'favorites'}]\\\">\\n</aping>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n## 2. USAGE\n\n### Requests\n|  parameter  | sample | default | description | optional |\n|----------|---------|---------|---------|---------|\n| **`key`** | `favorites` |  | Local Storage key  | no |\n| **`resultProperty`** | `result_items` |  | Property name, containing the result. For deep results, use this this syntax: `data.0.favorites`  | yes |\n| **`items`**  | `20` | | Items per request (`0`-`n`) |  yes  |\n| **`orderBy`** | `position` |  | Order result by this attribute<br>Use `$RANDOM` for random order |  yes | \n| **`orderReverse`** | `true` | `false` | Use `true` for reverse order | yes | \n\nSample request:\n* `[{'key':'favorites', 'items':5}]`\n<br><br>\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Built-in plugin \\\"NG-Array\\\"\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"success\",\n  \"title\": \"Plnkr demo (view & edit)\",\n  \"body\": \"[plnkr.co/2GavLG](http://plnkr.co/edit/2GavLG?p=preview)\"\n}\n[/block]\n## 1. Sample\n\nYou have an Angular Controller like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"angular.module('app')\\n    .controller('appController', ['$rootScope', '$scope', function ($rootScope, $scope) {\\n        $rootScope.array1 = [\\n            {name: \\\"lisa\\\", position: 6, parentVar:\\\"array1\\\"},\\n            {name: \\\"mona\\\", position: 4, parentVar:\\\"array1\\\"},\\n            {name: \\\"sarah\\\", position: 1, parentVar:\\\"array1\\\"},\\n        ];\\n\\n        $rootScope.array2 = [\\n            {name: \\\"johnny\\\", position: 7, parentVar:\\\"array2\\\"},\\n            {name: \\\"moritz\\\", position: 3, parentVar:\\\"array2\\\"},\\n            {name: \\\"johannes\\\", position: 5, parentVar:\\\"array2\\\"},\\n        ];\\n\\n        $rootScope.object1 = {name: \\\"fabian\\\", position: 2, parentVar:\\\"object1\\\"};\\n    }]);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nNow you can load this `$rootScope` Arrays and Object like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<div ng-controller=\\\"appController\\\">\\n    <aping\\n        template-url=\\\"unstyled_template.html\\\"\\n        order-by=\\\"position\\\"\\n        aping-ng-array=\\\"[{'name':'array1'}, {'name':'array2'}, {'name':'object1'}]\\\">\\n    </aping>\\n</div>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n## 2. Usage\n\n**Supported Sources**\n* Arrays\n* Objects\n\n### Requests\n|  parameter  | sample | default | description | optional |\n|----------|---------|---------|---------|---------|\n| **`name`** | `dataArray` |  | Array or Object in `$rootScope` | no |\n| **`items`**  | `20` |  | Items per request (`0`-`n`) |  yes  |\n| **`orderBy`** | `position` |  | Order result by this attribute<br>Use `$RANDOM` for random order |  yes | \n| **`orderReverse`** | `true` | `false` | Use `true` for reverse order | yes | \n\nSample requests:\n* `[{'name':'dataArray', 'items':5}]`\n* `[{'name':'array1'}, {'name':'array2'}, {'name':'object1'}]`","excerpt":"","slug":"usage","type":"basic","title":"Basic Usage"}
**The basic features makes apiNG to a high-flyer for receiving and displaying data, you regularly consume via [$http](https://docs.angularjs.org/api/ng/service/$http).** apiNG enables you to receive, aggregate, limit, order and display data from one or more sources. The complete setup is dead simple, just by adding data-attributes to your html. [block:api-header] { "type": "basic", "title": "Table of Content" } [/block] * **[Features](#features)** * **[Simple Setup](#simple-setup)** * **[Parameters](#parameters)** * **[Events](#events)** * **[Built-in plugin "JSON-Loader"](#built-in-plugin-json-loader)** * **[Built-in plugin "XML"](#built-in-plugin-xml)** * **[Built-in plugin "Local-Storage"](#built-in-plugin-local-storage)** * **[Built-in plugin "NG-Array"](#built-in-plugin-ng-array)** <br> [block:api-header] { "type": "basic", "title": "Features" } [/block] ## Setup :fa-wrench: * **Easy to setup** via HTML data-attributes * Additional, you can **pre-define your default settings** in a **[config file](configuration)**, which could be overwritten by every apiNG instance * Store your **access tokens & api keys** in the **[credential-manager](advanced#credential-manager)** * **Isolated scope** - Use **more than one apiNG instance** per page. * You can **nestle apiNG instances** ## Get & Aggregate your data :fa-download: * **Receive data** from any source (JSON/XML File, URL or REST API) * Receive data **from more than one source** and **aggregate** all the data * Enhance with **additional data from local storage** * Enhance with **additional data from your controller** ## Optimize your data :fa-tasks: * **Limit** the received data **per request** * **Limit** the aggregated data **per apiNG instance** * **Sort** your data **by property** (asc or desc) * **Remove duplicates** from your aggregated data * **Merge duplicates** from your aggregated data * **Create identifiers** by combining some properties in your own way ## Display your data :fa-eye: * apiNG delivers the **data to your angular template** * Use **template files** or **inline html** as template * **Change the template file on the fly** * The data is available in **`$scope.results`**, which you could access in your template with `{{results}}` * Inject additional **payload data** into your template, which you could access with `{{payload}}` ## Work with your data :fa-exchange: * As needed, the data can be **available** in an **injectable and persistent angular value** [(Plnkr)](http://plnkr.co/edit/cziMAy?p=preview) <br> [block:api-header] { "type": "basic", "title": "Simple Setup" } [/block] [block:callout] { "type": "success", "title": "Plnkr demo (view & edit)", "body": "[plnkr.co/xmflhJ](http://plnkr.co/edit/xmflhJ?p=preview)" } [/block] 1. [Install apiNG](installation) 2. Add the apiNG directive to your html: [block:code] { "codes": [ { "code": "<aping aping-jsonloader=\"[{ 'path': 'https://randomuser.me/api/' }]\">\n <pre>{{results | json}}</pre>\n</aping>", "language": "html" } ] } [/block] [block:callout] { "type": "info", "body": "`$scope.results` contains the data and is available in the template.", "title": "" } [/block] &nbsp; [block:api-header] { "type": "basic", "title": "Parameters" } [/block] [block:parameters] { "data": { "h-0": "Attribute", "h-1": "Type", "h-2": "Sample", "h-3": "Description", "h-4": "", "0-0": "**`template-url`**", "0-1": "`string`", "0-2": "`template.html`", "0-3": "Path to template file\nUse result data in template with `{{results}}`", "0-4": "", "1-0": "**`items`**", "1-1": "`int`", "1-2": "`20`", "1-3": "Number of displayed items **per request**", "1-4": "", "2-0": "**`max-items`**", "2-1": "`int`", "2-2": "`100`", "2-3": "Number of items of this **apiNG instance**<br>Use `-1` for no limitation", "2-4": "", "3-0": "**`order-by`**", "3-1": "`string`", "3-2": "`timestamp`", "3-3": "Order result by this attribute<br>Use `$NONE` for no order<br>Use `$RANDOM` for random order", "3-4": "yes", "4-0": "**`order-reverse`**", "4-1": "`boolean`", "4-2": "`false`", "4-3": "Use `true` for reverse order<br>Default value: `false`", "4-4": "yes", "7-0": "**`remove-doubles`**", "7-1": "`boolean`", "7-2": "`false`", "7-3": "Use `true` to remove identical objects\nor with the same ID (`id-by`).\nGets ignored if `merge-doubles` is set.\nDefault value: `false`", "7-4": "yes", "8-0": "**`payload-json`**", "8-1": "`json object`", "8-2": "`{'key1':'value1'}`", "8-3": "Inject additional data into your template.\nUse payload data in template with `{{payload}}`", "8-4": "yes", "9-0": "**`value-name`**", "9-1": "`string`", "9-2": "`videos`", "9-3": "Inject `apingResults` into your app. [(Plnkr)](http://plnkr.co/edit/cziMAy?p=preview)\nAccess the results with `apingResults.valueName`", "5-0": "**`id-by`**", "5-1": "`string` or `json array`", "5-2": "`intern_id`\n`['name','date']`\n`['user.0','user.1']`", "5-3": "Create id for each item by this properties.\nProperty name: `aping_id`", "6-0": "**`merge-doubles`**", "6-1": "`boolean`", "6-2": "`false`", "6-3": "Use `true` to merge objects with the same ID.\nWorks only with `id-by`\nDefault value: `false`", "10-0": "**`result-name`**", "10-1": "`string`", "10-2": "`events`", "10-3": "Change the `result-name` to set the `$scope`\nproperty that will contain the results.\nDefault value: `results`", "11-0": "**`protocol`**", "11-1": "`string`", "11-2": "`https`", "11-3": "Change the `protocol` of some plugins to `https`\nor `http`. If no value is set, the some requests will get\nmade without any given protocol.\nUse this parameter, if you work with Ionic, Cordova or PhoneGaph" }, "cols": 4, "rows": 12 } [/block] **Sample:** [block:code] { "codes": [ { "code": "<aping\n template-url=\"templates/events.html\"\n items=\"10\"\n order-by=\"timestamp\"\n order-reverse=\"true\"\n remove-doubles=\"true\"\n payload-json=\"{'title':'All Events (Munich and Berlin)'}\"\n aping-jsonloader=\"[{'path':'events_munich.json'}, {'path':'events_berlin.json'}]\">\n</aping>", "language": "html" } ] } [/block] [block:callout] { "type": "success", "title": "Plnkr demo (view & edit)", "body": "[plnkr.co/k3DPNc](http://plnkr.co/edit/k3DPNc?p=preview)" } [/block] <br> [block:api-header] { "type": "basic", "title": "Events" } [/block] [block:parameters] { "data": { "h-0": "Event", "h-1": "Description", "0-0": "**`apiNG.resultMerged`**", "1-0": "**`apiNG.templateRendered`**", "0-1": "This event fires every time a plugin submits some data and apiNG merged this data with `$scope.results`", "1-1": "This event fires every time the template is rendered." }, "cols": 2, "rows": 2 } [/block] <br> [block:api-header] { "type": "basic", "title": "Built-in plugin \"JSON-Loader\"" } [/block] ## 1. Sample [block:code] { "codes": [ { "code": "<aping\n template-url=\"templates/events.html\"\n aping-jsonloader=\"[{'path':'json/events.json'}]\">\n</aping>", "language": "html" } ] } [/block] ## 2. USAGE **Supported Sources** * JSON files (local) * JSON files (external) * restful JSON urls * restful JSONP urls ### Requests | parameter | sample | default | description | optional | |----------|---------|---------|---------|---------| | **`path`** | `data.json` | | **Valid values:** <br>* JSON files (local)<br>* JSON files (external)<br>* restful JSON urls<br>* restful JSONP urls | no | | **`format`** | `jsonp` | `json` | Request format (`json` or `jsonp`) | yes | | **`xAuthToken`** | `e42cb6a6ecc949c88` | | Headers X-Auth-Token | yes | | **`resultProperty`** | `result_items` | | Property name, containing the result. For deep results, use this this syntax: `data.0.results` | yes | | **`items`** | `20` | | Items per request (`0`-`n`) | yes | | **`orderBy`** | `position` |  | Order result by this attribute<br>Use `$RANDOM` for random order | yes | | **`orderReverse`** | `true` | `false` | Use `true` for reverse order | yes | Sample requests: * `[{'path':'data.json', 'items':5}]` * `[{'path':'//rawgit.com/JohnnyTheTank/apiNG/master/bower.json'}]` * `[{'path':'https://api.dailymotion.com/user/Bishop-live/videos'}]` * `[{'path':'http://jsonplaceholder.typicode.com/posts/1', 'format':'jsonp'}]` <br><br> [block:api-header] { "type": "basic", "title": "Built-in plugin \"XML\"" } [/block] [block:callout] { "type": "success", "body": "[plnkr.co/MXxMni](http://plnkr.co/edit/MXxMni?p=preview)", "title": "Plnkr demo (view & edit)" } [/block] ## 1. Sample [block:code] { "codes": [ { "code": "<aping\n template-url=\"templates/events.html\"\n aping-xml=\"[{'path':'xml/events.xml'}]\">\n</aping>", "language": "html" } ] } [/block] ## 2. USAGE **Supported Sources** * XML files (local) * XML files (external) ### Requests | parameter | sample | default | description | optional | |----------|---------|---------|---------|---------| | **`path`** | `data.json` | | **Valid values:** <br>* XML files (local)<br>* XML files (external) | no | | **`resultProperty`** | `result_items` | | Property name, containing the result. For deep results, use this this syntax: `data.0.results` | yes | | **`items`** | `20` | | Items per request (`0`-`n`) | yes | | **`orderBy`** | `position` |  | Order result by this attribute<br>Use `$RANDOM` for random order | yes | | **`orderReverse`** | `true` | `false` | Use `true` for reverse order | yes | Sample requests: * `[{'path':'data.xml', 'items':5}]` * `[{'path':'https://raw.githubusercontent.com/JohnnyTheTank/apiNG/master/demos/xml/event.xml'}]` <br><br> [block:api-header] { "type": "basic", "title": "Built-in plugin \"Local Storage\"" } [/block] ## 1. Sample [block:code] { "codes": [ { "code": "<aping\n template-url=\"templates/favorites.html\"\n aping-local-storage=\"[{'key':'favorites'}]\">\n</aping>", "language": "html" } ] } [/block] ## 2. USAGE ### Requests | parameter | sample | default | description | optional | |----------|---------|---------|---------|---------| | **`key`** | `favorites` | | Local Storage key | no | | **`resultProperty`** | `result_items` | | Property name, containing the result. For deep results, use this this syntax: `data.0.favorites` | yes | | **`items`** | `20` | | Items per request (`0`-`n`) | yes | | **`orderBy`** | `position` |  | Order result by this attribute<br>Use `$RANDOM` for random order | yes | | **`orderReverse`** | `true` | `false` | Use `true` for reverse order | yes | Sample request: * `[{'key':'favorites', 'items':5}]` <br><br> [block:api-header] { "type": "basic", "title": "Built-in plugin \"NG-Array\"" } [/block] [block:callout] { "type": "success", "title": "Plnkr demo (view & edit)", "body": "[plnkr.co/2GavLG](http://plnkr.co/edit/2GavLG?p=preview)" } [/block] ## 1. Sample You have an Angular Controller like this: [block:code] { "codes": [ { "code": "angular.module('app')\n .controller('appController', ['$rootScope', '$scope', function ($rootScope, $scope) {\n $rootScope.array1 = [\n {name: \"lisa\", position: 6, parentVar:\"array1\"},\n {name: \"mona\", position: 4, parentVar:\"array1\"},\n {name: \"sarah\", position: 1, parentVar:\"array1\"},\n ];\n\n $rootScope.array2 = [\n {name: \"johnny\", position: 7, parentVar:\"array2\"},\n {name: \"moritz\", position: 3, parentVar:\"array2\"},\n {name: \"johannes\", position: 5, parentVar:\"array2\"},\n ];\n\n $rootScope.object1 = {name: \"fabian\", position: 2, parentVar:\"object1\"};\n }]);", "language": "javascript" } ] } [/block] Now you can load this `$rootScope` Arrays and Object like this: [block:code] { "codes": [ { "code": "<div ng-controller=\"appController\">\n <aping\n template-url=\"unstyled_template.html\"\n order-by=\"position\"\n aping-ng-array=\"[{'name':'array1'}, {'name':'array2'}, {'name':'object1'}]\">\n </aping>\n</div>", "language": "html" } ] } [/block] ## 2. Usage **Supported Sources** * Arrays * Objects ### Requests | parameter | sample | default | description | optional | |----------|---------|---------|---------|---------| | **`name`** | `dataArray` | | Array or Object in `$rootScope` | no | | **`items`** | `20` | | Items per request (`0`-`n`) | yes | | **`orderBy`** | `position` |  | Order result by this attribute<br>Use `$RANDOM` for random order | yes | | **`orderReverse`** | `true` | `false` | Use `true` for reverse order | yes | Sample requests: * `[{'name':'dataArray', 'items':5}]` * `[{'name':'array1'}, {'name':'array2'}, {'name':'object1'}]`