AngularJS Module for WP-API
There is also a Backbone.js WP-API client.
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:
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
Script dependencies and localized data can also be modified with the
angular_wp_api_local_data filters, respectively.
Now that you have set the dependency of the angular-wp-api script, add
angular-wp-api 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.
wp.api in your Modules
To provide access to API resources, include
wp.api in the dependency array of your module definition.
The resources rely on localized data injected into the footer of the page, with the name of
wpAPIData. 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.
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:
** If the user is not logged in, the request will recieve a
403 Forbidden response.
A single post request:
A post loop request:
Creating a new post draft:
Updating a post title:
A post loop request for page 3 of posts:
A request for registered post types:
A request for data about the attachment post type:
The ngResource method
.get(), should be used for requesting single objects/entities, as it expects an object to be returned. When requesting a loop/collection, use
query(), 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:
This will use Node's NPM package manager to install all the dependencies for building and testing this library. We use Bower to manage client script dependencies, but Bower script installation is handled as part of the
npm install command.
build script with the npm command:
Coming soon . .
A note on Grunt
The custom "build" and "test" scripts 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
grunt console command, you must globally install the Grunt command-line interface:
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.