Basic Usage

The basic features makes apiNG to a high-flyer for receiving and displaying data, you regularly consume via $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.

Table of Content

• Features
• Simple Setup
• Parameters
• Events
• Built-in plugin "JSON-Loader"
• Built-in plugin "XML"
• Built-in plugin "Local-Storage"
• Built-in plugin "NG-Array"

Features

Setup

• Easy to setup via HTML data-attributes
• Additional, you can pre-define your default settings in a config file, which could be overwritten by every apiNG instance
• Store your access tokens & api keys in the credential-manager
• Isolated scope - Use more than one apiNG instance per page.
• You can nestle apiNG instances

Get & Aggregate your data

• 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

• 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

• 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

• As needed, the data can be available in an injectable and persistent angular value (Plnkr)

Simple Setup

👍

Plnkr demo (view & edit)

plnkr.co/xmflhJ

1. Install apiNG
2. Add the apiNG directive to your html:

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

📘

$scope.results contains the data and is available in the template.

Parameters

Sample:

<aping
    template-url="templates/events.html"
    items="10"
    order-by="timestamp"
    order-reverse="true"
    remove-doubles="true"
    payload-json="{'title':'All Events (Munich and Berlin)'}"
    aping-jsonloader="[{'path':'events_munich.json'}, {'path':'events_berlin.json'}]">
</aping>

👍

Plnkr demo (view & edit)

plnkr.co/k3DPNc

Events

Built-in plugin "JSON-Loader"

1. Sample

<aping
    template-url="templates/events.html"
    aping-jsonloader="[{'path':'json/events.json'}]">
</aping>

2. USAGE

Supported Sources

• JSON files (local)
• JSON files (external)
• restful JSON urls
• restful JSONP urls (does not work with angular 1.6 or higher)

Requests

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'}]
  
  
  

Built-in plugin "XML"

👍

Plnkr demo (view & edit)

plnkr.co/MXxMni

1. Sample

<aping
    template-url="templates/events.html"
    aping-xml="[{'path':'xml/events.xml'}]">
</aping>

2. USAGE

Supported Sources

• XML files (local)
• XML files (external)

Requests

Sample requests:

• [{'path':'data.xml', 'items':5}]
• [{'path':'https://raw.githubusercontent.com/JohnnyTheTank/apiNG/master/demos/xml/event.xml'}]
  
  
  

Built-in plugin "Local Storage"

1. Sample

<aping
    template-url="templates/favorites.html"
    aping-local-storage="[{'key':'favorites'}]">
</aping>

2. USAGE

Requests

Sample request:

• [{'key':'favorites', 'items':5}]
  
  
  

Built-in plugin "NG-Array"

👍

Plnkr demo (view & edit)

plnkr.co/2GavLG

1. Sample

You have an Angular Controller like this:

angular.module('app')
    .controller('appController', ['$rootScope', '$scope', function ($rootScope, $scope) {
        $rootScope.array1 = [
            {name: "lisa", position: 6, parentVar:"array1"},
            {name: "mona", position: 4, parentVar:"array1"},
            {name: "sarah", position: 1, parentVar:"array1"},
        ];

        $rootScope.array2 = [
            {name: "johnny", position: 7, parentVar:"array2"},
            {name: "moritz", position: 3, parentVar:"array2"},
            {name: "johannes", position: 5, parentVar:"array2"},
        ];

        $rootScope.object1 = {name: "fabian", position: 2, parentVar:"object1"};
    }]);

Now you can load this $rootScope Arrays and Object like this:

<div ng-controller="appController">
    <aping
        template-url="unstyled_template.html"
        order-by="position"
        aping-ng-array="[{'name':'array1'}, {'name':'array2'}, {'name':'object1'}]">
    </aping>
</div>

2. Usage

Supported Sources

• Arrays
• Objects

Requests

Sample requests:

• [{'name':'dataArray', 'items':5}]
• [{'name':'array1'}, {'name':'array2'}, {'name':'object1'}]