Skip to content

Instantly share code, notes, and snippets.

@dalmat36
Created February 26, 2016 00:47
Show Gist options
  • Save dalmat36/305634a18e70b98541a4 to your computer and use it in GitHub Desktop.
Save dalmat36/305634a18e70b98541a4 to your computer and use it in GitHub Desktop.
This example displays the latest five posts from my personal wordpress blog using the public wordpress API and AngularJS
angular.module('postsApp', [])
.controller('PostListController',[ '$http', function($http) {
var postList = this;
postList.posts = [];
/*postList.posts = [{
ID: 666,
date: "2016-01-23T18:51:17-05:00",
title: "2015 Cloud IaaS Platforms",
short_URL: "http://wp.me/p28wpS-aK"
}, {
ID: 644,
date: "2015-12-23T14:54:40-05:00",
title: "Interest in Docker spiked in 2015",
short_URL: "http://wp.me/p28wpS-ao"
}, {
ID: 641,
date: "2015-12-20T21:08:32-05:00",
title: "Public high school 4-year adjusted cohort graduation rate 2013-2014",
short_URL: "http://wp.me/p28wpS-al"
}, {
ID: 597,
date: "2015-12-09T20:59:58-05:00",
title: "YSCPA EV3: Simple line follower",
short_URL: "http://wp.me/p28wpS-9D"
}, {
ID: 596,
date: "2015-12-09T20:48:36-05:00",
title: "Performing set difference with R",
short_URL: "http://wp.me/p28wpS-9C"
}];*/
$http.get('https://public-api.wordpress.com/rest/v1.1/sites/mattdalesio.wordpress.com/posts/?number=5&fields=ID,title,link,short_URL,date')
.success(function(data){
postList.posts = data.posts;
});
}]);
<!doctype html>
<html ng-app="postsApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="app.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<h2>Recent Posts</h2>
<div ng-controller="PostListController as postList">
<ul class="list-group">
<li class="list-group-item" ng-repeat="post in postList.posts">
<a href="{{post.short_URL}}">{{post.title}}</a>
<br/>
<time>{{post.date | date}}</time>
</li>
</ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment