{ DrupalCorn 2014 }

Hey Drupal, I'm AngularJS. Wanna  be Friends?




Ryan Frahm | rlfrahm

July 18th 2014

Ryan Frahm | rlfrahm

  • Ames, Iowa
  • Web Application Developer for ISU
  • Luggage contributor

Outline

  • Why Drupal 8 & AngularJS
  • Headless Drupal
  • Where does the web app live?
  • AngularJs + Drupal 8

Why Drupal 8 & AngularJS


  • Powerful, prebuilt tools
  • Similarities
  • Structure for Javascript
  • Multi-platform setup

Why? : Prebuilt Tools

  • Drupal 8
    • Data modeling
    • User Authentication
    • Resource management
    • Discrete Objects
      • Testing
  • AngularJS
    • Discrete, testable objects
      • Testing!
    • Templating
      • Less conjured HTML
    • Maintainable

Why? : Similarities

  1. Templating
  2. Routing
  3. Controllers & Services

Why? : Structure for JS




A model-view-controller for Javascript?

YESSS!!

Why? : Multi-platform Setup


Why? : Multi-platform Setup

  • Drupal has endpoints
    • Provides structured content
    • Authorization
  • Use the endpoints from anywhere

Headless Drupal


  • Use Drupal as a back-end
    • Alternative to GAE, AWS
    • Data modeling interface
  • Create custom API's
  • Register and authenticate users


API's Via the Routing System!

           api_module.routing.yml
module.cookie:
  path: '/api/v1/cookies/{kind}'
  defaults:
    _controller: '\Drupal\api_module\Controller\ModuleController::getCookiesOfKind'
  requirements:
    _permission: 'access content'
       ApiController.php
 ...

class ModuleController implements ContainerInjectionInterface {
  ...constructor

  public function getCookiesOfKind($kind) {
    return $cookies[$kind];
  }
}

Where does the app live?

Choice #1 : Separate from Drupal

  • Drupal
    • ...
  • App
    • ...

Pros

  • Easy setup
  • Separate server
    • Separate environment

Cons

  • Purely RESTFUL interaction with Drupal only

Choice #2 : Inside Drupal Root


  • Drupal
    • App
      • ...
    • core
    • modules
    • themes
    • ...

Pros

  • Easy setup

Cons

  • Can't use Drupal performance optimization
  • Drupal qwerkiness
    • /path/to/app directory doesn't exist (says Drupal validation)

Choice #3 : Drupal Module

  • Drupal
    • modules
      • App
        • ...
      • ...
    • ...

Pros

  • Can utilize modules
  • Can leverage Drupal templates

Cons

  • Hard to setup

AngularJS + Drupal 8




How many step does it take to get to a functional app?

Step #1 : Install Drupal 8


Step #2 : Enable Web Services Modules


Bonus: Rest UI 8.x-dev
(https://www.drupal.org/project/restui)

Step #3 : Expose Resources

 if ($modules['restui']->installed == TRUE) {

 } else {
  • Find rest.services.yml
  • Modify as needed
 }

rest.services.yml

 resources:
  entity:node:
    GET:
      supported_formats:
        - hal_json
      supported_auth:
        - basic_auth
    POST:
      supported_formats:
        - hal_json
      supported_auth:
        - basic_auth
    PATCH:
      supported_formats:
        - hal_json
      supported_auth:
        - basic_auth
    DELETE:
      supported_formats:
        - hal_json
      supported_auth:
        - basic_auth
(https://www.drupal.org/node/2096019#config)

Step #4 : Set Permissions



Step #5 : Check yo-self


Result:

 {"nid":[{"value":"1"}],"uuid":[{"value":"06dbb9be-033d-4b29-bd00-bb6ccbfcac54"}],"vid":[{"value":"1"}],"type":[{"target_id":"item"}],"langcode":[{"value":"en"}],"title":[{"value":"Laptop"}],"uid":[{"target_id":"1"}],"status":[{"value":"1"}],"created":[{"value":"1405707194"}],"changed":[{"value":"1405707194"}],"promote":[{"value":"1"}],"sticky":[{"value":"0"}],"revision_timestamp":[{"value":"1405707194"}],"revision_uid":[{"target_id":"1"}],"revision_log":[{"value":""}],"body":[{"value":null,"format":null,"summary":null}]}
200 OK == Winning!

Step #6 : Setup Angular

       via API
$http.get('http://drupalangular.com/getCookiesOfKind/chocolate').success(function(result) {
  $log.log(result);
});
       via Views
// Set view 1 to filter by chocolate kinds
$http.get('http://drupalangular.com/view/1').success(function(result) {
  $log.log(result);
});

Thanks!

Made with Slides.com