This article assumes that you have some existing knowledge of the Ionic Framework and AngularJS.

With the WP-API getting more and more mature, I thought I’d share how I recently integrated WordPress data into a cross-platform mobile app. Approximately three months ago I picked up the Ionic Framework which uses AngularJS and Cordova to create mobile apps that utilize web technologies such as HTML, CSS, and JavaScript, but look like native apps.

Setting Up Our Controller

First, we need to set up our controller. Below is a simple controller.

In the code above, myCtrl  is the name of your controller. Next, we have the objects that we want to make available to our controller. The  $scope  is where we will assign our data for use in our template and the  $http  will allow us to make a request to the WP-API for some data.

Specifying Our API Endpoint

This is the endpoint that we need to use to requests a list of posts from our website. There are many endpoints and filters available for requesting data, but for this example we will just be querying posts.

Requesting The Data

This tells the $http  object to use JSONP (JSON with Padding) to request the data from our WordPress site. On success, it loads the JSON data into our $scope  and calls it $scope.posts . If there is an error, it will write a log to our console.

Binding The Data To Our Template

Here is a simplified version of what our template might look like. Notice how we bound the data to a list item using the collection-repeat directive. That element will be repeated for each post in $scope.posts .

Putting It All Together

This is roughly how your controller should look by now.

 

The Result

And here are the results. A nice looking list of our blog posts.

ionic-posts