Fe04 angular js-101

443 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
443
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Fe04 angular js-101

  1. 1. Template designed by AngularJS 101 Mauro Servienti mauro.servienti@manageddesigns.it @mauroservienti Template designed by
  2. 2. Template designed by brought to you by
  3. 3. Mauro Servienti CTO, Partner @ Managed Designs mauro.servienti@manageddesigns.it @mauroservienti //milestone.topics.it //blogs.ugidotnet.org/topics //github.com/mauroservienti Microsoft MVP – Visual C# NServiceBus Trainer & Support RavenDB Trainer
  4. 4. Agenda •Introduzione ad AngularJS •AngularJS le basi fondanti •AngularJS caratteristiche peculiari
  5. 5. Introduzione ad AngularJS
  6. 6. Applicazioni Web •Non sono più applicazioni web nel senso tradizionale del termine; •Il browser diventa un «mero» contenitore dedicato ad ospitare una «LOB app»; • Esattamente come avviene avveniva con Silverlight; •L’applicazione diventa una vera applicazione • Considerando poi dove ci sta portando HTML5 questo è ancora più vero (e.g. Local Storage);
  7. 7. Vademecum/1 •Html5 custom attributes: • data-ng-* •Manipolazione del DOM: • HTML == Xaml • JavaScript == C#
  8. 8. demo L’applicazione più semplice possibile
  9. 9. Vademecum/2 •La «magia» dell’Hash: • http://localhost/myApplication/#/Foo/Bar •Per convenzione tutto ciò che è erogato da AngularJS ha il prefisso «$»: • $window, $http, $scope, $resource, etc… • $window??? Perché non window del DOM del browser? • Testabilità! In AngularJS tutto è pensato per essere testato e mockato;
  10. 10. AngularJS le basi fondanti
  11. 11. Le componenti essenziali •Application • Singolare •Modules • Plurale •Controllers & Views • Plurale
  12. 12. «application» •Rappresenta l’applicazione; • Potrebbe essere paragonata al «main»; •È caratterizzata da un «2 phase startup process» • Config phase • Run phase
  13. 13. una ed una sola? Web Server <html> pageAngularJS Application http request http response Browser
  14. 14. «modules» •L’applicazione è un modulo; •Non è necessario definire moduli, basta quello dell’applicazione; •Paragonabili ad assembly o namespace •Per organizzare il nostro codice e, ove necessario, renderlo veramente modulare;
  15. 15. «controllers» & «views» •Speculari a MVC simili a MVVM; •Esistono View senza controller: PartialView; • Controller senza View? Non proprio; •Il controller non deve assolutamente manipolare il DOM: • Concettualmente sbagliato; • Renderebbe impossibile testarlo;
  16. 16. MVVM + MVC + $scope == AngularJS View Controller $scope $scope 2 way data-binding
  17. 17. demo Diamo un primo sguardo a quello che abbiamo visto
  18. 18. $scope inheritance •Lo $scope padre è ereditato dagli $scope figli; • Occhio che per come funziona l’«ereditarietà» in JS potrebbe essere un problema; • Fate un favore a voi stessi e non giocate con il fuoco; Main content (ctrl + view + $scope) Content (ctrl + view + $scope)Menu (ctrl + view + $scope)
  19. 19. «dependency injection» •Forse avete notato che i «costruttori» dei controller e le funzioni possono avere delle dipendenze: •Anche su «roba» nostra;
  20. 20. «$injector» •AngularJS ha un suo motore di «dependency injection» che voi state implicitamente configurando
  21. 21. «Purtroppo» è JavaScript •Quindi DI solo basata sul «nome»; •Possibilità notevoli: e.g. Decorator; •Sopravvivenza alla «minification»:
  22. 22. Backend Ma non proprio solo WebAPI :-)
  23. 23. Struttura completa della demo RavenDB Backend Services Queue (MSMQ) Web Api Host AngularJS Application http / ajax http / requests SignalR read Il nostro focus odierno
  24. 24. «services» •Dato che abbiamo DI abbiamo anche il concetto di Singleton e Transient • Un controller è sempre e per forza «transient» • Un servizio/componente è sempre «singleton»
  25. 25. «$broadcast» •È «UI Composition» su tutta la linea; •Le varie parti che AngularJS ha composto per noi non si conoscono; •In qualche modo devono comunicare, perché la UI è statefull: •E dall’altra parte:
  26. 26. demo Cominciamo a fare le cose serie :-P
  27. 27. Lepeculiarità Potenza allo stato puro
  28. 28. «router» •Forse () vi siete resi conto che «navighiamo» client-side; •Abbiamo un motore di «routing»; •Abbiamo un potentissimo plug-in di «routing» che ragiona a «stati»;
  29. 29. Supporto per le Regex Named «views» & multiple «views» per state Named parameters
  30. 30. «filters» •Nel secondo esempio: • ng-repeat=‘d in data’ •Fondamentalmente è un «foreach» •Ma anche un mix tra una lambda e un linguaggio funzionale: • ng-repeat=‘d in data | myFilter: { /* data */ }’
  31. 31. «filters» •Una sorta di «converter» che partecipa nella pipeline di binding; •Possiamo definire i nostri; •Possono essere concatenati a piacere; • {{data | fA | fB: 10 | fC: { ‘a’: ‘hi, there’, ‘b’: 2 } }}
  32. 32. «directives» •Se non ho corso troppo avrete notato una fastidiosa duplicazione di codice: • Header con la lista dei comandi in coda; • Pagina con la lista dei comandi in coda; •Una «direttiva» ha come scopo quello di costruire un componente visuale custom: • Uno UserControl 
  33. 33. «directives» •Onere di una direttiva è anche quello di nascondere sotto il tappeto la manipolazione del DOM; •Una direttiva è composta: • Da un «controller»; • Da un template (opzionale, è una view); • Da una «link» function che è dove avviene la manipolazione del DOM; • Tante altre cose fuori dal nostro scope attuale;
  34. 34. demo Adesso spacchiamo!
  35. 35. È stato bello :-) grazie per l’ospitalità! •Ricordatevi: • Typescript può essere un buon aiuto, Andrea il 28/2 vi illuminerà su cosa come e quando; • Se volete approfondire AngularJS o CQRS fatevi sotto, abbiamo tante date di formazione in programma; Cibo grazie! :-)

×