Angular & WordPress such a great mix!

Angular & WordPress such a great mix!

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.
Required Plugins
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!