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!
Top Related