Building themes with AngularJS and JSON REST API

Cookie Authentication In A AngularJS WordPress Theme

by

Hello beautiful readers! Glad to see you again so soon. Today I’d like to share my findings about cookie authentication and our AngularJS WordPress theme. I’ll show you how exactly to get the cookie authentication working with the theme, and we’ll create a simple AngularJS custom directive to display the user name if she/he is logged in.

What I’ll be showing you in this post I actually spent over two months to figure that out (duh!). Eventually to my surprise that cookie authentication is quite simple when we are just building WordPress themes or plugins.

Read more

Upgrading Your AngularJS Theme To Work With WP API V2

by 
Note added 2015/12/16: Now this post is updated to be compatible with WP API v2 Beta 9.

Note added 15/12/13: With the BREAKING CHANGES in WP API v2 Beta 9, the theme is now broken even if you follow this tutorial. I'll manage to update the post soon so don't get too excited about the plugin updates.

Today in this post, I’ll be showing you how to upgrade the AngularJS WordPress theme that we have been working on for a very long time, to work with the latest WP API v2 (beta 4 at the time of this writing).

To be honest I didn’t expect the WP API v2 would be so much different from the version 1. When I talked about upgrading the theme in some comments of my tutorials, I thought it just about updating the routes and that’s all. It turned out I was wrong and the mistakes I’ve made are pretty worthy of documenting. So here we go.

Read more

Tidy Up Your AngularJS WordPress Theme With A Service

by

In the previous post, I spent some time to walk you through the basics about services in AngularJS, including what is a service, how to create a factory service, and what exactly can be improved with the new WPService created by us.

So basically it’s mainly about how to share data between controllers with a service (which looks so magical especially when we change the routes). If you’re convinced by the example I just demoed, I’m glad to show you another important usage about services, which we’ve mentioned that they are designed to organize and share code across the AngularJS app. That’s why I’m saying we can tidy up our AngularJS WordPress theme with a service.

Let’s start by taking a look at the controllers in scripts.js – the Main and Paged controller, to see if there’s anything can be rewritten to be reusable, and move the reusable code into our WPService service.

Read more

Improving Your AngularJS WordPress Theme With A Service

by

Remember last time I’ve promised that I’ll tidy up our AngularJS app by creating a new service? Today in this tutorial (and the next one), I’ll show you nothing but creating a new service called WPService, and by adding the WPService service as a dependency for our controllers, we’ll also rewrite the code piece by piece. If you’re ready now, just open your favorite editor and dive into the code with me.

Read more

When Page Not Found In Your AngularJS WordPress Theme

by

It’s good to see you in the latest post of my Building themes with AngularJS and JSON REST API series, I hope you enjoy the previous tutorial about pagination in AngularJS WordPress theme. Today I want to show you how to deal with “page not found” scenario in our project. You might be a little bit surprised that we’ve sort of talked about it when we learned the “otherwise” method in $routeProvider. It turns out that we still have a few things to cover. So if you have a couple of minutes, just open your favorite code editor and get started.

Read more

Pagination In AngularJS WordPress Theme

by

In this tutorial, I’ll be showing you how to add a simple pagination to your AngularJS WordPress theme. We’ll create a custom directive with AngularJS which works like the WordPress built-in function posts_nav_link(), that will display previous and next posts links in your index and category pages.

Before we get started, let’s take a look at the posts_nav_link() function first. By its description from the WordPress Codex, posts_nav_link() ‘displays links for next and previous pages. Useful for providing “paged” navigation of index, category and archive pages.’  So after we add our custom directive “postsNavLink” to our AngularJS app, we expect to see a paged navigation in our index and category pages:

Read more