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
<section ng-app="appname"><div ng-view></div></section>
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