Help

What is apiNG?

Suggest Edits
320

apiNG is an AngularJS module 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

Basic Usage Demo

👍

Plnkr demo (view & edit)

Basic usage: plnkr.co/xmflhJ

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.

<h1>Unstyled, one result</h1>
<aping aping-jsonloader="[{ 'path': 'https://randomuser.me/api/' }]">
    <pre>{{results | json}}</pre>
</aping>

<hr>

<h1>Styled, but two results</h1>
<aping
    template-url="template.html"
    aping-jsonloader="[{'path':'https://randomuser.me/api'}, {'path':'https://randomuser.me/api'}]">
</aping>

Result:

Advanced Usage Demo

👍

Plnkr demo (view & edit)

Social Wall: plnkr.co/dz3Dru

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.

<aping
    template-url="social_template.html"
    items="3"
    model="social"
    order-by="timestamp"
    order-reverse="true"
    aping-youtube="[{'channelId':'UCuGcxogeiX5DbfzBMTl_aZQ'}]"
    aping-facebook="[{'page':'BreakingBad'}]"
    aping-codebird="[{'user':'adidas', 'showAvatar':false}]"
    aping-dailymotion="[{'userId':'electropose'}]"
    aping-tumblr="[{'page':'davidhinga'}]"
    aping-flickr="[{'tags':'münchen'}]"
    aping-rss="[{'path':'http://blog.hackerearth.com/feed'}]"
    aping-wikipedia="[{'search':'Oktoberfest'}]"
    aping-vimeo="[{'channel':'worldhd'}]">
</aping>

Result, displayed in social_template.html:

Updated less than a minute ago