Das könnte dich auch interessieren

Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung

Das AngularJS-Modul „apiNG“: RESTful-APIs ohne Umwege anbinden

    Das AngularJS-Modul „apiNG“: RESTful-APIs ohne Umwege anbinden

Das AngularJS Module apiNG. (Screenshot: GitHub)

Das JavaScript-Framework AngularJS wird immer beliebter und bietet mit seinem Two-Way-Data-Binding und eigenen DOM-Elementen, auch Direktiven genannt, tolle Möglichkeiten, eigene Web-Apps umzusetzen. Um Funktionen und Erweiterungen zu realisieren, werden sogenannte Module eingebettet. Wir schauen uns ein konkretes Modul an, mit dem wir in wenigen Schritten eine Social Wall erstellen oder eine beliebige API an unsere Webseite anbinden können.

Die Rede ist vom AngularJS-Modul apiNG. Der Entwickler Jonathan Hornung will mit dem Modul eine Lösung schaffen, um APIs über eine Direktive anzusprechen und direkt ausgeben zu lassen. Die Handhabung soll erdenklich einfach sein, außerdem soll von Anfang an eine große Menge an vordefinierten APIs zur Verfügung stehen. Das Ziel soll es sein, für die vordefinierten APIs keine Zeit mehr aufwenden zu müssen, um herauszufinden, an welchem Endpoint die Information X bereitgestellt wird.

Sollte eine API von apiNG noch nicht unterstützt werden, kann diese ohne Probleme über die apiNG-Plugin-Funktion nachgerüstet werden. Wer lieber direkt einen Endpoint an seiner Direktive anknüpfen will, kann das natürlich auch ohne Probleme tun.

AngularJS-Modul apiNG im Einsatz: Jetzt wird scharf requested

Das AngularJS Module apiNG grüßt euch mit einem gut gelaunten Affen und einer Banane. (Screenshot: GitHub)
Das AngularJS-Modul apiNG grüßt euch mit einem gut gelaunten Affen und einer Banane. (Screenshot: GitHub)

Das grundsätzliche Prinzip von apiNG ist verstanden. Wir betten nur noch die Direktive ein, übergeben die nötigen Tokens oder IDs und erhalten automatisch den Response von unserem ausgewählten Service. Dabei wird der Response in eine einheitliche Form gebracht und kann aus mehreren unterschiedlichen APIs bestehen. Für unsere Social Wall würde folgender Aufruf genügen:

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

Es werden gleichzeitig mehrere Dienste angesprochen, welche einen zusammengeführten Response zurückliefern. Dieser wird dann an die Template-Datei social_template.html übergeben. Eine Demo dieser Social Wall könnt ihr euch auf der offiziellen Seite anschauen. Alle aktuell unterstützten APIs und somit die verfügbaren apiNG-Plugins könnt ihr zudem in der aktuellen Dokumentation finden und weitere Parameter entdecken. Wem noch eine API fehlt, der kann gerne selbst mit dem apiNG-Plugin-Boilerplate loslegen.

Sollte ein Plugin nicht notwendig sein oder in einem bestimmten Einzelfall keinen Sinn ergeben, kann auch über das Attribut aping-jsonloader ein bestimmter Endpoint mit JSON-Response direkt in der Direktive angegeben werden. Dies hilft nicht nur dabei, schnell an die eigenen Daten zu kommen, sondern auch, die Komplexität vom Einsatz des Moduls flexibel zu skalieren. Im folgenden Beispiel rufen wir einen beliebigen JSON-Endpoint auf und übergeben den Response an die template.html-Datei.

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

Wer keine eigene Template-Datei für die Ausgabe aufsetzen möchte, kann den Response auch direkt inline ausgeben lassen. Dafür ändern wir den Code folgendermaßen ab:

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

Über weitere Möglichkeiten wie Models und Designs kann apiNG noch weiter aufgebohrt werden und erhält noch mehr individuelle Logik. Wer sich dafür interessiert, sollte sich die offizielle Dokumentation anschauen oder dem Projekt auf GitHub folgen.

Fazit zum AngularJS-Modul „apiNG“

Das AngularJS-Modul apiNG ermöglicht es, schnell und einfach an Daten einer API zu gelangen. Die Plugins helfen dabei, fertige und definierte APIs noch besser und bequemer einzubetten. Sicherlich steckt apiNG noch in den Kinderschuhen, aber je mehr Entwickler Plugins und weitere Schnittstellen entwickeln, umso schneller kann apiNG zu einem elementaren Modul werden. Wer eine API schon öfters auf Herz und Nieren analysieren musste, der wird dieses Modul zu schätzen wissen. Mit seiner Hilfe kann Wissen zentralisiert und über ein Plugin jedermann zur Verfügung gestellt werden. Das spart nicht nur Zeit, sondern auch Geld und ermöglicht es, wiederkehrende Prozesse zu optimieren.

Wem die Plugins, Designs oder Models zu viel sind, der kann auch einfach und „dreckig“ über ein JSON-Loader-Attribut jede API anbinden. Obwohl apiNG noch nicht lange auf dem Markt ist, wird es beispielsweise schon von Sony Music für die Ausgabe von Video eingesetzt. Wir lassen uns überraschen, wie sich apiNG entwickelt.

Was haltet ihr von apiNG und habt ihr noch AngularJS-Module, auf die ihr nicht mehr verzichten wollt?

Finde einen Job, den du liebst zum Thema Android

Schreib den ersten Kommentar!

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen