Submitted by Chris McIntosh on May 10, 2016

When talking about integration of Drupal with any other library or third party tool you should think about the end objective.  What things are you looking to gain from the tool that you cannot get from Drupal itself?  What things would you lose by using this tool?  Also, how can you mitigate your loss while still gaining the things that attracted you to this tool in the first place?  Angular and Drupal 8 are the same.  In this article I'm going over the three primary ways, I feel that Angular and Drupal 8 can work best together.  I will then have some example applications later on that demonstrate this functionality.

Angular Living Inside Drupal 8

I call this method this because you are building your angular application in a way that Drupal 8 will render it using a theme function.  The benefits of this are that you will be able to gain access to the Drupal javascript API, Drupal can be called on to style your application via the traditional Drupal theme, and you also get the speed of a single page application.  Probably the only downside or trick to using this method is the fact that both Twig and Angular us double curly brackets when rendering variables.  To avoid this you would want to utilize Angular's interpolateProvider service so that you could change the defining wrappers for your code like this:

 

Angular Static HTML

This method is different in that instead of being able to access Drupal 8's javascript API and CSS layer directly you would be responsible for managing that on your own.  This may mean a slightly faster load time, but a bit more coding for yourself.  In addition, you will need to build an API in Drupal 8 using Drupal's new menu routing system in order to gain access to all of the elements your application will need.  For many, this is okay especially if you are looking to do a pretty straightforward single page application.  This would give you the ability to create an angular application without regard to any of Drupal 8's internal workings while having the ability to customize that application and monitor it from the administration section of Drupal.

 

Angular Node.js

The final method I feel provides probably the highest level of speed as well as the addition of Real-time reactions.  With layering your angular application on top of Node.js you could use something like Socket.io or WebSockets in order to create real-time interactions with the information presented to the user.  Additionally, you could cache a lot of the information on Node.js so that you lower your impact to your database.  Having a setup like this you could create multiple load balanced servers that all talk back to Drupal when they need to get the latest information for various content items.  The same is said when things are updated in Drupal, you can create calls and events that will transmit the updated details to your various cells in the application.

In the next couple of days, I will create the same application, a simple note tracking tool in each of these three methods and post the code here, so that you can see the difference in applying the principles as well as the reaction time/speed /etc. Check back soon as I will update this article with links and the source for each application.