{ 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
- Templating
- Routing
- 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
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}]}
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!
Hey Drupal, I'm AngularJS. Wanna be Friends?
By Ryan Frahm
Hey Drupal, I'm AngularJS. Wanna be Friends?
A look at how to integrate AngularJS with Drupal 8.
- 3,221