luca.milan@dotdotnet.org
Illustreremo il «magnifico» mondo di AngularJS cercandodi capire le potenzialità di questo framework per losviluppo di app...
Come sono cambiati gli approccinella creazione di applicazioni webdurante gli ultimi 15 anni
http://yahoo.comSnapshot del 31 Maggio del 2000
http://yahoo.comMaggio del 2013
“Your code calls a library but aframework calls your code”http://gettingreal.37signals.com/ch04_Make_Opinionated_Software....
La filosofia, la storia, le astrazioni e iconcetti chiave alla base di AngularJS
There is nothing to inherit, nothing to call...This is a stark contrast to most frameworks whichforce you to implement its...
 Approccio Dichiarativo alla programmazione (DSL) Two-Way Databind / Modello osservabile Usa Plain Old Javascript Objec...
Primo esempio: «Hello World» ofcourse!
<!doctype html><html><head><script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><script type="text/javascript...
<!doctype html><html ng-app><head><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></scri...
jQuery fornisce un’astrazione sulle funzionalità delbrowser (navigare il DOM, abbonarsi ad eventi, ecc…)AngularJS costruis...
 L’HTML è un linguaggio di Codifica (markup) pensatoper la creazioni di ipertesti. Fa parte della famiglia deilinguaggi D...
 AngularJS può intercettare questo evento e riscriveretutto o parte del DOM Il processo di riscrittura è “guidato” dal m...
 Pattern MVC Scope Expression {{ }} DataBinding (1 & 2Way) Direttive Filtri Routing Templating Dependency Injecti...
“For several years AngularJS was closer to MVC (or rather oneof its client-side variants), but over time and thanks to man...
 Caricamento di AngularJS (CDN o locale)<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js...
Possiamo pensare al controller come il punto diconnessione tra il model e la view. Ma cosa faesattamente:1. Inizializza lo...
E’ un «servizio» fondamentale per AngularJS:1. E’ il contenitore del Model (Scope != Model)2. Per ogni controller esiste u...
Le modifiche apportareal modello sonopropagateautomaticamenteda AngularJS
Estendono il vocabolario HTML con tag e attributipersonalizzati. Possiamo definire un Domain SpecificLanguage per la UI de...
Esiste un apposito servizio $http per «parlare» in modoasincrono con il server. Restituisce delle promises chesono analogh...
Non hanno lo stesso significato che gli attribuiamo nelbackend. Sono oggetti che incapsulano parti di codice comune atutt...
 Pattern Architetturale Favorisce la separazione delle responsabilità tra icomponenti Promuove la testabilità del frame...
 Aiutano la formattazione dei dati Possono limitare o controllare il numero di elementicon cui iterare sulla view (pagin...
Il miglior modo per capire AngularJS è provarlo!http://angularjs-mybooks.azurewebsites.net
 La DotDotNet è unassociazione culturale con il compito dipromuovere la più ampia diffusione dellinformatica, dellatelema...
AngularJS – Reinventare le applicazioni web
AngularJS – Reinventare le applicazioni web
AngularJS – Reinventare le applicazioni web
AngularJS – Reinventare le applicazioni web
AngularJS – Reinventare le applicazioni web
AngularJS – Reinventare le applicazioni web
AngularJS – Reinventare le applicazioni web
AngularJS – Reinventare le applicazioni web
Upcoming SlideShare
Loading in …5
×

AngularJS – Reinventare le applicazioni web

5,683 views

Published on

Published in: Technology
2 Comments
10 Likes
Statistics
Notes
No Downloads
Views
Total views
5,683
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
2
Likes
10
Embeds 0
No embeds

No notes for slide

AngularJS – Reinventare le applicazioni web

  1. 1. luca.milan@dotdotnet.org
  2. 2. Illustreremo il «magnifico» mondo di AngularJS cercandodi capire le potenzialità di questo framework per losviluppo di applicazioni web «moderne» Parte 1. Panoramica sul «FrontEnd» Parte 2. Introduzione Parte 3. Building Blocks Parte 4. MyBooks SPA
  3. 3. Come sono cambiati gli approccinella creazione di applicazioni webdurante gli ultimi 15 anni
  4. 4. http://yahoo.comSnapshot del 31 Maggio del 2000
  5. 5. http://yahoo.comMaggio del 2013
  6. 6. “Your code calls a library but aframework calls your code”http://gettingreal.37signals.com/ch04_Make_Opinionated_Software.php
  7. 7. La filosofia, la storia, le astrazioni e iconcetti chiave alla base di AngularJS
  8. 8. There is nothing to inherit, nothing to call...This is a stark contrast to most frameworks whichforce you to implement its interfaces, call its APIand live by its lifecycle and its events.It really is just a better browser!Misko Hevery creatore di AngularJSI often say that Angular is what theweb browser would have been, had itbeen designed for applications…
  9. 9.  Approccio Dichiarativo alla programmazione (DSL) Two-Way Databind / Modello osservabile Usa Plain Old Javascript Objects (POJO) È facilmente integrabile con jQuery Testabile in ogni sua parte: Test First , Test All Design trasparente e coerente (Architettura SOLIDa)
  10. 10. Primo esempio: «Hello World» ofcourse!
  11. 11. <!doctype html><html><head><script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><script type="text/javascript">$(function() {$("#yourName").keyup(function () {$("#helloName").text("Hello " + this.value + "!");});});</script></head><body><div><label>Name:</label><input type="text" id="yourName"><hr><h1 id="helloName"></h1></div></body></html>
  12. 12. <!doctype html><html ng-app><head><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script></head><body><div><label>Hello</label><input type="text" ng-model="yourName"><hr><h1>Hello {{ yourName || „Luca‟ }}!</h1></div></body></html>
  13. 13. jQuery fornisce un’astrazione sulle funzionalità delbrowser (navigare il DOM, abbonarsi ad eventi, ecc…)AngularJS costruisce invece un’astrazione più sofisticataimperniata sulle relazioni tra gli elementi contenuti nellapagina web.Il valore di AngularJS sta nel nascondere la complessità diquesto approccio.
  14. 14.  L’HTML è un linguaggio di Codifica (markup) pensatoper la creazioni di ipertesti. Fa parte della famiglia deilinguaggi Dichiarativi Il Browser traduce l’HTML in un Document ObjectModel cioè la rapprentazione in memoria deldocumento Quando termina la costruzione del DOM il Browserinvia un evento “Ready()”
  15. 15.  AngularJS può intercettare questo evento e riscriveretutto o parte del DOM Il processo di riscrittura è “guidato” dal markupcontenuto nel DOM stesso<input type=“text” focus value=“{{Name }}”/><welcome message=„HelloAngularJS!‟/>
  16. 16.  Pattern MVC Scope Expression {{ }} DataBinding (1 & 2Way) Direttive Filtri Routing Templating Dependency Injection Module Service models◦ Provider◦ Factory◦ Service◦ Value ConstantNON POTREMO VEDERLI TUTTI!
  17. 17. “For several years AngularJS was closer to MVC (or rather oneof its client-side variants), but over time and thanks to manyrefactorings and api improvements, its now closer to MVVM –the $scope object could be considered the ViewModel that isbeing decorated by a function that we call a Controller.……I hereby declare AngularJS to be MVW framework - Model-View-Whatever”Igor Minar – Google AngularJS Development Team
  18. 18.  Caricamento di AngularJS (CDN o locale)<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> Fase di Bootstrap<html ng-app> Dichiarazione delle relazioni (tramite markup)ng-model="yourName" oppure {{yourName}} Fase di Plumbing (opzionale)angular.module(„myApp‟).config(…).run(…);
  19. 19. Possiamo pensare al controller come il punto diconnessione tra il model e la view. Ma cosa faesattamente:1. Inizializza lo Scope2. Aggiunge comportamenti allo Scope (le azioni deipulsanti, dei link, ecc..)3. Invoca i servizi4. Deve essere «leggero» ( NO! Fat Controller )5. E’ simile al code behind di una pagina ASP.NET
  20. 20. E’ un «servizio» fondamentale per AngularJS:1. E’ il contenitore del Model (Scope != Model)2. Per ogni controller esiste un solo Scope3. Lo Scope eredita in modo prototipale dal proprioPadre4. Esiste un RootScope globale e condiviso da tuttal’applicazione5. Possiamo creare Scope Isolati e protetti solo nelleDirettive
  21. 21. Le modifiche apportareal modello sonopropagateautomaticamenteda AngularJS
  22. 22. Estendono il vocabolario HTML con tag e attributipersonalizzati. Possiamo definire un Domain SpecificLanguage per la UI della web appliations.Vi sono direttive custom e di sistema, ve sono oltre 50tra cui:<ng-repeat>, <ng-switch> <ng-show>, <ng-hide>, <ng-class> <ng-include>, <ng-view> multiple, selected,checked, disabled, readonly, required
  23. 23. Esiste un apposito servizio $http per «parlare» in modoasincrono con il server. Restituisce delle promises chesono analoghe ai Task di .NET$http({method: „GET‟, url:fetchUrl}).success(function(data,status) {// dati}).error(function(data, status){);$http.get(), $http.post(),$http.delete(),
  24. 24. Non hanno lo stesso significato che gli attribuiamo nelbackend. Sono oggetti che incapsulano parti di codice comune atutta l’applicazione (promuovono il riuso). Vengono instanziati tramite Dependency Injection Ci sono più strategie di attivazione (Provider, Factory,Service, Value) Esistono servizi built-in ($http, $q, $window, $log,ecc..) Possono essere «estesi» tramite pattern es: Decorator,Proxy, ecc..
  25. 25.  Pattern Architetturale Favorisce la separazione delle responsabilità tra icomponenti Promuove la testabilità del framework Migliora la modularità del codice Lato Javascript:◦ I Servizi vengono identificati per nome e iniettati nellefunction◦ Usa il concetto di «annotation» per superare i problemi dirisoluzione dei nomi delle dipendenze nelle risorse«minificate»
  26. 26.  Aiutano la formattazione dei dati Possono limitare o controllare il numero di elementicon cui iterare sulla view (paginazione, orderby) Come in Unix sono concatenabili ( | ){{ firstName | lowercase }{{ amount | currency:”€” }{{items | orderBy:timestamp:true | limitTo:10}}
  27. 27. Il miglior modo per capire AngularJS è provarlo!http://angularjs-mybooks.azurewebsites.net
  28. 28.  La DotDotNet è unassociazione culturale con il compito dipromuovere la più ampia diffusione dellinformatica, dellatelematica, della multimedialità e dei collaborative tools, conparticolare attenzione allo sviluppo di software su piattaformaMicrosoft .NET. (dall’art. 1 dello statuto DotDotNet) Associazione no-profit◦ Opera in tutta la regione Gruppo di professionisti, studenti e appassionati. Feedback Adesione:http://dotdotnet.org/content/Adesione.aspx

×