AngularJS & Drupal - DrupalCamp MSK 2014

AngularJS & Drupal
What works good
S Client-side JS library
S Follows MVC pattern
S Two-way data-binding model <-> view
S Dependency Injection
S Decouples theming aspects from Drupal
S Allows to write HTML and CSS from scratch
3-levels deep menu
AngularJS directives
S Marker on the element to attach specified behavior
S <div id="ok-instagram" class="ok-block ok-instagram"
data-ng-app="Instagram" data-ngcontroller="InstagramController”>
AngularJS controller
S JS code to rule the application
S var InstagramModule = angular.module('Instagram',
function($scope, $http, $interval) {
// Get the data.
$http.get(Drupal.settings.ok_instagram).success(function(data) {
$scope.items = data;
$scope.index = 0;
More directives
S <div class="block-link" data-ng-repeat="item in items"
data-ng-class="itemClass($index)" data-ng-swipeleft="swipeNextItem()" data-ng-swiperight="swipePrevItem()">
S $scope.itemClass = function(item_index) {
return ($scope.index === item_index) ? 'active-true' :
Several Applications per page
S You can have as many ng-app per page as you want
S Just use the “angular.bootstrap()”
S // Bootstrap AngularJS application.
angular.bootstrap(document.getElementById('okinstagram'), ['Instagram']);
Alternative to ESI
S Pages are delivered by Varnish or other reverse proxy
S Some parts of them should be dynamic
S Build these parts using AngularJS
Full page applications
S Front-end uses only AngularJS
S You should keep the exposed back-end APIs fixed
S Back-end can evolve and change while the front-end
applications consume the same API
S BUT: search engines index (
Thank you!
[email protected]

similar documents