AngularJS & Drupal What works good. AngularJS Client-side JS library Follows MVC pattern ...

S

AngularJS & DrupalWhat works good

AngularJS

Client-side JS library

Follows MVC pattern

Two-way data-binding model <-> view

Dependency Injection

Decouples theming aspects from Drupal Allows to write HTML and CSS from scratch

MODELYour data to show

VIEWThe template to use for your data with

data-mapping instructions

CONTROLLERJS code that changes the

MODEL (data)

3-levels deep menu

AngularJS directives

Marker on the element to attach specified behavior

<div id="ok-instagram" class="ok-block ok-instagram" data-ng-app="Instagram" data-ng-controller="InstagramController”>

AngularJS controller

JS code to rule the application

var InstagramModule = angular.module('Instagram', ['ngTouch']);InstagramModule.controller('InstagramController', function($scope, $http, $interval) { // Get the data. $http.get(Drupal.settings.ok_instagram).success(function(data) { $scope.items = data; $scope.index = 0; });});

More directives

<div class="block-link" data-ng-repeat="item in items" data-ng-class="itemClass($index)" data-ng-swipe-left="swipeNextItem()" data-ng-swipe-right="swipePrevItem()">

$scope.itemClass = function(item_index) { return ($scope.index === item_index) ? 'active-true' : 'active-false';};

Several Applications per page

You can have as many ng-app per page as you want

Just use the “angular.bootstrap()”

// Bootstrap AngularJS application.angular.bootstrap(document.getElementById('ok-instagram'), ['Instagram']);

Alternative to ESI

Pages are delivered by Varnish or other reverse proxy

Some parts of them should be dynamic

Build these parts using AngularJS

Full page applications

Front-end uses only AngularJS

You should keep the exposed back-end APIs fixed

Back-end can evolve and change while the front-end applications consume the same API

BUT: search engines index (prerender.io)

Thank you!

andrew.berezovsky@gmail.com