Headless Drupal with AngularJS
Download as PPTX, PDF1 like4,623 views
The document discusses the implementation of headless Drupal with AngularJS, highlighting benefits such as ease of use for front-end developers and flexibility in creating interactive user experiences. It explains how a decoupled architecture allows for content management without direct interaction with Drupal, and outlines the creation of API endpoints using Drupal's REST capabilities. Additionally, it introduces AngularJS features, such as directives and components, used to build dynamic web applications.
Headless Drupal with AngularJS
- 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!