Angular with WP API
Tuesday, 18 August 2015
I wanted to be able to use the WP API to show my latest posts on an external site, and here’s how I did it using Angular. You need:
- A WordPress site with the latest version of the WP API Plugin (I am using 2.0 Beta 4.0) from Github (use develop branch)
- A copy of Angular
html:
Latest 10 Posts from big-andy.co.uk
js:
var app = angular.module('app', []);
// filter to convert html to trusted html.
app.filter('to_trusted', ['$sce', function($sce){
return function(text) {
return $sce.trustAsHtml(text);
};
}]);
// Add a controller
app.controller( 'AppCtrl', ['$scope', '$http', function( $scope, $http ) {
// Load posts from the WordPress API
$http({
cache: true,
method: 'GET',
url: 'https://big-andy.co.uk/wp-json/wp/v2/posts',
params: {
'filter[posts_per_page]' : 10
},
}).
success( function( data, status, headers, config ) {
$scope.posts = data;
});
}]);
See Demo or See Codepen Demo [lazy]
See the Pen Angular WP API by Andrew Hudson (@bigandy) on CodePen.
[/lazy]