wp-angularjs

A WP-API Client for AngularJS.

Getting Started

$ npm install wp-angularjs --save

<!DOCTYPE html>
<html ng-app="wp">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="path/to/style.css">
    <title>WP-Angular</title>
    <script src="path/to/angularjs/1.5.0/angular.min.js"></script> 
    <script src="path/to/angularjs/1.5.0/angular-resource.min.js"></script> 
    <script src="path/to/angularjs/1.5.0/angular-sanitize.min.js"></script> 
    <script src="path/to/wp-angular.min.js"></script> 
</head>
<body>
    <have-posts api-root="http://example.com/wp-json/wp/v2"
                        post-type="posts" offset="0" per-page="5">
        <header class="entry-header">
            <the-post-thumbnail size="post-thumbnaiil"></the-post-thumbnail>
            <h1 class="entry-title"><the-title></the-title></h1>
            <div class="entry-meta">
                <the-date format="yyyy/mm/dd"></the-date>
            </div>
        </header>
        <div class="entry-content">
            <the-content></the-content>
        </div>
    </have-posts>
</body>
</html>

Demo: http://miya0001.github.io/wp-angularjs/demo/

Requires

AngularJS
- ngResource
- ngSanitize

Recommended:

API Reference

<have-posts>
<the-title>
<the-content>
<the-post-thumbnail>
<the-id>
<the-excerpt>
<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

<have-posts api-root="http://example.com" post-type="posts">
  <h2 class="entry-title"><the-title></the-title></h2>
  <div class="entry-content"><the-content></the-content></div>
</have-posts>

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

<have-posts api-root="http://example.com" post-type="posts" post-id="123">
  <h2 class="entry-title"><the-title></the-title></h2>
  <div class="entry-content"><the-content></the-content></div>
</have-posts>

You can pass filters to WP_Query through via the filter argument.

<have-posts api-root="http://example.com" post-type="posts"
           filter="{ order: 'ASC', cat: 123 }">
  <h2 class="entry-title"><the-title></the-title></h2>
  <div class="entry-content"><the-content></the-content></div>
</have-posts>

<the-title>

Displays the post title of the current post. This tag must be used within The <have-posts>.

Attributes

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

Example

<the-title></the-title>

Then:

<div class="the-title">Hello World</div>

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

<the-title href="#/posts/:id"></the-title>

Then:

<div class="the-title"><a href="#/posts/123">Hello World</a></div>

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

<the-title href="#/posts/:slug"></the-title>

Then:

<div class="the-title"><a href="#/posts/hello-world">Hello World</a></div>

<the-content>

Displays the post content of the current post. This tag must be used within The <have-posts>.

Example

<the-content></the-content>

Then:

<div class="the-content"><p>Hello World</p></div>

<the-post-thumbnail>

Displays the post thumbnail of the current post. This tag must be used within The <have-posts>.

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

<the-post-thumbnail></the-post-thumbnail>

Then:

<div class="the-post-thumbnail"><img src="http://example.com/image.jpg"></div>

Uses size attribute.

<the-post-thumbnail size="full"></the-post-thumbnail>

Then:

<div class="the-post-thumbnail"><img src="http://example.com/image.jpg"></div>

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

<the-post-thumbnail href="#/posts/:id"></the-post-thumbnail>

Then:

<div class="the-post-thumbnail">
  <a href="#/posts/123"><img src="http://example.com/image.jpg"></a>
</div>

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

<the-post-thumbnail href="#/posts/:slug"></the-post-thumbnail>

Then:

<div class="the-post-thumbnail">
  <a href="#/posts/123"><img src="http://example.com/image.jpg"></a>
</div>

<the-id>

Displays the ID of the current post. This tag must be used within The <have-posts>.

Example

<the-id></the-id>

Then:

<div class="the-id">123</div>

<the-excerpt>

Displays the excerpt of the current post. This tag must be used within The <have-posts>.

Example
Place the code like following into your HTML.

<the-excerpt></the-excerpt>

Then you will get like following.

<div class="the-excerpt"><p>Hello World.</p></div>

<the-date>

Displays the date of the current post. This tag must be used within The <have-posts>.

Attributes

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

Example
Place the code like following into your HTML.

<the-date></the-date>

Then you will get like following.

<div class="the-date">2016-02-16 13:54:13</div>

You can set format string like following. See https://docs.angularjs.org/api/ng/filter/date.

<the-date format="yyyy/MM/dd"></the-date>

Then you will get like following.

<div class="the-date">2016-02-16</div>

Creates your custom template tag

// Registers your module, you should import `wp`.
var myapp = angular.module( "myapp", [ "wp" ] );
 
// Creates a `<my-permalink></my-permalink>` as custom template tag.
// If you place it in your HTML,
// then you can get `<a href="#!/post/123">Hello</a>`.
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: "<a ng-href=\"#!/post/{{ post_id }}\">{{ title }}</a>"
    }
} ] );

Enables Infinite Scroll

Please load ngInfiniteScroll like following.

<script src="path/to/jquery.min.js"></script>
<script src="path/to/angularjs/1.5.0/angular.min.js"></script>
<script src="path/to/angularjs/1.5.0/angular-resource.min.js"></script>
<script src="path/to/angularjs/1.5.0/angular-sanitize.min.js"></script>
<script src="path/to/ng-infinite-scroll.min.js"></script>

Add infinite-scroll as a dependency.

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

wp-angularjs

wp-angularjs

Getting Started

Requires

API Reference

<have-posts>

<the-title>

<the-content>

<the-post-thumbnail>

<the-id>

<the-excerpt>

<the-date>

Creates your custom template tag

Enables Infinite Scroll

How to contribute

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Last publish

Collaborators

wp-angularjs

wp-angularjs

Getting Started

Requires

API Reference

<have-posts>

<the-title>

<the-content>

<the-post-thumbnail>

<the-id>

<the-excerpt>

<the-date>

Creates your custom template tag

Enables Infinite Scroll

How to contribute

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Last publish

Collaborators

Weekly Downloads