My Tutorials On Building Themes With AngularJS and WP REST API

AngularJS-large

Since October 2014, I developed a new hobby on building a WordPress theme with AngularJS. If you’re interested in “why” rather than “how”, honestly I can’t say there’re plenty of advantages about this approach/stack bla bla bla… Though there do be some in my opinion.

If you’re interested in my learning path, I’d love to share so I’ve written a series of tutorials for you. You might spend around 5 to 20 minutes on each post and I try my best not to bore you.

Any suggestion or feedback will be very much welcome. Here’s the list of my articles:

  1. Using AngularJS and JSON API in Your WordPress Theme:
    An introduction to use the WP REST API and AngularJS in a WordPress theme. I wrote it based on a tutorial video from WordPress.tv – Eric Wolfe: Building a WordPress Theme Using AngularJS, but added my own flavors. This post is now listed on Resources section at WP-API.org, which might lead some of you to this repository.
  2. AngularJS WordPress Theme: Display Post Content with ngBindHtml:
    You might be wondering why AngularJS displayed post content with HTML tags but not rendered them. In this tutorial you’ll find the answer and learn two approaches to solve it.
  3. Use AngularJS Custom Directives In A WordPress Theme:
    Custom directives are very powerful in AngularJS. I’ll show you how to create a search form directive <search-form> in this theme, and make it work like the WordPress built-in template tag get_search_form().
  4. Minification Errors in My AngularJS WordPress Theme:
    After minifying AngularJS scripts, our theme suddenly stopped working. How did that happen? We’ll dig into another important concept called Dependency Injection (DI) in AngularJS.
  5. Using Slug To Get Single Post In AngularJS WordPress Theme:
    Everyone knows pretty links bring pretty SEO performance, so we shall add post slug to our permalink structure, right? I’ll get you all set in this short post.
  6. Making WordPress Admin Bar Work With AngularJS Theme:
    Oops, the WordPress admin bar dosen’t work with our AngularJS theme. Let’s see what we can do to fix it.
  7. Setting Page Title Dynamically In AngularJS WordPress Theme:
    Changing the page title dynamically is an important feature in our AngularJS WordPress Theme. We need to incorporate this feature into our theme.
  8. Filtering image_send_to_editor To Add Target Attribute To Link:
    If you insert an image link in the post content, it will work funny (not as expected) in our AngularJS theme. With a very short snippet, boom! The problem goes away.
  9. Category Pages In AngularJS WordPress Theme:
    Show me some category pages in this AngularJS WordPress theme, you said? Sure. I covered pretty much everything you need to know about this topic.
  10. Adding Slick Carousel To Your AngularJS WordPress Theme:
    Adding a slick carousel to your post to display all attached media can’t be easier with Angular Slick.
  11. Pagination In AngularJS WordPress Theme:
    My second tutorials on creating custom directives in AngularJS WordPress Theme. This time we’ll create a postsNavLink directive which works like the built-in WordPress template tag posts_nav_link(). They even take the same parameters!
  12. When Page Not Found In Your AngularJS WordPress Theme:
    A good developer should always keep an eye on error responses from the application. Let’s start with the popular “page not found” error and see how to deal with it.
  13. Improving Your AngularJS WordPress Theme With A Service:
    The first tutorial we talk about AngularJS     servcies. We’ll introduce how to share data between controllers by creating a new service called WPService.
  14. Tidy Up Your AngularJS WordPress Theme With A Service:
    It’s the second post we talk about Angular services. We’ll see how to use the WPService to organize and share code across the theme, which helps us tidy up our code.
  15. Adding Fields To The JSON Response Of The WP REST API:
    This post is only 10% related to AngularJS, but you’ll learn how to better work with AngularJS just by manipulating the fields in the JSON response of the WP REST API.
  16. Getting Posts By Taxonomy Or Meta Field With WP-API v2.0:
    The WP-API v2.0 works in a more WP_Query way, but there’re still a few concepts need to be clarified. Wanna know how many query parameters are available? Let’s dig into the source of WP-API and WordPress.
  17. Upgrading Your AngularJS Theme To Work With WP API V2:
    The WP API v2 is almost ready so I’m upgrading the AngularJS theme project to work with it. Other than just changing the routes, you’ll be surprised how the version 2 differs from version 1.
  18. Cookie Authentication In A AngularJS WordPress Theme:
    I’ll walk you through what are cookie authentication, WordPress nonces and AngularJS $httpProvider.interceptors in this tutorial. By sending the nonce in the headers with each API requests, getting authenticated with WP API in a theme is actually very easy.
  19. Display Post Excerpt To The More Tag With WP API V2:
    Are you looking for a solution to display post excerpt based on the <!--more--> tag? I have some not-so-shiny tricks to show you.
  20. Getting Categories With Posts In A Single WP API Request:
    This short tutorial will show you how to add an extra field to the category route response, so you can get related posts for each category with just a single API call.
  21. Removing Content From WP API Response When Listing Posts:
    You can conditionally add or remove fields from WP API response. Sounds cool, huh?