drupal8 + angularjs
TRANSCRIPT
BEGINNERS GUIDE TO SPA WITH
DRUPAL + ANGULARJS
Daniel KanchevDrupal Enterprise Hosting Manager
@dvkanchev
ApplicationsSingle Page
WHAT IS A SINGLE PAGE APPLICATION?
BEFORE SPA - Web 2.0- RIAs- Flash, SilverLight - AJAX
AJAX:Technology or Generator of
many issues?
Crawling scheme:http://domain.com/#products/please-crawl-me-here
New JS Engines - 20081. Chrome V8 Engine
2. Safari Nitro Engine 3. Firefox - TraceMonkey
JS Frameworks - 20101. BackboneJS 2. AngularJS
3. React
Web innovations- 2012/13
1. HTML 5 - push state 2. CSS 3 - transitions, media queries
Google Blog October 14, 2015
“Deprecating our AJAX crawling scheme”
SPA Advantages1. Segregation —> Good API 2. Performance —> Caching 3. Better UX 4. HA Setup and Failover
HTTP REQUEST
HTTP RESPONSE
- Internal Server Error - Service Unavailable - Gateway Timeout
HTTP REQUEST
HTTP RESPONSE
- Local ISP Issue - DNS Issues - Internet Routing Issues
HTTP REQUEST
HTTP RESPONSE
- Angular Retry Request - Failover to another API version - Failover to another API instance - Failover to another geo region
API
API 1 API 2
API 3
2.3
3.4
0.8
MEXICO
API 1
API 2
API 3
CDN
RecapApplications
Single Page
SPA Overview/History SPA Advantages SPA Architecture
AngularJSOverview of
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:
jQuery Version
AngularJS Version
HTML
CSS
JavaScript
Services
VIEW MODEL
CONTROLLER
Drupal 8 APIUsers
AngularJS Controllers
http://plnkr.co/edit/jIDk4ygbQPC0cVjNEhTu?p=preview
AngularJS Features1. Two way data binding 2. Templates 3. Directives 4. Expressions 5. Filters
RecapAngularJS
Overview of
The web before AngularJS AngularJS MVC
AngularJS Features
Drupal 8 API+
AngularJS
Drupal 8 Setup• Install the needed modules
Drupal 8 Setup• Set permissions for CRUD methods
Drupal 8 Setup• Test retrieving an article with GET in JSON format
LIVE DEMO
Recap
Drupal 8 API+
AngularJS
QUESTIONS ?
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 tutorialhttp://goo.gl/WsYTnV - RESTful services docs
Custom REST resources in D8:1. goo.gl/BY3zYf - How to create a Rest Resource in Drupal 82. goo.gl/kCqG20 - GitHub repo related to the above blog post
