One of the most used CMSs on the planet is WordPress, and on Front-End World AngularJs is the most famous powerfull and used framework, So what about mixing them together!
Prerequisites
- Basic knowledge of WordPress
- Basic knowledge of AngularJs
Requirements
– Install a fresh copy of WordPress
– Install and activate WP REST API v2 plugin
– Install and activate Angular For WordPress plugin.
Steps
1. Create a new theme with the basic necessary files (index.php, style.css, functions.php).
2. Activate the theme.
3. Make sure the two plugins mentioned above is installed.
Now we have a restful API ready to be requested by Angular $http
provider, But where is AngularJs here?
Should we install it ?!
The answer is fortunately No, Angular is already installed with the plugin and the main module already created and called wpAngularPlugin
, you can use it directly or to create your own module and include the plugin’s module as a dependency and I prefered!
So let’s create our custom js file and include it in our thee like
<?php function wp_assets(){ wp_enqueue_script('app',get_template_directory_uri().'/js/app.js'); } add_action('wp_enqueue_scripts','wp_assets') ?>
4. creating our app module in app.js file
angular.module('myApp',['wpAngularPlugin']);
5. Viewing our posts using Angular will be the most excited part , Guess what ! yes it will be done by Angular directives just like normal ng template engine!
using the directive ng-posts
will be enough to render all your posts and with WP_Query
parameters you need, let’s take a look
<?php wp_head(); get_header(); ?> <div ng-app="myApp"> <ng-posts> </ng-posts> </div> <?php wp_footer(); ?>
and that’s it !
Features
– You will have all the following details for each post
post: { ID author: { } comment_status content date date_gmt date_tz excerpt featured_image format guid link menu_order meta: { } modified modified_gmt modified_tz parent ping_status slug status sticky terms: { } title type }
– you can change the template used to display single and archives posts simply at wp-content/plugins/angularjs-for-wp/angularjs-templates/list-detail.html
and wp-content/plugins/angularjs-for-wp/angularjs-templates/single-detail.html
<article> <h2>{{post.title.rendered}}</h2> <div ng-bind-html="post.content.rendered | sanitize"></div> <a href="{{post.link}}">Read More...</a> <hr /> </article>
– you can also use the great feature of this plugin which is Angular factories to create new post submission from the front-end.
Hope you are interested to build your first mix with Angular and WordPress, If you faced any problems , answering your questions will be a pleasure to me!