wp-api-angular

Angular >=2 services for WordPress >= 4.7 Rest API

================


Angular2 services to consume WP-API v2

Live Demo

If you want to use AngularJS v1, here is the latest version: v2.0.0-rc3. npm i wp-api-angularjs@v2.0.0-rc3

Installation

``shell
npm install -g typings
npm install wp-api-angular
`

$3

Nothing special if you use TS

$3

UMD files are available wp-api-angular.umd.js and wp-api-angular.umd.min.js, the Live Demo uses them with systemJS

Bootstrap

An exported function instead WpApiLoaderFactory is mandatory to be used with AoT compilation or Ionic 2.


`js
import { Http } from '@angular/http';
import {
WpApiModule,
WpApiLoader,
WpApiStaticLoader
} from 'wp-api-angular'

export function WpApiLoaderFactory(http: Http) {
return new WpApiStaticLoader(http, 'http://YOUR_DOMAIN/wp-json/', / namespace is optional, default: '/wp/v2' /);
}

@NgModule({
imports: [
BrowserModule,
WpApiModule.forRoot({
provide: WpApiLoader,
useFactory: (WpApiLoaderFactory),
deps: [Http]
})
],
bootstrap: [App]
})
export class AppModule { }
`

API

Every method return an Obervable. If you want to get a Promise you will need to add the rxjs toPromise operator:

`js
import 'rxjs/add/operator/toPromise';

class Test {
constructor(private wpApiPosts: WpApiPosts) {
this.wpApiPosts.getList()
.toPromise()
.then(response => response.json())
.then(body => {})
.catch(error => {})
}
}

`

$3

Every request can have an optional RequestOptionsArgs object.

`js
class RequestOptionsArgs {
url : string
method : string|RequestMethod
search : string|URLSearchParams
headers : Headers
body : any
withCredentials : boolean
}
`

This is where you can add query string to your request or change the headers (see below).

`
import { Headers } from '@angular/http';

const headers = new Headers({
'Content-Type': 'application/json;charset=UTF-8',
'Access-Control-Allow-Origin': '*',
'Access-Control-Max-Age': '1728000',
'Access-Control-Allow-Headers': 'Content-Type, Content-Range, Content-Disposition, Content-Description'
'Access-Control-Allow-Methods': 'DELETE, HEAD, GET, OPTIONS, POST, PUT'
});

wpApiPosts.getList({ headers });
`

$3

`ts
getList(options?: RequestOptionsArgs): Observable;
get(postId, options?: RequestOptionsArgs): Observable;
create(body: any, options?: RequestOptionsArgs): Observable;
update(postId, body: any, options?: RequestOptionsArgs): Observable;
delete(postId, options?: RequestOptionsArgs): Observable;
getMetaList(postId, options?: RequestOptionsArgs): Observable;
getMeta(postId, metaId, options?: RequestOptionsArgs): Observable;
getRevisionList(postId, options?: RequestOptionsArgs): Observable;
getRevision(postId, revisionId, options?: RequestOptionsArgs): Observable;
getCategoryList(postId, options?: RequestOptionsArgs): Observable;
getCategory(postId, categoryId, options?: RequestOptionsArgs): Observable;
getTagList(postId, options?: RequestOptionsArgs): Observable;
getTag(postId, tagId, options?: RequestOptionsArgs): Observable;
`

$3

`ts
getList(options?: RequestOptionsArgs): Observable;
get(pageId: number, options?: RequestOptionsArgs): Observable;
create(body: any, options?: RequestOptionsArgs): Observable;
update(pageId: number, body: any, options?: RequestOptionsArgs): Observable;
delete(pageId: number, options?: RequestOptionsArgs): Observable;
getMetaList(pageId: number, options?: RequestOptionsArgs): Observable;
getMeta(pageId: number, metaId: number, options?: RequestOptionsArgs): Observable;
getRevisionList(pageId: number, options?: RequestOptionsArgs): Observable;
getRevision(pageId: number, revisionId: number, options?: RequestOptionsArgs): Observable;
`

$3

`ts
getList(options?: RequestOptionsArgs): Observable;
get(commentId: number, options?: RequestOptionsArgs): Observable;
create(body: any, options?: RequestOptionsArgs): Observable;
update(commentId: number, body: any, options?: RequestOptionsArgs): Observable;
delete(commentId: number, options?: RequestOptionsArgs): Observable;
`

$3

`ts
getList(options?: RequestOptionsArgs): Observable;
get(postType: string, options?: RequestOptionsArgs): Observable;
`

$3

`ts
getList(options?: RequestOptionsArgs): Observable;
get(mediaId: number, options?: RequestOptionsArgs): Observable;
create(body: any, options?: RequestOptionsArgs): Observable;
update(mediaId: number, body: any, options?: RequestOptionsArgs): Observable;
delete(mediaId: number, options?: RequestOptionsArgs): Observable;
`

$3

`ts
getList(options?: RequestOptionsArgs): Observable;
me(options?: RequestOptionsArgs): Observable;
get(userId: number, options?: RequestOptionsArgs): Observable;
create(body: any, options?: RequestOptionsArgs): Observable;
update(userId: number, body: any, options?: RequestOptionsArgs): Observable;
delete(userId: number, options?: RequestOptionsArgs): Observable;
`

$3

`ts
getList(options?: RequestOptionsArgs): Observable;
get(taxonomiesType: string, options?: RequestOptionsArgs): Observable;
`

$3

`ts
getList(options?: RequestOptionsArgs): Observable;
get(statusesName: string, options?: RequestOptionsArgs): Observable;
`

$3

taxonomiesType can be tags, categories and more.

`ts
getList(taxonomiesType: string, options?: RequestOptionsArgs): Observable;
get(taxonomiesType: string, termId: number, options?: RequestOptionsArgs): Observable;
create(taxonomiesType: string, body: any, options?: RequestOptionsArgs): Observable;
update(taxonomiesType: string, termId: number, body: any, options?: RequestOptionsArgs): Observable;
delete(taxonomiesType: string, termId: number, options?: RequestOptionsArgs): Observable;
`

$3

`ts
getList(options?: RequestOptionsArgs): Observable;
get(customId: number, options?: RequestOptionsArgs): Observable;
create(body: any, options?: RequestOptionsArgs): Observable;
update(customId: number, body: any, options?: RequestOptionsArgs): Observable;
delete(customId: number, options?: RequestOptionsArgs): Observable;
`

Authentication

TO BE DEFINED

Contribute

`shell
npm install
cp config.dist.json config.json

Open two terminals

and run watch to build on the lib files changes

npm run watch

in the other terminal run following to build the test page

npm start
`

Open `http://localhost:8080``