wp-api-ng7

wp-api-angular

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

Fork of buggy1985/wp-api-angular -> wordpress-clients/wp-api-angular

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

Ng 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

npm install wp-api-angular

TypeScript

Nothing special if you use TS

UMD

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 WpApiLoaderFactory is mandatory to be used with AoT compilation or Ionic 2.

import { 
  WpApiModule,
  WpApiLoader,
  WpApiStaticLoader
} from 'wp-api-angular'
 
export function WpApiLoaderFactory() {
  return new WpApiStaticLoader('http://YOUR_DOMAIN/wp-json/', /* namespace is optional, default: '/wp/v2' */);
}
 
@NgModule({
  imports: [
    BrowserModule,
    WpApiModule.forRoot({
      provide: WpApiLoader,
      useFactory: (WpApiLoaderFactory)
    })
  ],
  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:

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

RequestOptionsArgs

Every request can have an optional httpOptions object.

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

import { HttpHeaders } from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({
    '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(httpOptions);

WpApiPosts

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

WpApiPages

  getList(options?: object): Observable<object>;
  get(pageId: number, options?: object): Observable<object>;
  create(body: any, options?: object): Observable<object>;
  update(pageId: number, body: any, options?: object): Observable<object>;
  delete(pageId: number, options?: object): Observable<object>;
  getMetaList(pageId: number, options?: object): Observable<object>;
  getMeta(pageId: number, metaId: number, options?: object): Observable<object>;
  getRevisionList(pageId: number, options?: object): Observable<object>;
  getRevision(pageId: number, revisionId: number, options?: object): Observable<object>;

WpApiComments

  getList(options?: object): Observable<object>;
  get(commentId: number, options?: object): Observable<object>;
  create(body: any, options?: object): Observable<object>;
  update(commentId: number, body: any, options?: object): Observable<object>;
  delete(commentId: number, options?: object): Observable<object>;

WpApiTypes

  getList(options?: object): Observable<object>;
  get(postType: string, options?: object): Observable<object>;

WpApiMedia

  getList(options?: object): Observable<object>;
  get(mediaId: number, options?: object): Observable<object>;
  create(body: any, options?: object): Observable<object>;
  update(mediaId: number, body: any, options?: object): Observable<object>;
  delete(mediaId: number, options?: object): Observable<object>;

WpApiUsers

  getList(options?: object): Observable<object>;
  me(options?: object): Observable<object>;
  get(userId: number, options?: object): Observable<object>;
  create(body: any, options?: object): Observable<object>;
  update(userId: number, body: any, options?: object): Observable<object>;
  delete(userId: number, options?: object): Observable<object>;

WpApiTaxonomies

  getList(options?: object): Observable<object>;
  get(taxonomiesType: string, options?: object): Observable<object>;

WpApiStatuses

  getList(options?: object): Observable<object>;
  get(statusesName: string, options?: object): Observable<object>;

WpApiTerms

taxonomiesType can be tags, categories and more.

  getList(taxonomiesType: string, options?: object): Observable<object>;
  get(taxonomiesType: string, termId: number, options?: object): Observable<object>;
  create(taxonomiesType: string, body: any, options?: object): Observable<object>;
  update(taxonomiesType: string, termId: number, body: any, options?: object): Observable<object>;
  delete(taxonomiesType: string, termId: number, options?: object): Observable<object>;

WpApiCustom

  getList(options?: object): Observable<object>;
  get(customId: number, options?: object): Observable<object>;
  create(body: any, options?: object): Observable<object>;
  update(customId: number, body: any, options?: object): Observable<object>;
  delete(customId: number, options?: object): Observable<object>;

Authentication

TO BE DEFINED

Contribute

npm install
 
# 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