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. Run gulp to generate build files and installable plugin zip file

gulp gen-plugin

4. Upload the plugin zip file to WordPress plguins and activate

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() {
    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