PER RINNOVARE IL SITO DEL JUG TRENTO. Riccardo Tasso

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "PER RINNOVARE IL SITO DEL JUG TRENTO. Riccardo Tasso (@riccardotasso)"

Ilaria Puglisi
8 anni fa
Visualizzazioni

1 PER RINNOVARE IL SITO DEL JUG TRENTO Riccardo Tasso

2 ANGULARJS lightweight framework 100% javascript supporto per i browser moderni (> IE 8) licenza MIT (permissiva) (by Google)

3 ANGULARJS documentazione ricca, con esempi Blog Mailing List IRC - chat stackoverflow Twitter Google+ Youtube Github (issue tracker) Design Docs & Notes Code School ng-conf

4 PERCHÉ? disaccoppiamento di manipolazione del DOM dalla logica applicativa (evitate jquery!!!) facilitare il test dell applicazione disaccoppiamento dell applicazione web dalla componente server strutturare l applicazione per facilitare il design della UI, dalla scrittura della logica di business al testing

5 PERCHÉ NO? server side (php, JSP,...) javascript fai da te (jquery, JSRender,...) altri framework (backbone.js, ember.js,...) sperimentiamo una nuova tecnologia!

6 AngularJS vs. Backbone.js vs. Ember.js (U. Shaked)

7 MODEL VIEW CONTROLLER

8 Design Principles of AngularJS (M. Hevery, B. Green)

9 CONFIGURAZIONE DI UNA WEBAPP <!DOCTYPE html> <html lang="en" ng app="jugtaasapp"> <head> <title>jug Trento Home</title> <script src="lib/angular.min.js"></script> <script src="lib/angular route.min.js"></script> <script src="js/controllers.js"></script> <! quello che serve > </head> <body> <div class="container"> <div class="masthead"><! quello che serve ></div> <div ng view></div> <div class="footer"><! quello che serve ></div> </div> </body> </html>

min.js"></script> <script src="lib/angular route.min.js"></script> <script src="js/controllers.js"></script> <! quello che serve > </head> <body> <div class="container"> <div class="masthead"><!

10 CONFIGURAZIONE DI UNA WEBAPP var jugtaasapp = angular.module('jugtaasapp', ['ngroute']); jugtaasapp.config(['$routeprovider', function($routeprovider) { $routeprovider. when('/home', { templateurl: 'partials/home.html', }). when('/events', { templateurl: 'partials/incontri.html', controller: 'EventListController' }). when('/events/new', { templateurl: 'partials/incontro.html', }). when('/events/:id', { templateurl: 'partials/incontro.html', }). otherwise({ redirectto: 'home' }); } ]);

when('/events', { templateurl: 'partials/incontri.html', controller: 'EventListController' }).

11 LISTA DEGLI EVENTI

12 LISTA DEGLI EVENTI (VIEW) <ul class="cbp_tmtimeline"> <li ng repeat="event in events"> <time class="cbp_tmtime">{{dateandtime}}</time> <div class="cbp_tmicon cbp_tmicon arrow r"></div> <div class="cbp_tmlabel"> <h2><a href="#/events/{{event.id}}">{{event.title}}</a></ <h3>relatore: <span ng repeat="speaker in event.speakers"> <a ng if="speaker.url" href="{{speaker.url}}" {{speaker.name}} {{speaker.surname}} </a> <span ng if="!speaker.url"> {{speaker.name}} {{speaker.surname}} </span>{{$last? '' : ', '}} </span> </h3> <p>{{place}}</p> </div> </li> </ul>

title}}</a></ <h3>relatore: <span ng repeat="speaker in event.speakers"> <a ng if="speaker.url" href="{{speaker.url}}" {{speaker.

13 LISTA DEGLI EVENTI (CONTROLLER) jugtaasapp.controller('eventlistcontroller', function ($scope, $http) { $http.get('services/events').success(function(data) { $scope.events = []; }); }); angular.foreach(data._links, function (eventurl, idx) { $http.get(eventurl).then(function(response) { $scope.events[idx] = response.data; }) });

$events = []; }); }); angular.foreach(data._links, function (eventurl, idx) { $http.$

14 DIRETTIVE sono dei marker su elementi del DOM che dicono al compilatore HTML di collegare un comportamento specifico a quell elemento (o trasformarlo) compilare: collegare un listener di eventi a quell'elemento direttive: come attributo, come classe, come elemento, come commento built-ins: ng-app, ng-controller, ng-repeat, ng-switch, nginit, ng-click, ng-change, ng-model,...

eventi a quell'elemento direttive: come attributo, come classe, come elemento, come commento

15 DIRETTIVE PERSONALIZZATE una direttiva è una funzione che viene eseguita al "momento di compilazione" restrict: decidere se può essere usata come attributo, classe, elemento, commento template: definisce l'output (templateurl) controller: definisce il controller che può essere associato al template link: funzione usata per manipolare il DOM

elemento, commento template: definisce l'output (templateurl) controller: definisce

16 Build custom directives with AngularJS (ng-newsletter.com) Creating Custom AngularJS Directives Part I The Fundamentals (Dan Wahlin)

17 SERVIZI un servizio è un oggetto reso disponibile tramite Dependency Injection sono singleton sono lazy permettono di riutilizzare codice all'interno dell'applicazione sono identificati con il $ (e.g. $http)

lazy permettono di riutilizzare codice all'interno

18 FORM DEGLI EVENTI

19 FORM DEGLI EVENTI (VIEW)

20 FORM DEGLI EVENTI (VIEW) ngmodel: effettua il collegamento (binding) tra view e e model fornisce validazione degli input mantiene lo stato della validazione: valid/invalid, dirty/pristine, touched/untouched, validation errors assegna le classi css

mantiene lo stato della validazione: valid/invalid,

21 FORM DEGLI EVENTI (CONTROLLER) jugtaasapp.controller('eventcontroller', function( $scope, $http, $route, $routeparams, $q, $location) { $scope.update = function(event) {/*... */}; $scope.create = function(event) {/*... */}; if(!$routeparams.id) { return; } }); function getspeakersfrom(speakers, persons) {/*... */}; var personscall = $http.get('services/persons'); var eventcallurl = 'services/events/' + $routeparams.id; var eventcall = $http.get(eventcallurl); $q.all([personscall, eventcall]).then(function(results) {/*... */});

22 FORM DEGLI EVENTI (CONTROLLER) $scope.update = function(event) { $scope.event = angular.copy(event); var id = $scope.event.id; }; $http.put('services/events/' + id, $scope.event).success(function(data) { $route.reload(); });

23 FORM DEGLI EVENTI (CONTROLLER) $scope.create = function(event) { $scope.event = angular.copy(event); }; $http.post('services/events/', $scope.event).success(function(data) { $location.path("events/" + data.id); });

24 FORM DEGLI EVENTI (CONTROLLER) var personscall = $http.get('services/persons'); var eventcallurl = 'services/events/' + $routeparams.id; var eventcall = $http.get(eventcallurl); $q.all([personscall, eventcall]).then(function(results) { var personsdata = results[0].data._links; var eventdata = results[1].data; }); // Ora dobbiamo popolare lo $scope

25 FORM DEGLI EVENTI (CONTROLLER) var personsurls = []; for(key in personsdata) { personsurls[parseint(key)] = $http.get(personsdata[key]); } $q.all(personsurls).then(function(innerresults) { // ora abbiamo i dati di tutte le persone });

26 FORM DEGLI EVENTI (CONTROLLER) var persons = [] for(i in innerresults) { persons[i] = innerresults[i].data; } $scope.persons = persons; var speakers = getspeakersfrom(eventdata.speakers, $scope.persons); var event = eventdata; event.speakers = speakers; $scope.event = event;

27 FORM DEGLI EVENTI (CONTROLLER) var getspeakersfrom = function(speakers, persons) { for(s in speakers) { var speaker = speakers[s]; for(p in persons) { var person = persons[p]; if(person.id == speaker.id) { speakers[s] = person; break; } } } }; return speakers;

28 COSA MANCA? internazionalizzazione, localizzazione filtri query autenticazione implementazione degli unit test Batarang: estende Chrome dev tools aggiungendo strumenti per debugging e profilazione

29 ANGULARJS 2 Le promesse: prestazioni da urlo semplice da imparare retrocompatibilità

30 ANGULARJS 2 La realtà: a giorni la versione 1.4 la versione 1.5 comincerà a spingere verso la versione 2 "We ll continue building releases in the Angular 1 branch until the vast majority of folks have moved to Angular 2"

31 GRAZIE PER L'ATTENZIONE DOMANDE?

Documenti analoghi

Sviluppare applicazioni HTML5 solide e scalabili in AngularJS

Sviluppare applicazioni HTML5 solide e scalabili in AngularJS PREREQUESITI: Il partecipante dovrà possedere una certà familiarità con l uso di HTML, Javascript (variabili, manipolazione array e oggetti,