Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/wordpress-clients/wp-api-angular

Angular (>=2) services for WordPress WP-API(v2) or WP >= 4.7 (natively supports WP-API)
https://github.com/wordpress-clients/wp-api-angular

angular wordpress wordpress-api

Last synced: about 19 hours ago
JSON representation

Angular (>=2) services for WordPress WP-API(v2) or WP >= 4.7 (natively supports WP-API)

Host: GitHub
URL: https://github.com/wordpress-clients/wp-api-angular
Owner: wordpress-clients
License: other
Created: 2014-12-14T10:55:32.000Z (about 10 years ago)
Default Branch: develop
Last Pushed: 2021-01-09T16:48:18.000Z (almost 4 years ago)
Last Synced: 2024-05-22T04:32:28.704Z (7 months ago)
Topics: angular, wordpress, wordpress-api
Language: TypeScript
Homepage:
Size: 975 KB
Stars: 264
Watchers: 36
Forks: 90
Open Issues: 12
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

awesome-angular-components - wp-api-angular - Angular (>=2) services for WordPress WP-API(v2) or WP >= 4.7 (natively supports WP-API). (Uncategorized / Uncategorized)

README

        


  
wp-api-angular

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


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

[![Join the chat at https://gitter.im/shprink/wp-api-angular](https://badges.gitter.im/shprink/wp-api-angular.svg)](https://gitter.im/shprink/wp-api-angular?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

Angular2 services to consume [WP-API v2](http://v2.wp-api.org/)

[Live Demo](https://plnkr.co/edit/hqE4bvbM6HXql5Insjx8?p=preview)

If you want to use AngularJS v1, here is the latest version: [v2.0.0-rc3](https://www.npmjs.com/package/wp-api-angularjs). `npm i [email protected]`

## Installation

```shell

npm install -g typings

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](https://plnkr.co/edit/hqE4bvbM6HXql5Insjx8?p=preview) uses them with systemJS

## Bootstrap

An exported function `WpApiLoaderFactory` is mandatory to be used with [AoT compilation](https://angular.io/docs/ts/latest/cookbook/aot-compiler.html) or [Ionic 2](http://ionic.io/).

```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 => {})

  }

}

```

### RequestOptionsArgs

Every request can have an optional [`RequestOptionsArgs`](https://angular.io/docs/ts/latest/api/http/index/RequestOptionsArgs-interface.html) 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 });

```

### WpApiPosts

```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;

```

### WpApiPages

```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;

```

### WpApiComments

```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;

```

### WpApiTypes

```ts

  getList(options?: RequestOptionsArgs): Observable;

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

```

### WpApiMedia

```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;

```

### WpApiUsers

```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;

```

### WpApiTaxonomies

```ts

  getList(options?: RequestOptionsArgs): Observable;

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

```

### WpApiStatuses

```ts

  getList(options?: RequestOptionsArgs): Observable;

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

```

### WpApiTerms

`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;

```

### WpApiCustom

```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```