← Back to Blog

AngularJS front-end with WordPress back-end

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.

I’m predominantly a front-end web developer but I’ve never really gotten along with Javascript. I only got serious about all this stuff in around 2007 by which point jQuery was taking flight. For those that don’t know, jQuery is a Javascript-based library which makes performing common front-end tasks more accessible to people who don’t know Javascript very well (like me!).

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).

This is where AngularJS steps in. AngularJS caught my attention because, instead of changing the web page once rendered, the developer actually has the ability to extend the capabilities of HTML by adding what are known as “directives” to the markup. This means that the Javascript is effectively baked into the page. No bolting on jQuery and doing things after page load!

On with the good stuff…

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:

  1. I wanted to create richer experiences, more akin to applications than web pages
  2. I wanted to utilise CSS animation in a structured manner
  3. I wanted better control over my HTML templates
  4. I wanted to reduce DOM manipulation as much as possible;
  5. and keep my Javascript more modular.

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:

  • The application is server-agnostic (no database queries are made)
  • Content can be extracted into separate files (called partials) so everything loads more quickly
  • We’re not relying on WordPress methods to fetch the data (though this also has its downsides)

File structure

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:

Screen Shot 2014-08-26 at 11.25.55

Shell page

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.

Screen Shot 2014-08-26 at 11.32.07

Routing

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:

Screen Shot 2014-08-26 at 11.43.34

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:

Screen Shot 2014-08-26 at 11.42.25

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…

Displaying the 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:

Screen Shot 2014-08-26 at 11.58.02

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).

Handling custom fields

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!

Wrapping up

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).

Live demo | See project on GitHub

Posted in

  • http://clarkcx.co.uk Pete Clark

    This is really interesting Matt! I like the idea of using WP in this way if it means being able to create slick ‘webapp’ interfaces. Any thoughts on how serving content in this way would affect performance? Are you likely to get something quicker (because AJAX) or slower than standard WP?

    • Matt Saunders

      The idea appealed to me because there seems to be a gap between (powerful) CMSs and clean front-ends. I’m quickly coming to the conclusion that everything inside of a CMS *should* be exposed as an API so that we can take that data and truly do what we want with it – not be bogged down by how a CMS wants you to output the data. As Angular is a framework, and it allows filtering/basic calculations on the front-end, it seemed like a good fit. But front-end frameworks don’t have back-ends which is where WP comes in. Theoretically it should perform better because it’s only loading in fragments but, I’d need to do some proper testing on real sites with a fair amount of traffic to really understand performance implications.

  • http://prpl.rs dannydev

    Great minds think alike! http://prpl.rs/x/ngprpl I used the same exact procedure to build our company site in the spring. Even down to the same JSON API plugin, however I went with wp-types as opposed to advanced custom fields. There are a ton of hurdles you have to overcome to have what i had termed ‘angularpress’ in a launchable state (sharing & seo particularly, we’re using PhantomJS) let me know if you have any questions on our implementation

    • Matt Saunders

      Very nice site, looks like you’ve taken it a step further! As I mentioned in the article – there are quite a few things that I haven’t looked at properly yet, much of which is core to WP. Feel like I’m scratching the surface. I really liked your video as well – is this yours https://github.com/jearle/angular-press?

      • http://prpl.rs dannydev

        Haha no it’s not, I wonder if that silly name is catching on. I really need to write a post-mortem on the project. There are some really awesome aspects to using angular as the front-end for a WP site but at the same time some things that are a doddle with PHP become really difficult with JS

    • Scott Baggett

      We also just launched a WP-JSON / Angular site! I made the choice back in October to go for it and it worked out well. It definitely came with some issues for us, but overall we’re happy with the results. http://www.justinwine.com built by http://www.badassembly.com

      • http://prpl.rs dannydev

        Awesome work man, I’d be curious to hear what the most difficult aspects were, hit me up anytime danny@prpl.rs. Seen as though there is clearly an appetite for this sort of ngwp architecture I’m going to post a much more lengthy retrospective of our project than the brief video I linked to above. SEO and sharing (anything w/ a crawler) was a nightmare amirite, did you use one of the pre-rendering services or something like phantom running on the server?

        • Scott Baggett

          Yeah I mean I basically wanted kill myself a few times. This site actually works in IE8 if you can believe that. Not *well* but it does work. :) I’ll hit you up and we can chat about it.

        • http://thebeeobee.com/ thebeeobee

          Dannydev, is that lengthy retrospective up anywhere? Thanks!

      • Matt Saunders

        Very, very nice. My only comment is the content seems to load quite slowly (with no loading indicator). I noticed on the prototype I did for this article, that there is a slight delay between hitting the link and fetching the content (despite just being text). Is this latency an Angular issue do you think?

        • Scott Baggett

          Well there will always be a slight delay if loading lots of JSON after the dependencies load. It’s not an angular issue, it just comes down to how fast you can get the json out of the DB or cache or wherever it’s coming from. We went with ACF pro for our fields in WP which turned out to be quite slow, but it has gotten better in recent versions.

          The homepage can load a bit slow as there’s more than 1 request to load a bunch of products, but we found it to be good enough for the target consume machine/bandwidth. There’s always room to optimize. :)

          • http://prpl.rs dannydev

            Scott, are you using a custom API controller [or several]? I found with all the default calls theres so much extraneous data that comes along with those that we replaced all the calls with optimized custom ones that only request the specific data we need for logic/content. I also used a little localstorage caching logic with momentjs to limit api calls per-user to say once every 30 mins to an hour, once they’re stored as JSON in localstorage they’re near instant

          • Scott Baggett

            Yep I did build my own controller that only gives me the minimum amount of data to pull everything so that I have a full collection of IDs and slugs to use to link around the site. Then I hit full post endpoints when you get to the page to pull all the data.

            I forgot to mention that I actually have another “angularpress” (it’s going to catch on!) site that I launched about 3 months ago for my record label. It’s almost the same stack as the other 2 sites, (brunch, cofeescript, stylus, angular, WP) but a totally different front-end.

            http://www.media-blackout.com

          • http://thebeeobee.com/ thebeeobee

            Scott, LOVING your label site.

        • Peter Mumford

          The app loads slowly because it has lots of high resolution images.. almost 7 megabytes worth. Maybe the JSON API can’t use wordpress’ post_thumbnail() function? The app loads the ‘original’ rather than the ‘thumbnail’ version of each image.

      • http://www.jerrykelih.com/ Jerry

        Great work guys, those are awesome examples! Im looking into similar solutions myself, would be interested in more of this knowledge myself. Im looking at redesign/redefine our company page (http://www.businessmodel.io/) that are at the moment are as separate products and technologies (angularJS apps – and WordPress event pages and blogs) under one roof: AngularJS as front-end and WordPress or Firebase as backend (depends on product). So user would not know the difference ofcourse.

  • Bobby Bryant

    Great article! I have been messing around with a Angularjs/WordPress combination for the last few weeks. And I couldn’t figure out how to display my content without the markup. Thanks for highlighting ng-bind-html.

    • Matt Saunders

      Thanks! Glad it helped :)

  • SGarrison

    I am also using this process in a project I’m working on, though I didn’t see that the custom acf fields were accessible in the API and had to modify the json-api plugin to get that to work. Could you explain how you were able to do this? Thanks

    • Matt Saunders

      Hi Sciz, the custom fields are available in the API (make sure you’ve got the latest version) and can be found under “custom_fields”. The exact method I used to access it in my app is “page.custom_fields.call_to_action[0]”, where “page” is the array key passed from the controller. Get the code form GitHub if you want to examine further.

    • http://prpl.rs dannydev

      I went with wp-types as I found it a little easier to work with in the custom API controllers. See below for documentation.

      http://wp-types.com/documentation/user-guides/displaying-wordpress-custom-fields/#1

  • http://andymerskin.com/ Andy Merskin

    You are the best. Thanks for posting this! I have been struggling with getting a clean solution going and this is an excellent example to start out with.

  • mohitkr05

    Angular Integrated with WordPress can change the world of blogging (and small/mid user web app scenarios). This is a very scalable option

  • Aman Fahimullah

    Does anyone know how SEO plays into this. I’ve heard that JavaScript heavy single page applications become more challenging with SEO scrapping.

    • Matt Saunders

      I’m not sure – I’ve heard similar things, but from what I can see URL’s are fully accessible (and thus crawlable, i.e. http://angularwp.srgunltd.co.uk/#/services) so indexing shouldn’t be a problem. I guess you might need to consider META description and the more fundamental on-page SEO techniques, but unless you’re in a highly competitive industry I don’t see this as an issue. I’m certainly no SEO expert, though!

      • Aman Fahimullah

        I’ve looked into this further. Crawable URLs need a hashbang /#!/ which inform the search engines that the current url is ajax driven. Google will convert these urls to a special url site.com/?_escaped_fragment_=

        What now you do with the new url is serve up pre rendered html and configure your server to request a headless browser to access your new webpage and spit out the html for the given hashbang.

        it’s a lot more work but once setup properly the first time, you’re all good to go.

        http://www.yearofmoo.com/2012/11/angularjs-and-seo.html

        https://prerender.io/

    • Ben Freke

      With this approach, you would definitely need to create a service to send page views to your analytics, as well as update canonical urls, og tags, etc. Without that, you’re missing out on a lot of SEO stuff.

      On the plus side, most reputable SEO plugins will be attaching information as metadata, so it will be available through the same API.

      Very interesting approach, definitely going to be looking at the github files.

  • http://www.csoutham.com Chris Southam

    Love this! I’ve toying with the idea of AngularJS and WordPress as I do both (plus Laravel) but I personally struggle with the front end aspect of WP with the theming as I find it either frustrating or annoying!
    I’m definitely going to give this a go, great effort on your part :)

  • bmlsayshi

    This probably improves WordPress security as well since it’s another layer of abstraction and people wouldn’t directly access WordPress.

  • Pingback: AngularJS front-end with WordPress back-end - S...()

  • Osric Caton

    Great article. I never thought of this combination. Thanks for exploring! I might give it a serious try on future projects.

  • Spairo Brejcha

    awesome!!! thanx

  • Pingback: Weekly News for Designers (N.250) | Web Design Articles From An Actual Living Web Professional()

  • Marco Kunz

    Really very appealing stuff, this angularpress. Were there any further developments in the past four months to follow up on or are there any other resources to dig into? I reasonably new to angular and the whole dotjs microcosmos and would really appreciate any pointers!

    • Matt Saunders

      Hi Marco

      I played with this concept a little further and pushed some stuff to the Github repo, but I ran out of steam a bit with Angular as my interest in it naturally dwindled and client work took over. I will probably look back into it in the future – or a similar JS framework – I believe the latest version of Angular was a milestone of significant change in the framework, so would require too much time to pursue at the moment unfortunately.

      • Marco Kunz

        Hi Matt
        Seems like it’s best for me to be patient for a bit longer until “angularpress” evolves a bit further. Without a community to turn to I wouldn’t get very far. Anyway, thank you very much for the reply!
        Marco

  • nickberens360

    So what is the advantage of this approach? Is it a performance thing?

  • Facebook User

    Thanks for this post. I have just discovered AngularJS and love it. What I still don’t understand is, how do I access other data such as my categories and images. I think once I know all of this it will be a very powerful tool. I also wrote an article on how to integrate Angular into WordPress but in my version I included all of the AngularJS files inside a theme. http://pixelers.net/integrating-angularjs-wordpress/

  • Violet Raindrops

    Could you please provide the link for the Live Demo again? The old one is not there anymore :) thanks!

  • miguelmayo

    demo is down