Skip to main content

Building THEGOODWOOD.dk

Submitted by kaa4ever on Tue, 08/04/2015 - 12:16

Introduction

This is a four part article about building a single page app with AngularJS and Drupal 8.

THEGOODWOOD - Forside

I love Drupal. But I love JavaScript even more. Not totally comparable I know, one being a CMS and the other a scripting language.
AngularJS is great! A while back I did some research to figure out which framework I should spend time on learning. The contenders back then where Backbone, Amber and AngularJS. I decided on AngularJS and have never regretted it. Drupal 7 is aging no doubt, and for the longest time it seemed like Drupal 8 didn’t really move anywhere. Luckily for us, some people put in a very big effort, and in november 2015 we we’re able to celebrate the shipping of Drupal 8.

A friend of mine has made a living by building wooden tables, with the name THEGOODWOOD (why that is a great name).
I built his former website in Drupal 7 with some custom JS. But as his business grew, he needed a more professionel looking website.
While having drinks one night, he told me some guy had offered to build him a Wordpress site. Wordpress. I know almost nothing about Wordpress but from a developers perspective I don’t like what I hear. So i offered to build something a lot cooler for the same price. Well, challenge accepted.

The best thing about spare time projects like this, is you get to choose whatever tools you want to play with. I chose Drupal 8 as a RESTful backend with an AngularJS single page application as frontend. AngularJS is very well documented with tons of articles, while Drupal 8 is very new and not that well documented. Therefore this article will focus more on Drupal 8 than AngularJS, although some examples will include some Angular code.

Hands down, this project has challenged me in some ways. I wanted to build it as a single page app, it had to support two languages, and it had to integrate with Quickpay. I have spent a lot of time Googling and even more time on trials and errors, so my hope is that this article can help some fellow developers.

Part one - Headless Drupal 8

This part covers the setup and use of Drupal 8 as a RESTful API.

Read this part here

Part two - Services in Drupal 8

A little about how to use services to change the response in a JSON and HAL request.

Read this part here

Part three - Routing with ng-route and Drupal 8

This part covers how to use Angulars ng-route in a way that plays well with Drupal. Some considerations were made about setting up a start route, setting up URL aliases and linking in and out of the app.

This part is in progress.

Part four - Multilingual - Serve content in two languages

This part covers how to support multiple languages in Drupal 8 with AngularJS. It covers some problems with HAL and translated content, how to use Drupal.t() in JavaScript and template files and the use of a language state in AngularJS.

Comment? Tweet me