Headless Drupal Web App with Angular JS and DrupalGap

In this tutorial (for NYC CAMP 2015) we'll explore how to use Drupal 7 and DrupalGap 2 (powered by Angular JS) to build a decoupled ("headless") web application for Drupal. In a nutshell, here is what the app will do:

  1. A user runs the app in their browser
  2. The browser asks the user for access to their current location
  3. The app passes their location to Drupal
  4. Drupal will return nearby content (if any) to the app
  5. The app will display the locations on a map and let the user click on them to see more details

Ready? Let's rock and roll, no time to fiddle...

Headless Drupal with Angular JS and Bootstrap - Hello World

This tutorial describes how to build a very simple de-coupled Drupal web application powered by Angular JS and Bootstrap. The inspiration for writing this tutorial came after completing my first Angular JS module (angular-drupal), which of course is for Drupal!

To keep things simple, and in the spirit of "Hello World", the application will let us login using credentials from the Drupal website, and then say hello to the user upon successful login.

The complete code for this example app is available here:

Ready? Alright, let's go headless...

Angular JS - How to Unit Test a Service

I've been working on my first Angular JS module, with the hopes I can share it with the community. Before doing that, I need to finish its implementation, and now that I've been playing around with Angular for a few weeks (and having a ton of prior JavaScript development experience), I could blast through this module's implementation very quickly.

Angular JS Change Route Programmatically

Sometimes we'll want to dynamically change the route in Angular during some custom code execution. Here's how we can do it:


If your call to $location takes place in an async success callback (i.e. after making a POST request to a server), you may also have to reload the route:

Subscribe to RSS - AngularJS