WordPress WP-API v2 client for Angular2
npm install wp-api-angular
Angular >=2 services for WordPress >= 4.7 Rest API
================

Angular2 services to consume WP-API v2
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
``shell`
npm install -g typings
npm install wp-api-angular
Nothing special if you use TS
UMD files are available wp-api-angular.umd.js and wp-api-angular.umd.min.js, the Live Demo uses them with systemJS
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 { }
`
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 => {})
}
}
`
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 });
`
`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
`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
`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
`ts`
getList(options?: RequestOptionsArgs): Observable
get(postType: string, options?: RequestOptionsArgs): Observable
`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
`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
`ts`
getList(options?: RequestOptionsArgs): Observable
get(taxonomiesType: string, options?: RequestOptionsArgs): Observable
`ts`
getList(options?: RequestOptionsArgs): Observable
get(statusesName: string, options?: RequestOptionsArgs): Observable
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
`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
TO BE DEFINED
`shell
npm install
cp config.dist.json config.json
Open
`http://localhost:8080``