npm install wp-angularjs

wp-angularjs

![Build Status](https://travis-ci.org/miya0001/wp-angularjs)

A WP-API Client for AngularJS.

Getting Started

``$ npm install wp-angularjs --save`

`html WP-Angular post-type="posts" offset="0" per-page="5">


Demo: http://miya0001.github.io/wp-angularjs/demo/
Requires
* AngularJS
	* ngResource
	* ngSanitize
Recommended:
* ngInfiniteScroll
* jQuery
API Reference
* <have-posts>
* <the-title>
* <the-content>
* <the-post-thumbnail>
* <the-id>
* <the-excerpt>
* <the-date>
---
$3

The

havePosts

 directive is a WordPress loop.
Attributes

| Attribute | Type | Details | |-----------|--------|----------------------------------------------------------------| | api-root | string | Root url of the API. e.g. http://example.com/wp-json/wp/v2 | | post-type | string |posts or pages or mediaor custom post type. | | per-page | number | The number of posts per page. Default is 10. | | offset | number | The number of post to displace or pass over. Default is 0. | | post-id | number | The ID of the post. | | filter | object | The object of the filter. |

Example`html

If you want to get single post, you can use post-id.

`html

You can pass filters to WP_Query through via thefilter argument.

`html filter="{ order: 'ASC', cat: 123 }">


---
$3

Displays the post title of the current post.
This tag must be used within The

.
Attributes

| Attribute | Type | Details | |-----------|--------|----------------------------------------------------------------| | href | string | Specify a link URL like#/app/posts/:id. |

Example`html`Then:`html

Hello World


If you need a link to the post on your app. Please add

href

 as attribute.

html


Then:

html
Hello World

:id is a placeholder of the post's id. You can use :slug

 as post's slug too.

html


Then:

html
Hello World


---
$3

Displays the post content of the current post.
This tag must be used within The

.

Example`html`Then:`html

Hello World


---
$3

Displays the post thumbnail of the current post.
This tag must be used within The

.
Attributes

| Attribute | Type | Details | |-----------|--------|----------------------------------------------------------------| | size | string | Size of the post thumbnail. Default isfull. | | href | string | Specify a link URL like#/app/posts/:id. |

Example`html`Then:`


Uses

size

 attribute.

html


Then:


If you need a link to the post on your app. Please add

href

 as attribute.

html


Then:

html

:id is a placeholder of the post's id. You can use :slug as post's slug too.

`html`Then:`html


---
$3

Displays the ID of the current post.
This tag must be used within The

.

Example``Then:`

123


---
$3

Displays the excerpt of the current post.
This tag must be used within The

.

Example Place the code like following into your HTML.``Then you will get like following.`

Hello World.


---
$3

Displays the date of the current post.
This tag must be used within The

.
Attributes
| Attribute | Type   | Details                                                        |
|-----------|--------|----------------------------------------------------------------|
| format    | string | See https://docs.angularjs.org/api/ng/filter/date              |

Example Place the code like following into your HTML.``Then you will get like following.`

2016-02-16 13:54:13

You can set format string like following. See https://docs.angularjs.org/api/ng/filter/date.``Then you will get like following.`

2016-02-16


---
Creates your custom template tag

`js // Registers your module, you should importwp. var myapp = angular.module( "myapp", [ "wp" ] );

// Creates a as custom template tag. // If you place it in your HTML, // then you can getHello. myapp.directive( "myPermalink", [ '$sce', function( $sce ) { return{ restrict:'E', replace: true, require : '^havePosts', compile: function( tElement, tAttrs, transclude ) { return { post: function postLink( scope, element, attrs, controller ) { var post = scope.$parent.post; // post object scope.post_id = post.id; scope.title = post.title.rendered; } } }, template: "{{ title }}" } } ] );`

`Enables Infinite Scroll`

Please load ngInfiniteScroll like following.

`html`

Add infinite-scroll as a dependency.

`js angular.module( "app", [ "wp", "infinite-scroll" ] );`

That's it.

`How to contribute`

`$ npm install`

Run testing.

`$ npm test`

Build js/wp-angular.min.js.

`$ npm run build`

Build documentation.

`$ npm run docs``

npm install wp-angularjs

wp-angularjs

![Build Status](https://travis-ci.org/miya0001/wp-angularjs)

A WP-API Client for AngularJS.

Getting Started

``$ npm install wp-angularjs --save`

`html WP-Angular post-type="posts" offset="0" per-page="5">


Demo: http://miya0001.github.io/wp-angularjs/demo/
Requires
* AngularJS
	* ngResource
	* ngSanitize
Recommended:
* ngInfiniteScroll
* jQuery
API Reference
* <have-posts>
* <the-title>
* <the-content>
* <the-post-thumbnail>
* <the-id>
* <the-excerpt>
* <the-date>
---
$3

The

havePosts

 directive is a WordPress loop.
Attributes

Example`html

If you want to get single post, you can use post-id.

`html

You can pass filters to WP_Query through via thefilter argument.

`html filter="{ order: 'ASC', cat: 123 }">


---
$3

Displays the post title of the current post.
This tag must be used within The

.
Attributes

| Attribute | Type | Details | |-----------|--------|----------------------------------------------------------------| | href | string | Specify a link URL like#/app/posts/:id. |

Example`html`Then:`html

Hello World


If you need a link to the post on your app. Please add

href

 as attribute.

html


Then:

html
Hello World

:id is a placeholder of the post's id. You can use :slug

 as post's slug too.

html


Then:

html
Hello World


---
$3

Displays the post content of the current post.
This tag must be used within The

.

Example`html`Then:`html

Hello World


---
$3

Displays the post thumbnail of the current post.
This tag must be used within The

.
Attributes

Example`html`Then:`


Uses

size

 attribute.

html


Then:


If you need a link to the post on your app. Please add

href

 as attribute.

html


Then:

html

:id is a placeholder of the post's id. You can use :slug as post's slug too.

`html`Then:`html


---
$3

Displays the ID of the current post.
This tag must be used within The

.

Example``Then:`

123


---
$3

Displays the excerpt of the current post.
This tag must be used within The

.

Example Place the code like following into your HTML.``Then you will get like following.`

Hello World.


---
$3

Displays the date of the current post.
This tag must be used within The

.
Attributes
| Attribute | Type   | Details                                                        |
|-----------|--------|----------------------------------------------------------------|
| format    | string | See https://docs.angularjs.org/api/ng/filter/date              |

Example Place the code like following into your HTML.``Then you will get like following.`

2016-02-16 13:54:13

You can set format string like following. See https://docs.angularjs.org/api/ng/filter/date.``Then you will get like following.`

2016-02-16


---
Creates your custom template tag

`js // Registers your module, you should importwp. var myapp = angular.module( "myapp", [ "wp" ] );

`Enables Infinite Scroll`

Please load ngInfiniteScroll like following.

`html`

Add infinite-scroll as a dependency.

`js angular.module( "app", [ "wp", "infinite-scroll" ] );`

That's it.

`How to contribute`

`$ npm install`

Run testing.

`$ npm test`

Build js/wp-angular.min.js.

`$ npm run build`

Build documentation.

`$ npm run docs``