Angularize WordPress

Super-charge your WordPress site with AngularJs components

Download View on Github

Note: This plugin is under active development

Install on WordPress

1. Download the latest angular_wp.zip file from Github

2. Install and activate WP-Rest-API v2

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(PostService) {
        PostService.get_posts().then(            
            posts => this.posts = posts.slice(0,5)  // take top 5       
        );
    }
}

let RecentPosts = {
    controller: RecentPostsCtrl,
    template: `
    <h2>Recent Posts</h2>
    <ul>
        <li ng-repeat="post in $ctrl.posts">
            <a href="{{ post.link }}">
                {{ post.title.rendered }}
            </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

Included Directives

Author Popover

Echo component (just for test)

Book Flight Component

Author Popover