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
74 lines (59 loc) • 3.23 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>apiNG Demo</title>
<!-- CSS -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<link rel="stylesheet" href="aping-design-default.css">
<link href='//fonts.googleapis.com/css?family=Economica' rel='stylesheet' type='text/css'>
<!-- apiNG dependencies -->
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<!-- apiNG -->
<script src="../../dist/aping.js"></script>
<!-- apiNG config -->
<script src="aping-config.js"></script>
<!-- apiNG plugins -->
<script src="//cdn.jsdelivr.net/aping.plugin-youtube/latest/aping-plugin-youtube.min.js"></script>
<script src="//cdn.jsdelivr.net/aping.plugin-facebook/latest/aping-plugin-facebook.min.js"></script>
<script src="//cdn.jsdelivr.net/aping.plugin-codebird/latest/aping-plugin-codebird.min.js"></script>
<script src="//cdn.jsdelivr.net/aping.plugin-vimeo/latest/aping-plugin-vimeo.min.js"></script>
<script src="//cdn.jsdelivr.net/aping.plugin-flickr/latest/aping-plugin-flickr.min.js"></script>
<script src="//cdn.jsdelivr.net/aping.plugin-dailymotion/latest/aping-plugin-dailymotion.min.js"></script>
<script src="//cdn.jsdelivr.net/aping.plugin-tumblr/latest/aping-plugin-tumblr.min.js"></script>
<script src="//cdn.jsdelivr.net/aping.plugin-rss/latest/aping-plugin-rss.min.js"></script>
<script src="//cdn.jsdelivr.net/aping.plugin-wikipedia/latest/aping-plugin-wikipedia.min.js"></script>
<!-- apiNG design (& dependencies) -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.min.js"></script>
<script src="//cdn.jsdelivr.net/angular.masonry-packed/0.14.5/angular-masonry-packed.min.js"></script>
<script src="//cdn.jsdelivr.net/angular.linkify/1.2.0/angular-linkify.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment-with-locales.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-moment/0.10.3/angular-moment.min.js"></script>
<script src="aping-design-default.js"></script>
<!-- angular module -->
<script src="social_app.js"></script>
</head>
<body ng-app="app">
<div class="container-flouid">
<div style="padding:20px; background-color:#ddd;">
<aping
template-url="social_template.html"
items="3"
model="social"
order-by="timestamp"
order-reverse="true"
aping-youtube="[{'channelId':'UCuGcxogeiX5DbfzBMTl_aZQ'}]"
aping-wikipedia="[{'search':'Oktoberfest'}]"
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>
</div>
</div>
</body>
</html>