Keep Your Head On and Ease into Angular

knaffles

If you've been wondering how you can start to incorporate client-side frameworks such as Angular into your Drupal site, you may have stumbled across posts about "headless Drupal," where the back-end and front-end are completely decoupled. For most developers, going completely headless is probably overkill, but there are still simple ways to take advantage of client-side frameworks in order to add enhanced functionality to your site. And with the introduction of RESTful Web Services in Drupal 8, it's now easier than ever.

Maybe you want to incorporate a simple task list tool, or display site activity in real-time, or build a custom content-filtering widget? Angular can help you build these kinds of widgets relatively quickly and easily.   

In this session, we'll build a simple, AJAX-y widget in Drupal 8 using only Angular and core functionality. We'll start by using Views to create a RESTful endpoint where we can expose our Drupal data. Then we'll build a simple custom module which will create a block to hold our widget. Finally, we'll incorporate Angular on the front-end to consume the data exposed by Views asynchronously and render it in our custom block.

This presentation will be geared towards 1) front-end developers who are comfortable with Angular but who don't know how to integrate it with Drupal, and 2) front-end developers who are familiar with Drupal but have little or no experience with front-end frameworks. We'll be dabbling just a little bit in the back-end as well, but any PHP we write will be pretty simple.

By the end of this session, you will know how to:

  • Create a simple custom module in Drupal 8.
  • Expose Drupal data using Views.
  • Query and render Drupal data using Angular.

Session Track

Front End

Experience Level

Beginner

Drupal Version