Wordpress Rest API with Angular

The WordPress REST API provides API endpoints for WordPress data types that allow developers to interact with sites remotely by sending and receiving JSON (JavaScript Object Notation) objects. This enables developers to create, read and update WordPress content from client-side JavaScript or from external applications, even those written in languages beyond PHP.

Why use the WordPress REST API

The WordPress REST API enables developers to use the wordPress in new way, for example creating single page application on top of WordPress. We can even create plugin to provide an entirely new admin dashboard experiences for WordPress. You don’t need to write any program in PHP, any programming language which can make HTTP request and parse JSON can interact with WordPress.

In this post we will create a new angular app, which will access posts from WordPress website.

$ git clone https://github.com/CypherTree/wordpress-angular-poc.git
$ cd wordpress-angular-poc
$ npm install
$ npm start

This should get us up and running with our newly cloned app. Now lets start with adding service in our app.js file. Our service name will be WpServices which will have functions which makes http requests. The key thing to understand when thinking about REST APIs is that everything is taking place over the web via HTTP – data in and data out.

In Above we have three function:

  • getPosts: Make HTTP request to "https://[YOUR-SITE-URL]/wp-json/wp/v2/posts?per_page=" It has parameter per_page which is nothing but the post per request you want. So this call return JSON array of posts object.
  • getPostDetail: Make HTTP request to "https://[YOUR-SITE-URL]/wp-json/wp/v2/posts/" + id Here parameter id will be the post id. This will response a JSON of detail post data of requested post ID
  • getMediaData: It will have parameter as media file ID. The HTTP Request url will be "https://[YOUR-SITE-URL]/wp-json/wp/v2/media/" + mediaID It gives post type media data of requested ID

Now in our project we will create blog.html as templet and blog.js as controller file. Similarly we will create post-detail.html and post-detail.js in posts directory. And finally register our state in stateProvider services and load modules for that in our app.js

blog.html Is nothing but the Template which render the posts with featured image, title and excerpt. Read more will have the link of our post-detail state and from here we pass post Id as parameter.

blog.js We will register controller BlogCtrl which will have getPosts method. In which we will call webServices get post method with post per page parameter. Returned posts array data will get collected in posts variable. The templet in blog.html will render those posts. Here one more function getMediaUrl which call getMediaData with parameter of media id and store media(image) url in images array.

Blog Page will look like:

post-detail.html This template will display single(detailed) post post-detail state and from here we pass post Id as parameter.

post-detail.js We will register controller PostDetailCtrl which will have getPostDetail method. In which we will call webServices getPostDetail method with post id as parameter. We are getting post id from $stateParams and returned detail posts data. The templet in post-detail.html will render that posts details.

Detail Post will look like:

Get Full app form Here

Reference:
REST API Handbook
Posts
The REST API (and How It Could Change WordPress Forever)



Leave a Reply