Note: This plugin is under active development

Install on WordPress

1. Install and activate WP-Rest-API v2

2. Download the latest angular_wp.zip file from Github

3. Finally, install and activate Angularize-WP

For Development (customize & install)

1. Clone the repo Github

git clone https://github.com/justiceo/Angularize-wp

2. Install npm dependencies

npm install

3. Finally, build to generate plugin files

webpack -p

All Done!

Now you can drop in AngularJs directives, components and providers anywhere in your WordPress site

Below is an example of an angular hello world component in a WordPress site.

<!-- Paste this inside a post, page, widget, header etc -->
<echo></echo>
<script type="text/javascript" defer data-manual>
  document.addEventListener("DOMContentLoaded", function() {
    angular.module("angularize").component("echo", {
      template: 'Hello World!',
      controller: function() {}
    })
  });
</script>
      

A step beyond Hello World!

Below is the actual source for the all too famous Recent posts widget.

export class RecentPostsCtrl {
    constructor(RestApi) {
        RestApi.ready().then(
            $wp_v2 => {
                this.posts = $wp_v2.posts({'per_page': 5})
                this.posts.get();
            }
        )
    }
}

let RecentPosts = {
    controller: RecentPostsCtrl,
    template: `
    <h2>Recent Posts</h2>
    <ul>
        <li ng-repeat="post in $ctrl.posts">
            <a href="{{ post.attr('link') }}">
                {{ post.attr('title') }}
            </a>
        </li>
    </ul>
    `
}
export default RecentPosts;
      

How simple is that? And on the bright side, you can now display recent posts anywhere on the page, not just the sidebar