Using AngularJS and JSON API to retrieve WordPress content

AngularJS removes the boundaries a standard html website had and opens up a wide range of opportunities making it easier and faster to build dynamic web applications. Marrying it with WordPress and its REST API makes perfect sense whether you want to utilize existing contend within your application, dynamically pull data from various websites or build a dynamic AJAX-driven WordPress theme.

The purpose of this tutorial is to analyze the process behind requesting and importing WordPress posts. The same method could easily be used to retrieve a wider array of details such as comments, categories or users.

Set up files and dependencies

Let’s start by creating our index.html file.

I included the most up-to-date versions of angular.js and angular-route.js. Because of the way AngularJS is decoupled we have to include the routing module separately.

I also added Bootstrap so we don’t have to worry about CSS during this tutorial.

Let’s include the app.js file where we’ll be hosting our core functions.

We start by adding a new module with a funky 'angular♥wp' name and we’re injecting the 'ngRoute' dependency. At this stage Angular is not working yet. We should modify the index.html file so our app knows where it should be initiated. Let’s add the app name to the html tag. We should also add the ng-view element to indicate where the content will be placed in our document.

Configure Routing

Now that we have our core files in place we can start writing the application. The first step is to configure the routing. That’s what we needed the 'ngRoute' module for.

We added 2 new components. In the first one: $locationProvider, we’re telling our app to enable html5 mode. Among other things it enables our app to manage the browser’s address bar. Without it the URL would include an additional /#/.

In $routeProvider.when we’re telling the app to load a template part from content.html file when we’re on the root page ('/'). Let’s create the content.html document then.

We should also add the Main controller that’s been mentioned in the app.js.

The app should place a short message in the console to confirm that it’s working correctly so far.

Getting WordPress posts using JSON

To be able to access WordPress posts we have make sure the WordPress site returns them in a JSON format. There are few ways to achieve that.

Jetpack

We could use the highly popular Jetpack plugin which now includes the JSON API. Simply install the plugin, activate it, authorize it using your WordPress account credentials and enable the JSON API module in Jetpack Settings.

In this case we would ask the WordPress site to provide the JSON data. We would use the following query: 'https://public-api.wordpress.com/rest/v1.1/sites/' + siteDomain + '/posts/'. The siteDomain is the URL of the site we want to pull content from so in my case it will be 'amielucha.com'.

WordPress REST API plugin

For the purpose of this tutorial I’m going to use the most recent beta version of the REST API plugin. When using this plugin make sure the site’s permalinks are properly configured.

In this case the JSON results URL will be [SITE_URL]/wp-json/wp/v2/posts/. If you access it directly you’ll see the unformatted JSON structure. To format the JSON object in Chrome browser you could try this Chrome extension.

Back to our app.js

Now we can finally request the JSON content from our WordPress blog and return the object in the browser’s console. We saved the results in $scope.posts so it can be later accessed by our AngularJS app.

Now that we have the data, all we have to do is display it on the screen. We’ll use the content.html file for that purpose.

We’re using Angular’s ng-repeat to loop through all elements in $scope.posts. Then we’re displaying each post’s title and the excerpt.

If you run the app now you might notice that it’s not returning the correct html. In order to achieve that we’ll use the $sce service component.

$sce service component

Note: As of AngularJS 1.3 the ngBindHtmlUnsafe has been removed and replaced by ngBindHtml.

To enable ngBindHtml let’s inject $sce into our Main controller as a dependency. Then we have to iterate through all the untrusted html in $scope.posts and convert it to a trusted form.

We should also modify content.html to bind the trusted content using ng-bind-html attribute.

Now that we are able to see the proper html content we could experiment with pulling different kinds of information. To see a full list of queries you can use refer to the WP REST API documentation. The most commonly used paths include /wp-json/wp/v2/pages /wp-json/wp/v2/comments /wp-json/wp/v2/users /wp-json/wp/v2/taxonomies or /wp-json/wp/v2/types.