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