Downloaded 15 times
Uploaded byDaniel Kanchev
Drupal8 + AngularJS
This document provides an introduction to building single page applications (SPAs) using Drupal 8 and AngularJS. It discusses the history and advantages of SPAs. It then gives an overview of AngularJS, including its MVC architecture and key features like two-way data binding. The document demonstrates how to set up Drupal 8 to work with an AngularJS frontend, including installing modules, setting permissions, and testing API endpoints. It concludes with a live demo and resources for further learning.
More Related Content
Similar to Drupal8 + AngularJS
Drupal8 + AngularJS
- 1. BEGINNERS GUIDE TO SPAWITH DRUPAL + ANGULARJS
- 2. Daniel Kanchev Drupal EnterpriseHosting Manager @dvkanchev
- 6.
- 7. WHAT IS ASINGLE PAGE APPLICATION?
- 9. BEFORE SPA - Web2.0 - RIAs - Flash, SilverLight - AJAX
- 10. AJAX: Technology or Generatorof many issues?
- 11.
- 12. New JS Engines- 2008 1. Chrome V8 Engine 2. Safari Nitro Engine 3. Firefox - TraceMonkey
- 13. JS Frameworks -2010 1. BackboneJS 2. AngularJS 3. React
- 14. Web innovations- 2012/13 1.HTML 5 - push state 2. CSS 3 - transitions, media queries
- 15. Google Blog October14, 2015 “Deprecating our AJAX crawling scheme”
- 16. SPA Advantages 1. Segregation—> Good API 2. Performance —> Caching 3. Better UX 4. HA Setup and Failover
- 17. HTTP REQUEST HTTP RESPONSE -Internal Server Error - Service Unavailable - Gateway Timeout
- 18. HTTP REQUEST HTTP RESPONSE -Local ISP Issue - DNS Issues - Internet Routing Issues
- 19. HTTP REQUEST HTTP RESPONSE -Angular Retry Request - Failover to another API version - Failover to another API instance - Failover to another geo region API
- 20. API 1 API 2 API3 2.3 3.4 0.8 MEXICO
- 21. API 1 API 2 API3 CDN
- 22.
- 23. SPA Overview/History SPA Advantages SPAArchitecture
- 24.
- 25. Remember document.getElementById()? var hello= “Hey, jQueryTO!”; <div id=“message”></div> document.getElementBy(‘message’).textContent = hello; <div id=“message”></div> $(‘’#message).text( hello ); <div>{{hello}}</div> Old school way to dynamically update text: Then that was replaced by $(selector): And now with AngularJS:
- 26.
- 27.
- 28.
- 29.
- 30. AngularJS Features 1. Twoway data binding 2. Templates 3. Directives 4. Expressions 5. Filters
- 31.
- 32. The web beforeAngularJS AngularJS MVC AngularJS Features
- 33.
- 34. Drupal 8 Setup •Install the needed modules
- 35. Drupal 8 Setup •Set permissions for CRUD methods
- 36. Drupal 8 Setup •Test retrieving an article with GET in JSON format
- 37.
- 38.
- 39.
- 40. Resources: http://www.angularjsbook.com/ https://goo.gl/9o6rJK - AngularJSvs. Angular2 https://goo.gl/CcBW4g - AngularJS + Drupal 8 YouTube tutorial https://goo.gl/0RV07I - DrupalCon LA session http://goo.gl/mwhJ2x - drupalize.me tutorial http://goo.gl/WsYTnV - RESTful services docs
- 41. Custom REST resourcesin D8: 1. goo.gl/BY3zYf - How to create a Rest Resource in Drupal 8 2. goo.gl/kCqG20 - GitHub repo related to the above blog post
- 42.
- 43.