Super-charge your WordPress site with AngularJs components
Download View on GithubNote: This plugin is under active development
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
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
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>
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