# wp-angularjs
[](https://travis-ci.org/miya0001/wp-angularjs)
A WP-API Client for [AngularJS](https://angularjs.org/).
## Getting Started
```
$ npm install wp-angularjs --save
```
```html
WP-Angular
```
Demo: http://miya0001.github.io/wp-angularjs/demo/
## Requires
* [AngularJS](https://angularjs.org/)
* [ngResource](https://github.com/angular/angular.js/tree/master/src/ngResource)
* [ngSanitize](https://github.com/angular/angular.js/tree/master/src/ngSanitize)
Recommended:
* [ngInfiniteScroll](https://sroze.github.io/ngInfiniteScroll/)
* [jQuery](https://jquery.com/)
## API Reference
* [<have-posts>](#have-posts)
* [<the-title>](#the-title)
* [<the-content>](#the-content)
* [<the-post-thumbnail>](#the-post-thumbnail)
* [<the-id>](#the-id)
* [<the-excerpt>](#the-excerpt)
* [<the-date>](#the-date)
---
### <have-posts>
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 `media` or 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](https://codex.wordpress.org/Class_Reference/WP_Query)
through via the `filter` argument.
```html
```
---
### <the-title>
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
```
---
### <the-content>
Displays the post content of the current post.
This tag must be used within The ``.
**Example**
```html
```
Then:
```html
Hello World
```
---
### <the-post-thumbnail>
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 is `full`. |
| 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
```
---
### <the-id>
Displays the ID of the current post.
This tag must be used within The ``.
**Example**
```
```
Then:
```
123
```
---
### <the-excerpt>
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.
```
---
### <the-date>
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 import `wp`.
var myapp = angular.module( "myapp", [ "wp" ] );
// Creates a `` as custom template tag.
// If you place it in your HTML,
// then you can get `Hello`.
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](https://sroze.github.io/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
```
