Your SlideShare is downloading. ×
Fe04   angular js-101
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Fe04 angular js-101

177

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
177
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Template designed by AngularJS 101 Mauro Servienti mauro.servienti@manageddesigns.it @mauroservienti Template designed by
  • 2. Template designed by brought to you by
  • 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. Agenda •Introduzione ad AngularJS •AngularJS le basi fondanti •AngularJS caratteristiche peculiari
  • 5. Introduzione ad AngularJS
  • 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. Vademecum/1 •Html5 custom attributes: • data-ng-* •Manipolazione del DOM: • HTML == Xaml • JavaScript == C#
  • 8. demo L’applicazione più semplice possibile
  • 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. AngularJS le basi fondanti
  • 11. Le componenti essenziali •Application • Singolare •Modules • Plurale •Controllers & Views • Plurale
  • 12. «application» •Rappresenta l’applicazione; • Potrebbe essere paragonata al «main»; •È caratterizzata da un «2 phase startup process» • Config phase • Run phase
  • 13. una ed una sola? Web Server <html> pageAngularJS Application http request http response Browser
  • 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. «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. MVVM + MVC + $scope == AngularJS View Controller $scope $scope 2 way data-binding
  • 17. demo Diamo un primo sguardo a quello che abbiamo visto
  • 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. «dependency injection» •Forse avete notato che i «costruttori» dei controller e le funzioni possono avere delle dipendenze: •Anche su «roba» nostra;
  • 20. «$injector» •AngularJS ha un suo motore di «dependency injection» che voi state implicitamente configurando
  • 21. «Purtroppo» è JavaScript •Quindi DI solo basata sul «nome»; •Possibilità notevoli: e.g. Decorator; •Sopravvivenza alla «minification»:
  • 22. Backend Ma non proprio solo WebAPI :-)
  • 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. «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. «$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. demo Cominciamo a fare le cose serie :-P
  • 27. Lepeculiarità Potenza allo stato puro
  • 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. Supporto per le Regex Named «views» & multiple «views» per state Named parameters
  • 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. «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. «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. «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. demo Adesso spacchiamo!
  • 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! :-)

×