Angular >=2 services for WordPress >= 4.7 Rest API
================
Join the chat at https://gitter.im/shprink/wp-api-angular
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
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 WpApiLoaderFactory is mandatory to be used with AoT compilation or Ionic 2.
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:
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.
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 });
getList(options?: RequestOptionsArgs): Observable<Response>; get(postId, options?: RequestOptionsArgs): Observable<Response>; create(body: any, options?: RequestOptionsArgs): Observable<Response>; update(postId, body: any, options?: RequestOptionsArgs): Observable<Response>; delete(postId, options?: RequestOptionsArgs): Observable<Response>; getMetaList(postId, options?: RequestOptionsArgs): Observable<Response>; getMeta(postId, metaId, options?: RequestOptionsArgs): Observable<Response>; getRevisionList(postId, options?: RequestOptionsArgs): Observable<Response>; getRevision(postId, revisionId, options?: RequestOptionsArgs): Observable<Response>; getCategoryList(postId, options?: RequestOptionsArgs): Observable<Response>; getCategory(postId, categoryId, options?: RequestOptionsArgs): Observable<Response>; getTagList(postId, options?: RequestOptionsArgs): Observable<Response>; getTag(postId, tagId, options?: RequestOptionsArgs): Observable<Response>;
getList(options?: RequestOptionsArgs): Observable<Response>; get(pageId: number, options?: RequestOptionsArgs): Observable<Response>; create(body: any, options?: RequestOptionsArgs): Observable<Response>; update(pageId: number, body: any, options?: RequestOptionsArgs): Observable<Response>; delete(pageId: number, options?: RequestOptionsArgs): Observable<Response>; getMetaList(pageId: number, options?: RequestOptionsArgs): Observable<Response>; getMeta(pageId: number, metaId: number, options?: RequestOptionsArgs): Observable<Response>; getRevisionList(pageId: number, options?: RequestOptionsArgs): Observable<Response>; getRevision(pageId: number, revisionId: number, options?: RequestOptionsArgs): Observable<Response>;
getList(options?: RequestOptionsArgs): Observable<Response>; get(commentId: number, options?: RequestOptionsArgs): Observable<Response>; create(body: any, options?: RequestOptionsArgs): Observable<Response>; update(commentId: number, body: any, options?: RequestOptionsArgs): Observable<Response>; delete(commentId: number, options?: RequestOptionsArgs): Observable<Response>;
getList(options?: RequestOptionsArgs): Observable<Response>; get(postType: string, options?: RequestOptionsArgs): Observable<Response>;
getList(options?: RequestOptionsArgs): Observable<Response>; get(mediaId: number, options?: RequestOptionsArgs): Observable<Response>; create(body: any, options?: RequestOptionsArgs): Observable<Response>; update(mediaId: number, body: any, options?: RequestOptionsArgs): Observable<Response>; delete(mediaId: number, options?: RequestOptionsArgs): Observable<Response>;
getList(options?: RequestOptionsArgs): Observable<Response>; me(options?: RequestOptionsArgs): Observable<Response>; get(userId: number, options?: RequestOptionsArgs): Observable<Response>; create(body: any, options?: RequestOptionsArgs): Observable<Response>; update(userId: number, body: any, options?: RequestOptionsArgs): Observable<Response>; delete(userId: number, options?: RequestOptionsArgs): Observable<Response>;
getList(options?: RequestOptionsArgs): Observable<Response>; get(taxonomiesType: string, options?: RequestOptionsArgs): Observable<Response>;
getList(options?: RequestOptionsArgs): Observable<Response>; get(statusesName: string, options?: RequestOptionsArgs): Observable<Response>;
taxonomiesType can be tags, categories and more.
getList(taxonomiesType: string, options?: RequestOptionsArgs): Observable<Response>; get(taxonomiesType: string, termId: number, options?: RequestOptionsArgs): Observable<Response>; create(taxonomiesType: string, body: any, options?: RequestOptionsArgs): Observable<Response>; update(taxonomiesType: string, termId: number, body: any, options?: RequestOptionsArgs): Observable<Response>; delete(taxonomiesType: string, termId: number, options?: RequestOptionsArgs): Observable<Response>;
getList(options?: RequestOptionsArgs): Observable<Response>; get(customId: number, options?: RequestOptionsArgs): Observable<Response>; create(body: any, options?: RequestOptionsArgs): Observable<Response>; update(customId: number, body: any, options?: RequestOptionsArgs): Observable<Response>; delete(customId: number, options?: RequestOptionsArgs): Observable<Response>;
TO BE DEFINED
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