{"category":"57706179d7c6cd1900a57e6f","project":"56830b883b87430d00483b3d","user":"56830b4870331a0d00484a77","version":"57706179d7c6cd1900a57e6e","updates":[],"_id":"5770617ad7c6cd1900a57e7e","createdAt":"2015-12-29T22:39:06.476Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/fSnlT8ZR6Os5nansogpK_aping-logo.png\",\n        \"aping-logo.png\",\n        \"320\",\n        \"186\",\n        \"#c44544\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:embed]\n{\n  \"html\": false,\n  \"url\": \"https://ghbtns.com/github-btn.html?user=JohnnyTheTank&repo=apiNG&type=star&count=true&size=large\",\n  \"title\": null,\n  \"favicon\": null,\n  \"iframe\": true,\n  \"width\": \"160px\",\n  \"height\": \"30p\"\n}\n[/block]\n**apiNG** is an AngularJS directive that enables you to receive and display data from one or more sources. The data can be aggregated, limited and ordered. The complete setup is dead simple, just by adding data-attributes to your html.\n\nThere are two level of usage: _basic_ and _advanced_\n* The _basic_ usage is focused on keeping it simple and easy, but with enough power for most use cases\n* The _advanced_ usage turns apiNG into a plugin system for data-sources and designs, focused on re-usable modules\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Basic Usage Demo\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"success\",\n  \"body\": \"Basic usage: [plnkr.co/xmflhJ](http://plnkr.co/xmflhJ)\",\n  \"title\": \"Plnkr demo (view & edit)\"\n}\n[/block]\nIn this demo, we just want to receive and display data from random REST API. In this case, we need to use some built-in functionalities.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<h1>Unstyled, one result</h1>\\n<aping aping-jsonloader=\\\"[{ 'path': 'https://randomuser.me/api/' }]\\\">\\n    <pre>{{results | json}}</pre>\\n</aping>\\n\\n<hr>\\n\\n<h1>Styled, but two results</h1>\\n<aping\\n    template-url=\\\"template.html\\\"\\n    aping-jsonloader=\\\"[{'path':'https://randomuser.me/api'}, {'path':'https://randomuser.me/api'}]\\\">\\n</aping>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nResult:\n[block:embed]\n{\n  \"html\": false,\n  \"url\": \"https://rawgit.com/JohnnyTheTank/apiNG/master/demos/jsonloader/\",\n  \"title\": \"apiNG Demo\",\n  \"favicon\": \"https://rawgit.com/favicon.ico\",\n  \"iframe\": true,\n  \"height\": \"1110px\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Advanced Usage Demo\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"success\",\n  \"title\": \"Plnkr demo (view & edit)\",\n  \"body\": \"Social Wall: [plnkr.co/dz3Dru](http://plnkr.co/dz3Dru)\"\n}\n[/block]\nIn this demo, we request some social media platforms and display a **social wall**. In this case, we need to use some plugins and one design for apiNG.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<aping\\n  \\ttemplate-url=\\\"social_template.html\\\"\\n  \\titems=\\\"3\\\"\\n  \\tmodel=\\\"social\\\"\\n  \\torder-by=\\\"timestamp\\\"\\n  \\torder-reverse=\\\"true\\\"\\n  \\taping-youtube=\\\"[{'channelId':'UCuGcxogeiX5DbfzBMTl_aZQ'}]\\\"\\n    aping-facebook=\\\"[{'page':'BreakingBad'}]\\\"\\n    aping-codebird=\\\"[{'user':'adidas', 'showAvatar':false}]\\\"\\n    aping-dailymotion=\\\"[{'userId':'electropose'}]\\\"\\n    aping-tumblr=\\\"[{'page':'davidhinga'}]\\\"\\n    aping-rss=\\\"[{'path':'http://blog.hackerearth.com/feed'}]\\\"\\n    aping-wikipedia=\\\"[{'search':'Oktoberfest'}]\\\"\\n    aping-vimeo=\\\"[{'channel':'worldhd'}]\\\">\\n</aping>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nResult, displayed in [`social_template.html`](https://rawgit.com/JohnnyTheTank/apiNG/master/demo2/social_template.html):\n[block:embed]\n{\n  \"html\": false,\n  \"url\": \"https://rawgit.com/JohnnyTheTank/apiNG/master/demos/socialwall/\",\n  \"title\": \"apiNG Demo\",\n  \"favicon\": \"https://rawgit.com/favicon.ico\",\n  \"iframe\": true,\n  \"height\": \"7000\"\n}\n[/block]","excerpt":"","slug":"getting-started","type":"basic","title":"What is apiNG?","__v":0,"childrenPages":[]}
[block:image] { "images": [ { "image": [ "https://files.readme.io/fSnlT8ZR6Os5nansogpK_aping-logo.png", "aping-logo.png", "320", "186", "#c44544", "" ] } ] } [/block] [block:embed] { "html": false, "url": "https://ghbtns.com/github-btn.html?user=JohnnyTheTank&repo=apiNG&type=star&count=true&size=large", "title": null, "favicon": null, "iframe": true, "width": "160px", "height": "30p" } [/block] **apiNG** is an AngularJS directive that enables you to receive and display data from one or more sources. The data can be aggregated, limited and ordered. The complete setup is dead simple, just by adding data-attributes to your html. There are two level of usage: _basic_ and _advanced_ * The _basic_ usage is focused on keeping it simple and easy, but with enough power for most use cases * The _advanced_ usage turns apiNG into a plugin system for data-sources and designs, focused on re-usable modules [block:api-header] { "type": "basic", "title": "Basic Usage Demo" } [/block] [block:callout] { "type": "success", "body": "Basic usage: [plnkr.co/xmflhJ](http://plnkr.co/xmflhJ)", "title": "Plnkr demo (view & edit)" } [/block] In this demo, we just want to receive and display data from random REST API. In this case, we need to use some built-in functionalities. [block:code] { "codes": [ { "code": "<h1>Unstyled, one result</h1>\n<aping aping-jsonloader=\"[{ 'path': 'https://randomuser.me/api/' }]\">\n <pre>{{results | json}}</pre>\n</aping>\n\n<hr>\n\n<h1>Styled, but two results</h1>\n<aping\n template-url=\"template.html\"\n aping-jsonloader=\"[{'path':'https://randomuser.me/api'}, {'path':'https://randomuser.me/api'}]\">\n</aping>", "language": "html" } ] } [/block] Result: [block:embed] { "html": false, "url": "https://rawgit.com/JohnnyTheTank/apiNG/master/demos/jsonloader/", "title": "apiNG Demo", "favicon": "https://rawgit.com/favicon.ico", "iframe": true, "height": "1110px" } [/block] [block:api-header] { "type": "basic", "title": "Advanced Usage Demo" } [/block] [block:callout] { "type": "success", "title": "Plnkr demo (view & edit)", "body": "Social Wall: [plnkr.co/dz3Dru](http://plnkr.co/dz3Dru)" } [/block] In this demo, we request some social media platforms and display a **social wall**. In this case, we need to use some plugins and one design for apiNG. [block:code] { "codes": [ { "code": "<aping\n \ttemplate-url=\"social_template.html\"\n \titems=\"3\"\n \tmodel=\"social\"\n \torder-by=\"timestamp\"\n \torder-reverse=\"true\"\n \taping-youtube=\"[{'channelId':'UCuGcxogeiX5DbfzBMTl_aZQ'}]\"\n aping-facebook=\"[{'page':'BreakingBad'}]\"\n aping-codebird=\"[{'user':'adidas', 'showAvatar':false}]\"\n aping-dailymotion=\"[{'userId':'electropose'}]\"\n aping-tumblr=\"[{'page':'davidhinga'}]\"\n aping-rss=\"[{'path':'http://blog.hackerearth.com/feed'}]\"\n aping-wikipedia=\"[{'search':'Oktoberfest'}]\"\n aping-vimeo=\"[{'channel':'worldhd'}]\">\n</aping>", "language": "html" } ] } [/block] Result, displayed in [`social_template.html`](https://rawgit.com/JohnnyTheTank/apiNG/master/demo2/social_template.html): [block:embed] { "html": false, "url": "https://rawgit.com/JohnnyTheTank/apiNG/master/demos/socialwall/", "title": "apiNG Demo", "favicon": "https://rawgit.com/favicon.ico", "iframe": true, "height": "7000" } [/block]