aping
Version:
apiNG is an AngularJS directive that 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
52 lines (40 loc) • 1.25 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>apiNG Demo</title>
<!-- apiNG dependencies -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<!-- apiNG -->
<script src="../../dist/aping.js"></script>
<!-- angular module -->
<script src="app.js"></script>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Source Sans Pro', sans-serif;
background: #0d3349;
color: white;
padding: 10px;
}
a:link,
a:active,
a:visited {
color: yellow;
}
</style>
</head>
<body ng-app="app">
<h1>Unstyled, one result</h1>
<aping aping-jsonloader="[{ 'path': 'https://randomuser.me/api/', 'resultProperty':'results.0.user'}]">
<pre>{{results | json}}</pre>
</aping>
<hr>
<h1>Styled, but two results</h1>
<aping
template-url="template.html"
aping-jsonloader="[{ 'path': 'https://randomuser.me/api/', 'resultProperty':'results.0.user' }, { 'path': 'https://randomuser.me/api/', 'resultProperty':'results.0.user' }]">
</aping>
<br><br>
</body>
</html>