 AngularJS & Drupal What works good. AngularJS  Client-side JS library  Follows MVC pattern  Two-way data-binding model view  Dependency Injection.

Slides:



Advertisements
Similar presentations
Samsung Smart TV is a web-based application running on an application engine installed on digital TVs connected to the Internet.
Advertisements

Todd Kitta  Business Data Catalog (BDC) Basics  Web Parts  BDC Development  Search  API  Demo.
Introduction to jQuery (for Drupal) Amit Asaravala “aasarava” on drupal.org.
Validation in Angular 1.3 And other angular tidbits.
USING ANGULARJS WITH SITEFINITY
Using Spring 4 and AngularJS for REST-based web applications development Vladimir Sonkin Java & Web expert Luxoft Training.
LHCbPR V2 Sasha Mazurov, Amine Ben Hammou, Ben Couturier 5th LHCb Computing Workshop
Sitefinity CMS Technical Overview & Developer’s Perspective
Single Page Applications with AngluarJS Bill Wolff Rob Keiser
NextGen Technology upgrade – Synerizip - Sandeep Kamble.
SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQueryAngularJS AngularJS is a client-side JavaScript Framework for adding interactivity to HTML.
Introduction Marko Marić, Danulabs
Build /21/2017 © 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION.
Design Principles of \ Miško Hevery Father of AngularJS.
Bob German Principal Architect A New on SharePoint Development Building Light-Weight Web Parts with AngularJS
Krishna Mohan Koyya Glarimy Technology Services

AngularJS & Git Workshop Made by: Nikola Novakovic.
All Your Base Are Belong to Us. Who is Chaz Chumley?  Technical Director - Saforian  Author - Lynda.com  Govt. to Non-profit to Corporate  Over 7.
Backbone.js in the Front-end David Corbacho Román Ethan Winn.
Building Rich Apps with AngularJS on ASP.NET.
ANGULARJS A Gentle Introduction John /
Controllers and Markup Controllers, $scope, Markup, Directives, Expressions, Binding, Filters, Validation SoftUni Team Technical Trainers Software University.
Supported by EU projects 12/12/2013 Athens, Greece Open Data in Agriculture Hands-on with data infrastructures that can power your agricultural data products.
Introduction to Angular James Kahng. Terms Framework Template/environment constructed in the language where you fill in details with code Library Set.
Canopy walk through Single-Page Apps (SPAs) Benjamin Howarth Freelancer, Code Gecko Umbraco UK Festival, Fri 30 th Oct 2015 CODE GECKO.
CS50 Week 9 Sam Green ’
SE-2840 Dr. Mark L. Hornick1 AngularJS A library for JavaScript.
BIT116: Scripting Associative Arrays. Today AngularJS Q + A for the exam 2.
The basics of knowing the difference CLIENT VS. SERVER.
Click to edit Master subtitle style Full stack. SPA development.
What Is XSS ? ! Cross-site scripting (XSS) is a type of computer security vulnerability typically found in Web applications. XSS enables attackers to.
ANGULARJS A Gentle Introduction John Madison.NET User Group.
Chapter 1 Ionic Framework (overview) Front-end framework for developing hybrid mobile apps with HTML5 Yeunyong Kantanet School of Information and Communication.
Web Cache. What is Cache? Cache is the storing of data temporarily to improve performance. Cache exist in a variety of areas such as your CPU, Hard Disk.
Mobile Applications With JQuery Mobile and VDF 17.1.
Learn AngularJS by Building 10 projects. Introduction to AngularJS An Open source web application framework by Google Written in JavaScript offers complete.
Preliminary Software design and Development a Welcome to our Coding Day session one.
Modern Development Technologies in SharePoint SHAREPOINT SATURDAY OMAHA APRIL, 2016.
AngularJS. What is AngularJS  Javascript Framework  MVC  for Rich Web Application Development  by Google.
Varnish Cache and its usage in the real world Ivan Chepurnyi Owner EcomDev BV.
Chapter 5 Angularjs. Content Overview How to program with Angularjs Directives Expressions Controllers Filters HTML DOM Forms and Includes Ajax Scopes.
Angular JS and SharePoint
Web Technologies Computing Science Thompson Rivers University
Introduction to .NET Florin Olariu
The Share Widget Library
Creating Lightning Fast Apps Using AngularJS
Turbo, Turbo, Turbo! Alon Blich A.B.C.
AngularJS A Gentle Introduction John
Angular JS Training | Angular JS online Training at GoLogica
Jessica Betts, Sophia Pandey, & Ryan Amundson
AngularJS and SharePoint 2013: Lessons Learned from the Trenches
Top 10 AngularJS Interview Questions Before you decide to step up and face your AngularJS Interview questions, learn about its various features to face.
Front End Application Development We at Kushub Media have a group brimming with website specialists who comprehend the functional side of things and have.
UI Developer Overview  SV Trainings UI Developer Training is online course developed by industry experts to understand the concepts of HTML5, CSS3, Bootstrap,
MEAN stack L. Grewe.
DWR: Direct Web Remoting
Angular (JS): A Framework for Dynamic Web Pages
Dynamic HTML Path Control
Software framework University of Kurdistan
Creating Lightning Fast Apps Using AngularJS
AngularJS and SharePoint I Chris Douglas Senior SharePoint Developer ECS Web:
HTML / CSS Mai Moustafa Senior Web Designer eSpace eSpace.
Creating Lightning Fast Apps Using AngularJS
ASP.NET MVC Web Development
MVC – Model View Controller
PROGRESSIVELY DECOUPLED DRUPAL
Web Technologies Computing Science Thompson Rivers University
05 | An Introduction to AngularJS
#01# ASP.NET Core Overview Design by: TEDU Trainer: Bach Ngoc Toan
Presentation transcript:

 AngularJS & Drupal What 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

3-levels deep menu

AngularJS directives  Marker on the element to attach specified behavior 

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   $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!