Valuebound's Drupal consultant V Girish has shared an overview of Headless Drupal with AngularJS. He has also given a demo on how to create content type programmatically. ---------------------------------------------------------- Get Socialistic Our website: http://valuebound.com/ LinkedIn: http://bit.ly/2eKgdux Facebook: https://www.facebook.com/valuebound/ Twitter: http://bit.ly/2gFPTi8

1. Headless Drupal with AngularJS
Girish.v
https://www.drupal.org/u/girish-jerk
vijigirish.girish@gmail.com

2. ● Headless Drupal
● Why Headless Drupal
● Angular Overview
● Demo
Agenda

3. Headless Drupal
● Front end decoupled from drupal
● User doesn’t interact with drupal
directly
● Content storage and management

4. Flow
Headless
webSTATIC HTML
BROWSER
DB content
BROWSER
DB content
Php logic
API-JS Fetches(data)
BROWSER
Static web CMS web

5. WHY Headless?
● Ease for front end developer
● Full controller over front end developer
● No complex rules to implement it
● Faster
● Cross platform publishing
● Flexible, responsive, interactive experiences for your
users.

6. HOW
API-first
● Creating view -Rest API Json
● Programmatically: Drupal console command:
drupal generate:plugin:rest:resource

7. Headless Drupal Role
● Service: Caas
● Stores the data in database.
● Editorial management
● Sending to/ Fetching from front end

8. Angular js
● Framework for dynamic web apps
● Added to html page with script tag
Features
Directives
Expressions
Controller
Scope
Filters, etc ..

9. Components
● ng-app
● ng-bind
● ng-init
● ng-repeat

10. DEMO

11. THANKS!