Need help with angular-wp-api?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

126 Stars 15 Forks 34 Commits 7 Opened issues


An AngularJS Client for WP-API

Services available


Need anything else?

Contributors list

# 374,349
32 commits
# 54,590
1 commit

AngularJS Module for WP-API

There is also a Backbone.js WP-API client.

This library provides an AngularJS client-side interface for the WP API Plugin for WordPress.


Aside from AngularJS, this module relies on ngResource, a separate AngularJS module, to create API resources for your apps. This is a separate script you will need to include.

You will need to enqueue AngularJS in your theme or plugin, and have the WP-API plugin activated.


There are 2 methods of using this script. You can use the provided plugin, or bundle it with your app.

Set theme support

To include the script using the plugin, you'll just add a snippet to the theme or plugin containing your app.

There is one required parameter, and 2 optional configuration parameters. Here is the minimal code to enable the script:

add_theme_support( 'angular-wp-api' );

The first parameter designates what to support using a string -


The second parameter is the script dependency array. This is used to control where the script is enqueued, to ensure it has AngularJS and ngResource available, and that the script itself is available for your app.

The third parameter is an optional array of data to be localized with the script in the

add_theme_support( 'angular-wp-api',
        'data' => 'this is some data',
        'moredata' => 'more data wheee'

Script dependencies and localized data can also be modified with the

filters, respectively.

Now that you have set the dependency of the angular-wp-api script, add

as a dependency of your app scripts to make sure it is accessable. If you get error messages in the console about missing objects, check this.


If you would like to include the module in your scripts for concatentation with grunt or otherwise, you'll need to localize some data from within WordPress. See the plugin.php file for an example.


in your Modules

To provide access to API resources, include

in the dependency array of your module definition.
angular.module( 'myApp', [ 'wp.api' ] );

Local Data

The resources rely on localized data injected into the footer of the page, with the name of

. By default, there are three values it provides, which allow access to the rest of WP-API.
  • base
    : JSON API url, provided by the
  • nonce
    : JSON API nonce sent with requests, and used for authorization.
  • user_id
    : Current user ID if logged in. Users not logged will have an ID of 0 for utility.

Getting Data

The resource takes 7 parameters ( the depth of WP-API's routing ) to designate the API route:


Additional parameters are added to the query string by ngResource.


This is an example of requesting base API information:


A request for the current user data:

wpAPIResource.get( {
    param1: 'users',
    param2: wpAPIData.user_id
} );

** If the user is not logged in, the request will recieve a

403 Forbidden

A single post request:

wpAPIResource.get( {
    param1: 'posts',
    param2: 1
} );

A post loop request:

wpAPIResource.query( {
    param1: 'posts'
} );

Creating a new post draft: {
    param1: 'posts'
    title: 'Only a Test',
    slug: 'a-test',
    content: 'This is test content.'
} );

Updating a post title: {
    param1: 'posts',
    param2: 1
    title: 'Hi World!'
} );

A post loop request for page 3 of posts:

wpAPIResource.query( {
    param1: 'posts',
    page: 3
} );

A request for registered post types:

wpAPIResource.query( {
    param1: 'posts',
    param2: 'types'
} );

A request for data about the attachment post type:

wpAPIResource.query( {
    param1: 'posts',
    param2: 'types',
    param3: 'attachment'
} );

The ngResource method

, should be used for requesting single objects/entities, as it expects an object to be returned. When requesting a loop/collection, use
, which expects an array.


To develop, build and test this library, you must have Node installed. For Windows users, simply download and install Node. For Mac users, we recommend installing Node using Homebrew. Once Homebrew is installed, run

brew install node
to install Node.js.


Clone this repository, and then execute the following commands within the checkout directory:

$ npm install

This will use Node's NPM package manager to install all the dependencies for building and testing this library. Grunt is installed automatically by the

npm install
command, and is used to run the build tasks.


To update the JavaScript files in after you've made changes, run the library's

script with the npm command:
$ npm run build

This will use Grunt to check the source script for syntax errors, then minify it to create the minified angular-wp-api.min.js file and a corresponding source map file.


Coming soon . .

A note on Grunt

The custom "build" script defined in this library's package.json enable access to Grunt's functionality after a simple

npm install
; however, these commands can also be run directly using Grunt itself. In order to gain access to the
console command, you must globally install the Grunt command-line interface:
$ npm install -g grunt-cli


has been installed, you can run the build and test commands with
grunt test
, respectively, without having to invoke the scripts via NPM.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.