AngularJS & Drupal

angularjs drupal

It's a bird - It's a plane - No! It's AnguDrop

Angularjs and Drupal - A new power couple in the open web space.

Angularjs is a refreshing javascript framework created and promoted by Google and is one of those open source projects (like Drupal) where you simply know will be around for the next 4-5 years and are about to leave a dent in the open web space. Angular is one of the prime members of our new M.E.A.N framework which contemplates Drupal for high performance mobile backends and more challanging startups - Get some Angular.js help now from our resident Ninjas :). The beauty in Angular (as in most javascript MVC frameworks) is how it organizes the different parts of the application (views, controllers, services..) and enforces it's opinionated view of how things work and why. This lets you build complex single page applications in a predictable and standardized way. It also presents an interesting approach on how to address some of the more common customer scenarios..

A refreshing coke in Drupal Hell

We have seen many customers that are stuck in some kind of Drupal Hell with codebase from Drupal 5 stuck in time because their original developer hacked core or views and they never had the budget to upgrade. It's extremely challenging to provide value to this type of customer but we've found an interesting pattern using Angularjs to create modern cutting edge interfaces even within the weirdest sphagetticoded nightmares. So let's say we have a Drupal5 site stuck in 2008...
  • Create a content type called angularapp
  • Overide page.tpl.php as page-node-angularapp.tpl.php (Drupal 5 needed custom code in template.php
  • Load the angular.js library and dependencies plus your apps code
  • Comment out the print of the $content in you're overiden template and instead add
  • The code above renders the angular app based on the code
The idea is to replace the rendering of $content all together when the angularjs is rendered.

Is there anybody out there?

It doesn't matter how much amount of frontend wizardry goes on we still need someone to answer those angular services and provide the frontend with the data coming from the Drupal site. We do a fair amount of node.js server side programming so sometimes drupal isn't even part of the equation but when Drupal is the server side there are several options to address it. * 1. [Services module](http://drupal.org/project/services) (Drupal - 5-8) 2. [restws module](http://drupal.org/project/restws) (Drupal 7) 3. As Will Vincent pointed out you can roll your own with returning drupal_json_output in your hook_menu. For the Angular curious - I created a gist (rendered belowe) - walking through the relevant steps in an angular app - https://gist.github.com/liorkesos/5528234

Comments

Angular is really exciting, and it's incredibly performant. I've spent several months playing with it myself, and have used it on a couple of client sites in small sections. This is made pretty easy with the ability to easily output data as JSON in Drupal 7 by specifying the deliver attribute of a menu item (in hook_menu) to use drupal_json_output. Then whatever is returned from the callback function is spit out as json, so creating data endpoints for your angular app that pull info from your drupal site is dead simple. Aside from speed, the one feature that led me to choose angular over some of the other options (knockout, sproutcore, etc) was that it easily allows you to use external templates for your angularjs app, so that templates and partials are only loaded as needed, not all shuttled over on the initial page load. Of course, it's also blazingly fast compared to some of the other options too which is also a huge benefit. There is a pretty blatant typo in your first sentence though, AngularJS is created and promoted by Google, not by Drupal. ;)

@will Obviously it is promoted by Google and not Drupal - I updated the article to include you're offer of using drupal_json_output as well @Jerad - It's cool to see that this is a larger trend and I hope that Drupal8 wscci brings back Drupal's mojo as a lean and mean web services machine. I find it quite liberating building API's in node and one of our patterns is using Drupal as a CMS to create the content , publish that content upon the forms submittion and storing it in a node.js/mongodb based API - I gave a webinar at Acquia about this about a year ago - http://www.acquia.com/resources/acquia-tv/conference/lessons-learned-integrating-drupal-nodejsmongodb-powered-web-services

Add new comment