WP-API client for AngularJS
npm install wp-angularjs
A WP-API Client for AngularJS.
```
$ npm install wp-angularjs --save
`html`
Demo: http://miya0001.github.io/wp-angularjs/demo/
* AngularJS
* ngResource
* ngSanitize
Recommended:
* <have-posts>
* <the-title>
* <the-content>
* <the-post-thumbnail>
* <the-id>
* <the-excerpt>
* <the-date>
---
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
through via the
filter 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
`
:id is a placeholder of the post's id. You can use :slug as post's slug too.
`html
`
Then:
`html
`
---
$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 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
`
---
$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 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 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
``