angularjs & drupal what works good. angularjs client-side js library follows mvc pattern ...
TRANSCRIPT
![Page 1: AngularJS & Drupal What works good. AngularJS Client-side JS library Follows MVC pattern Two-way data-binding model view Dependency Injection](https://reader031.vdocument.in/reader031/viewer/2022032703/56649d145503460f949e8205/html5/thumbnails/1.jpg)
S
AngularJS & DrupalWhat works good
![Page 2: AngularJS & Drupal What works good. AngularJS Client-side JS library Follows MVC pattern Two-way data-binding model view Dependency Injection](https://reader031.vdocument.in/reader031/viewer/2022032703/56649d145503460f949e8205/html5/thumbnails/2.jpg)
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
![Page 3: AngularJS & Drupal What works good. AngularJS Client-side JS library Follows MVC pattern Two-way data-binding model view Dependency Injection](https://reader031.vdocument.in/reader031/viewer/2022032703/56649d145503460f949e8205/html5/thumbnails/3.jpg)
MODELYour data to show
VIEWThe template to use for your data with
data-mapping instructions
CONTROLLERJS code that changes the
MODEL (data)
![Page 4: AngularJS & Drupal What works good. AngularJS Client-side JS library Follows MVC pattern Two-way data-binding model view Dependency Injection](https://reader031.vdocument.in/reader031/viewer/2022032703/56649d145503460f949e8205/html5/thumbnails/4.jpg)
3-levels deep menu
![Page 5: AngularJS & Drupal What works good. AngularJS Client-side JS library Follows MVC pattern Two-way data-binding model view Dependency Injection](https://reader031.vdocument.in/reader031/viewer/2022032703/56649d145503460f949e8205/html5/thumbnails/5.jpg)
![Page 6: AngularJS & Drupal What works good. AngularJS Client-side JS library Follows MVC pattern Two-way data-binding model view Dependency Injection](https://reader031.vdocument.in/reader031/viewer/2022032703/56649d145503460f949e8205/html5/thumbnails/6.jpg)
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”>
![Page 7: AngularJS & Drupal What works good. AngularJS Client-side JS library Follows MVC pattern Two-way data-binding model view Dependency Injection](https://reader031.vdocument.in/reader031/viewer/2022032703/56649d145503460f949e8205/html5/thumbnails/7.jpg)
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; });});
![Page 8: AngularJS & Drupal What works good. AngularJS Client-side JS library Follows MVC pattern Two-way data-binding model view Dependency Injection](https://reader031.vdocument.in/reader031/viewer/2022032703/56649d145503460f949e8205/html5/thumbnails/8.jpg)
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';};
![Page 9: AngularJS & Drupal What works good. AngularJS Client-side JS library Follows MVC pattern Two-way data-binding model view Dependency Injection](https://reader031.vdocument.in/reader031/viewer/2022032703/56649d145503460f949e8205/html5/thumbnails/9.jpg)
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']);
![Page 10: AngularJS & Drupal What works good. AngularJS Client-side JS library Follows MVC pattern Two-way data-binding model view Dependency Injection](https://reader031.vdocument.in/reader031/viewer/2022032703/56649d145503460f949e8205/html5/thumbnails/10.jpg)
Alternative to ESI
Pages are delivered by Varnish or other reverse proxy
Some parts of them should be dynamic
Build these parts using AngularJS
![Page 11: AngularJS & Drupal What works good. AngularJS Client-side JS library Follows MVC pattern Two-way data-binding model view Dependency Injection](https://reader031.vdocument.in/reader031/viewer/2022032703/56649d145503460f949e8205/html5/thumbnails/11.jpg)
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)