![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;
};](https://image.slidesharecdn.com/drupalcampatlantapresentationangularjs2013-131019131218-phpapp01/85/Integrating-AngularJS-with-Drupal-7-14-320.jpg)
Integrating AngularJS with Drupal 7
- 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