Integrating AngularJS with Drupal 7


Published on

AngularJS is a framework for client-side dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's low impact nature ties in with Drupal's data handling and structure to allow you rapidly make interactive Javascript applications. Javascript developers will find that Angular's Controller/View structure adapts itself well to Drupal's Block and/or Panel System with minimal disruption to a standard Javascript development workflow - even if that developer has minimal or no Drupal knowledge.

In this talk I'll cover setting up AngularJS in Drupal using the Angles module, how to setup your Angular project structure for a large implementation (it works for small ones too), interacting with Drupal via the Services module and gotchas to watch out for.

This talk is targeted at technical users primarily but managers evaluating using AngularJS with Drupal will also benefit. Having some Javascript experience is recommended but not required.

Published in: Technology, Business

Integrating AngularJS with Drupal 7

  1. 1. Integrating AngularJS with Drupal 7 Integrating AngularJS w/ Andrew Riley @andrewmriley with Drupal 7
  2. 2. Getting to know Angles
  3. 3. The Concept • • • • • Map controllers to Blocks/Panes Let Drupal load the code Let other modules handler interfacing Use AngularJS routing or don’t Templates load in blocks for caching
  4. 4. Installing • Drop angular.min.js in libraries/angular folder • Enable modules – Angles Context module* – Angles Block module
  5. 5. Create Your Module • • • • Create a custom module Put files in a subdirectory Use the structure you want for JS file layout Add in functions
  6. 6. Important Functions • hook_angles_post_load() - Loads your app file after all other files. • hook_angles_controllers() - Defines controllers.
  7. 7. Important Functions • hook_angles_templates() - Defines template files. Used for both Controller Blocks & ng-template. • hook_angles_require() - Loads additional JS files (services, factories, directives, etc)
  8. 8. Create a Controller Block • Select your controller • Select your template • Soon to be exportable
  9. 9. Preloading JS Blocks • Uses defined templates • Works with Directives • Requires Context currently
  10. 10. Context • Define the application name • Preload a ng-template
  11. 11. ng-app • Only one per page • Use the context to add to the body tag • If you need to add it on a different level add it on the theme level. • Generally not recommended to have more than one ng-app per page.
  12. 12. Gotchas
  13. 13. Services • Get CSRF token if writing any data. • It is possible to send the CSRF function without modifying much code.
  14. 14. CRSF Token var addHeaders = function(token) { $['X-CSRF-Token'] = token; $http.defaults.headers.put['X-CSRF-Token'] = token; // Delete object does not exist by default, create it $http.defaults.headers.delete = {}; $http.defaults.headers.delete['X-CSRF-Token'] = token; };
  15. 15. Time Keeping • Watch your AngularJS -> Drupal time saving • avoid .getTime() • use .toUTCString() • PHP can read RFC-1123 • Never transfer as seconds
  16. 16. Angular Services VS Entities • Remember JS AJAX request are async • Watch your entity relationships
  17. 17. The Future
  18. 18. Panels Support • Additional module • Can choose context/blocks and/or Panels
  19. 19. Yeoman Generator • Manually creating a custom Angles module isn’t fun • yo generate-angles in the works • Creates basic angles module
  20. 20. Exportables • Angles blocks are not currently exportable • Code in the works to add to features
  21. 21. Questions?
  22. 22. Integrating AngularJS with Drupal 7 Integrating AngularJS w/ Andrew Riley @andrewmriley with Drupal 7