Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

AngularJS & Drupal

Parent Feed: 

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

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web