New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

ng2-wp-api

Package Overview
Dependencies
Maintainers
1
Versions
47
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ng2-wp-api - npm Package Compare versions

Comparing version

1.2.0
to
1.2.1

2

components/collection/collection.component.d.ts

@@ -7,3 +7,3 @@ import { EventEmitter, SimpleChange } from '@angular/core';

endpoint: any;
args: any;
args: {};
/** Output for the response */

@@ -10,0 +10,0 @@ response: EventEmitter<{}>;

1

components/collection/collection.component.js

@@ -16,2 +16,3 @@ "use strict";

this.wpCollection = wpCollection;
this.args = {};
/** Output for the response */

@@ -18,0 +19,0 @@ this.response = new core_1.EventEmitter();

2

components/collection/collection.component.ts

@@ -15,3 +15,3 @@ import {Component, Input, Output, EventEmitter, SimpleChange} from '@angular/core';

@Input() endpoint;
@Input() args;
@Input() args = {};

@@ -18,0 +18,0 @@ /** Output for the response */

24

examples/Collection using the component.ts

@@ -31,3 +31,3 @@ /*

`,
directives: [Collection]
directives: [Collection, Item]
})

@@ -76,3 +76,3 @@

*
* but we definitly need to call `collection.more()` to get more Posts.
* Use `collection.more()` to get more Posts.
*

@@ -83,6 +83,4 @@ * Some might be interested to check if the service has more collection to get, use `hasMore()`

/* This is optional if you want to make use of Post class.
* Create a view component for post item.
* Create Post class from the `@Input data`.
*/
/** Optional component to use Post class */
import {Post} from 'ng2-wp-api/ng2-wp-api';

@@ -93,9 +91,10 @@

template: `
<div class="post-title"> {{post.title()}} </div>
<div class="post">
<div class="post-title"> {{response.title()}} </div>
<div class="post-image">
<img [src]="post.featuredImageUrl('small')"/>
<img [src]="response.featuredImageUrl('small')"/>
</div>
<div class="post-excerpt" [innerHtml]="post.excerpt()">
<div class="post-excerpt" [innerHtml]="response.excerpt()">
</div>
`,
directives: [Collection]
})

@@ -106,8 +105,9 @@

@Input() data;
post: Post;
post: response;
ngOnInit() {
this.post = new Post(this.data);
/* Create Post class from the `@Input data`. */
this.response = new Post(this.data);
}
}

44

examples/Model using the component.ts

@@ -8,13 +8,6 @@ import {Component} from '@angular/core';

<model [endpoint]="endpoint" [id]="id" (response)="pageData($event)">
<div class="post-title"> {{response.title()}} </div>
<div class="post-image">
<img [src]="response.featuredImageUrl('large')"/>
</div>
<div class="post-content" [innerHtml]="response.content()">
<ul class="post-categories">
<li *ngFor="let cat of response.categories()"> {{cat.name}} </li>
</ul>
<single [data]="response"></single>
</model>
`,
directives: [Model]
directives: [Single, Model]
})

@@ -41,2 +34,33 @@ export class TestModel {

}
}
}
/** Optional component to use Post class */
import {Post} from 'ng2-wp-api/ng2-wp-api';
@Component({
selector: 'single',
template: `
<div class="post">
<div class="post-title"> {{response.title()}} </div>
<div class="post-image">
<img [src]="response.featuredImageUrl('large')"/>
</div>
<div class="post-content" [innerHtml]="response.content()">
<ul class="post-categories">
<li *ngFor="let cat of response.categories()"> {{cat.name}} </li>
</ul>
</div>
`,
})
export class Single {
@Input() data;
post: response;
ngOnInit() {
/* Create Post class from the `@Input data`. */
this.response = new Post(this.data);
}
}

2

package.json
{
"name": "ng2-wp-api",
"version": "1.2.0",
"version": "1.2.1",
"description": "WordPress API Service for Angular2",

@@ -5,0 +5,0 @@ "main": "./index.js",

193

README.md

@@ -1,2 +0,2 @@

# Angular2 WordPress API Service
# Angular2 WordPress API Service Beta

@@ -7,11 +7,11 @@ [![npm version](https://badge.fury.io/js/ng2-wp-api.svg)](https://badge.fury.io/js/ng2-wp-api) [![Build Status](https://travis-ci.org/MurhafSousli/ng2-wp-api.svg?branch=master)](https://travis-ci.org/MurhafSousli/ng2-wp-api)

## Purpose
# Purpose
This library is designed to make it easy for your Angular2 application to request specific resources from a WordPress install. it returns the API server's response to your application as an `Observable<any>` object.
## Requirments
# Requirments
Wordpress site and WP API v2 plugin activated.
**Wordpress** installation and **WP API v2** plugin activated.
## Installing
# Installing

@@ -22,7 +22,7 @@ Install it with npm

## Table of Contents
# Table of Contents
- [Abstract](#abstract)
- [Usage](#usage)
- [Initilizing](#initializing)
- [Initialization](#Initialization)
- [Getting Collection](#collection)

@@ -40,5 +40,4 @@ - [Method 1: using component](#collectionCmp)

<a name="abstract"/>
## Abstract
# Abstract
The library offers:

@@ -59,2 +58,7 @@ Components:

Helper:
- `Endpoint` Default endpoints.
**Default Endpoints** are : `Posts`, `Pages`, `Users`, `Categories`, `Tags`, `Taxonomies`, `Statuses`, `Comments`, `Media`
```

@@ -82,17 +86,22 @@ WpCollection

WpHelper
├── Endpoint: enum
```
**Default Endpoints** are : `Posts`, `Pages`, `Users`, `Categories`, `Tags`, `Taxonomies`, `Statuses`, `Comments`, `Media`
<a name="usage"/>
## Usage
# Usage
<a name="initializing"/>
### Initialization
After installing the library, set your WordPress base address
First of all, we must initialize the library's configuration in `WpState` service, set the `baseUrl` to the wordpress host address (must be done within the root component).
<a name="Initialization"/>
## Initialization
Inject `WORDPRESS_PROVIDERS` in the root component provider or directly in bootstrap, because we only want one global instance of `WpState`.
To initialize the library's configuration
1 - import `WpState` service in your root component, then set the `baseUrl` to your WordPress host address
2 - Inject `WORDPRESS_PROVIDERS` in the root component provider or directly in bootstrap.
in App component (root):

@@ -107,3 +116,3 @@ ```

constructor(wpState: WpState){
wpState.setBaseUrl("http://yourWordPressDomain.com");
wpState.setBaseUrl("http://yourWordPressSite.com");
}

@@ -114,2 +123,3 @@ }

`WpState` *is a global service where other services can acquire information.*

@@ -119,21 +129,33 @@ Now the library is initialized, the services `WpModel` and `WpCollection` are ready to use in any component.

<a name="collection"/>
### Getting a collection of posts
## Getting a collection of posts
<a name="collectionCmp"/>
**METHOD 1:** The component way
### **METHOD 1:** The component way
The basic usage is to get to display a collection of posts
```
import {Collection, WpHelper, QueryArgs} from 'ng2-wp-api/ng2-wp-api';
<collection [args]="args" [endpoint]="endpoint" (response)="postsData($event)">
<!-- your custom view -->
<div class="post" *ngFor="let post of response.objects">
<h1>{{post.title}}</h1>
<p [innerHtml]="post.content"></p>
</div>
</collection>
<div class="pagination">
<p>Page: {{response.currentPage}} / {{response.totalPages}} </p><span> - Total Posts: {{response.totalObjects}}</span>
</div>
```
It's recommended to create item component for each post item
```
@Component({
selector: 'test-collection',
selector: 'item',
template: `
<collection [args]="args" [endpoint]="endpoint" (response)="postsData($event)">
<item *ngFor="let post of response.objects" [data]="post"></item>
</collection>
<div class="pagination">
<p>Page: {{response.currentPage}} / {{response.totalPages}} </p><span> - Total Posts: {{response.totalObjects}}</span>
<button *ngIf="collection.hasMore()" (click)="morePosts()"> Load more</button>
</div>
<div class="post-title"> {{post.title()}} </div>
<div class="post-image">
<img [src]="post.featuredImageUrl('small')"/>
</div>
<div class="post-excerpt" [innerHtml]="post.excerpt()">
`,

@@ -143,34 +165,23 @@ directives: [Collection]

export class TestCollection {
export class Item {
/** set the endpoint of collection */
endpoint = WpHelper.Endpoint.Posts;
args:QueryArgs;
@Input() data;
post: Post;
response;
/** reference for Collection, so we can use its functions */
@ViewChild(Collection) collection:Collection;
/** collection output */
postsData(event) {
if (event.error) {
/** handle collection request error */
console.log(event.error);
}
else {
this.response = event;
}
ngOnInit() {
this.post = new Post(this.data);
}
/** get more posts */
morePosts(){
this.collection.more();
}
}
```
[Getting collection using the component - full example](/examples/Getting Collection.ts)
in parent component
```
<collection [args]="args" [endpoint]="endpoint" (response)="postsData($event)">
<item *ngFor="let post of response.objects" [data]="post"></item>
</collection>
```
[Getting collection using the component - full example](/examples/Collection using the component.ts)
<a name="collectionSrv"/>
**METHOD 2:** The service way
### **METHOD 2:** The service way

@@ -234,53 +245,63 @@ ```

<a name="model"/>
### Getting a single post by ID
## Getting a single post by ID
<a name="modelCmp"/>
**METHOD 1:** The component way
### **METHOD 1:** The component way
```
import {Model, WpHelper, Post} from 'ng2-wp-api/ng2-wp-api';
<model [endpoint]="endpoint" [id]="id" (response)="pageData($event)">
<div class="post>
<div class="post-title"> {{response.title()}} </div>
<div class="post-image">
<img [src]="response.featuredImageUrl('large')"/>
</div>
<div class="post-content" [innerHtml]="response.content()">
<ul class="post-categories">
<li *ngFor="let cat of response.categories()"> {{cat.name}} </li>
</ul>
<div>
</model>
```
It's recommended to create view component to display the post
```
import {Post} from 'ng2-wp-api/ng2-wp-api';
@Component({
selector: 'test-model',
selector: 'single',
template: `
<model [endpoint]="endpoint" [id]="id" (response)="pageData($event)">
<div class="post">
<div class="post-title"> {{response.title()}} </div>
<div class="post-image">
<img [src]="response.featuredImageUrl('large')"/>
<img [src]="response.featuredImageUrl('large')"/>
</div>
<div class="post-content" [innerHtml]="response.content()">
<ul class="post-categories">
<li *ngFor="let cat of response.categories()"> {{cat.name}} </li>
<li *ngFor="let cat of response.categories()"> {{cat.name}} </li>
</ul>
</model>
</div>
`,
directives: [Model]
})
export class TestModel {
export class Single {
endpoint = WpHelper.Endpoint.Pages;
id;
response;
@Input() data;
post: response;
ngOnInit() {
/** get page where id = 123 */
this.id = 123;
/* Create Post class from the `@Input data`. */
this.response = new Post(this.data);
}
pageData(event) {
if (event.error) {
/** handle model request error */
console.log(event.error);
}
else {
this.response = new Post(event.object);
}
}
}
```
in parent component
```
<model [endpoint]="endpoint" [id]="id" (response)="pageData($event)">
<single [data]="response"></single>
</model>
```
[Getting model by id - full example](/examples/Model using the component.ts)
[Getting model using the component - full example](/examples/Model using the component.ts)
<a name="modelSrv"/>
**METHOD 2:** The service way
### **METHOD 2:** The service way

@@ -333,3 +354,3 @@ ```

```
[Getting model by id - full example](/examples/Model using the service.ts)
[Getting model using the service - full example](/examples/Model using the service.ts)

@@ -339,3 +360,3 @@ *PS: when embed is set to true, you will get featured image, categories, tags and author with the response.*

<a name="authentication"/>
## Authentication
# Authentication

@@ -360,8 +381,8 @@ In order to use Add/Update/Delete functions, user must be authenticated. use `WpState.setAuthKeys($username, $password)` to store user credentials.

<a name="issues"/>
## Issues
# Issues
If you identify any errors in this service, or have an idea for an improvement, please open an [issue](https://github.com/MurhafSousli/ng2-wp-api/issues). I am excited to see what the community thinks of this project, and I would love your input!
The library is still in beta, if you identify any errors in this service, or have an idea for an improvement, please open an [issue](https://github.com/MurhafSousli/ng2-wp-api/issues). I am excited to see what the community thinks of this project, and I would love your input!
<a name="license"/>
## License
# License

@@ -368,0 +389,0 @@ [![npm](https://img.shields.io/npm/l/express.svg?maxAge=2592000)](/LICENSE)

components/collection/collection.component.js.map

Sorry, the diff of this file is not supported yet