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.

1. BEGINNERS GUIDE
TO SPA WITH
DRUPAL +
ANGULARJS

2. Daniel Kanchev
Drupal Enterprise Hosting Manager
@dvkanchev

6. Applications
Single Page

7. WHAT IS A SINGLE
PAGE APPLICATION?

9. BEFORE SPA
- Web 2.0
- RIAs
- Flash, SilverLight
- AJAX

10. AJAX:
Technology or Generator of
many issues?

11. Crawling scheme:
http://domain.com/#products/please-crawl-me-here

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
October 14, 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
API 3
2.3
3.4
0.8
MEXICO

21. API 1
API 2
API 3
CDN

22. Recap
Applications
Single Page

23. SPA Overview/History
SPA Advantages
SPA Architecture

24. AngularJS
Overview of

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. jQuery Version

27. AngularJS Version

28. HTML
CSS
JavaScript
Services
VIEW MODEL
CONTROLLER
Drupal 8
API
Users

29. AngularJS Controllers
http://plnkr.co/edit/
jIDk4ygbQPC0cVjNEhTu?p=preview

30. AngularJS Features
1. Two way data binding
2. Templates
3. Directives
4. Expressions
5. Filters

31. Recap
AngularJS
Overview of

32. The web before AngularJS
AngularJS MVC
AngularJS Features

33. Drupal 8 API
+
AngularJS

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. LIVE DEMO

38. Recap
Drupal 8 API
+
AngularJS

39. QUESTIONS ?

40. Resources:
http://www.angularjsbook.com/
https://goo.gl/9o6rJK - AngularJS vs. 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 resources in 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. http://slideshare.net/DanielKanchev

43. THANK YOU!
@dvkanchev
daniel.k@siteground.com