This is a four part article about building a single page app with AngularJS and Drupal 8.
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.
Part two - Services in Drupal 8
A little about how to use services to change the response in a JSON and HAL request.
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