I’ve been experimenting with the fantastic front-end framework AngularJS for the best part of a month now. This article will outline what I’ve managed to achieve (so far) and look at how you can pull together WordPress with AngularJS.
Disclaimer: this project is an unfinished demo. I’m sure there are better ways of achieving this; the article below simply provides a feel for what we’ve learned so far.
But it always feels like a hack. Every time I use jQuery, it is a case of bolting it into the bottom of a HTML document and using it to programmatically alter the DOM (document object model – essentially the rendered web page).
Okay, enough waffle, let’s get on with the show. When I started using AngularJS I did it because I had a number of goals:
Perhaps the most important point here is #3. When building a website for integration into a CMS, like WordPress or Drupal, there are always concessions to be made on the front-end due to the way the CMS likes to output its content. Drupal is a particular offender of this; despite being insanely powerful it’s front-end leaves a lot to be desired.
We use WordPress a lot but it too demands a certain level of adherence. Enter the awesome WP JSON API plugin which exposes WordPress content as a JSON feed. A JSON feed is essentially a list of categorised site content which is both human and machine-readable, and AngularJS can parse this into templates very easily. There are multiple benefits to this approach:
Because we’re using WordPress simply to serve the data, we can put WordPress into its own folder and keep our app files outside of that, in the root, like so:
The great thing about AngularJS is that it lends itself to creating single page applications (SPAs) very well. A single page application is not an app or website with just one page; it is a term given to apps which serve their content inside a single page, often referred to as a shell page. In this case, index.html is our shell page.
This is controlled by ng-view, an AngularJS directive which basically tells the app to load content asynchronously into a container (usually a <div>). The screen below has a couple of classes which control how view pages enter/exit via simple CSS3 animation.
AngularJS and WordPress both handle how content is accessed via the URL. I put the WordPress install in a subdirectory to avoid conflicts. There’s probably a better way to handle this, but for now this does the job. We want Angular to sort out the routing, so our methods look like this:
The above example is basically saying that when a user hits a blog post, use the post.html template and refer to the BlogPost controller. The controller then looks like this:
We’re using the $http service in Angular to get the content from the API (JSON feed), and if you look carefully you’ll note that we’re passing in a parameter which is given by the routing mentioned previously. This is denoted by :post. In this example we don’t need to worry about :category because the API only cares about the post slug.
To summarise – we’re looking at the URL and getting the post slug. We are then passing this to a controller which queries the API based on this value, effectively filtering out any content which does not match the slug. Next, we need to show this content…
This is where ng-view comes into play. We’ve established the URL, the controller and we’ve got our data. Next up we need to show this data on the page.
ng-view will automatically load partials into this section of the page, so we don’t need to worry about this as it’s handled for us. If you take another look at the route, you’ll see that we’re using /partials/post.html, which looks like this:
Content made available to Angular is displayed in curly braces and items within the JSON feed can be accessed reasonably simply (this helped me). We’ree using a couple of directives here; ng-if which determines if there is a featured image (if so, show it) and ng-bind-html which spits out HTML content correctly (without this, you’d see HTML markup on the page).
The ACF plugin is great and used by so many WordPress developers. The even greater thing about it is custom fields are just bolted onto posts so they’re also accessible via the API. This means you can output custom fields on your pages in exactly the same way as core content, such as the title and content!
I’ve really only skimmed over the fundamentals here but this post should give you a good overview of how AngularJS and WordPress can be brought together in glorious harmony. There is still a lot to do. For example, we haven’t covered pagination, commenting, page titles and loads of other stuff which WordPress automates. When you simply use WordPress as a data source, you risk losing much of the functionality which makes it the powerful CMS that it is. I hope to learn more about this myself and will share in future articles, alternatively please feel free to build on this or leave your comments below (any and all insights are appreciated).