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.

1. Integrating AngularJS
with Drupal 7
Integrating AngularJS
w/ Andrew Riley @andrewmriley
with Drupal 7

2. Getting to know Angles

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. Installing
• Drop angular.min.js in libraries/angular
folder
• Enable modules
– Angles Context module*
– Angles Block module

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. Important Functions
• hook_angles_post_load() - Loads your app
file after all other files.
• hook_angles_controllers() - Defines
controllers.

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. Create a Controller Block
• Select your controller
• Select your template
• Soon to be exportable

9. Preloading JS Blocks
• Uses defined templates
• Works with Directives
• Requires Context currently

10. Context
• Define the application name
• Preload a ng-template

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. Gotchas

13. Services
• Get CSRF token if writing any data.
• It is possible to send the CSRF function
without modifying much code.

14. CRSF Token
var addHeaders = function(token) {
$http.defaults.headers.post['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. Time Keeping
• Watch your AngularJS -> Drupal time
saving
• avoid .getTime()
• use .toUTCString()
• PHP can read RFC-1123
• Never transfer as seconds

16. Angular Services VS Entities
• Remember JS AJAX request are async
• Watch your entity relationships

17. The Future

18. Panels Support
• Additional module
• Can choose context/blocks and/or Panels

19. Yeoman Generator
• Manually creating a custom Angles module
isn’t fun
• yo generate-angles in the works
• Creates basic angles module

20. Exportables
• Angles blocks are not currently exportable
• Code in the works to add to features

21. Questions?

22. Integrating AngularJS
with Drupal 7
Integrating AngularJS
w/ Andrew Riley @andrewmriley
with Drupal 7