Downloaded 15 times
Uploaded byDotNetCampus
Fe04 angular js-101
Il documento fornisce un'introduzione ad AngularJS, esaminando le sue caratteristiche fondamentali e la sua architettura. Viene discusso l'uso di moduli, controller e viste, oltre alle tecniche di binding e dependency injection. Inoltre, vengono presentati esempi pratici di applicazione e suggerimenti per ulteriori approfondimenti.
More Related Content
Fe04 angular js-101
- 1. Template designed by AngularJS101 Mauro Servienti mauro.servienti@manageddesigns.it @mauroservienti Template designed by
- 2. Template designed by broughtto 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 •AngularJSle basi fondanti •AngularJS caratteristiche peculiari
- 5.
- 6. Applicazioni Web •Non sonopiù 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.
- 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 basifondanti
- 11. Le componenti essenziali •Application •Singolare •Modules • Plurale •Controllers & Views • Plurale
- 12. «application» •Rappresenta l’applicazione; • Potrebbeessere paragonata al «main»; •È caratterizzata da un «2 phase startup process» • Config phase • Run phase
- 13. una ed unasola? Web Server <html> pageAngularJS Application http request http response Browser
- 14. «modules» •L’applicazione è unmodulo; •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» •Specularia 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 primosguardo a quello che abbiamo visto
- 18. $scope inheritance •Lo $scopepadre è 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 avetenotato che i «costruttori» dei controller e le funzioni possono avere delle dipendenze: •Anche su «roba» nostra;
- 20. «$injector» •AngularJS ha unsuo motore di «dependency injection» che voi state implicitamente configurando
- 21. «Purtroppo» è JavaScript •QuindiDI solo basata sul «nome»; •Possibilità notevoli: e.g. Decorator; •Sopravvivenza alla «minification»:
- 22. Backend Ma non propriosolo WebAPI :-)
- 23. Struttura completa dellademo RavenDB Backend Services Queue (MSMQ) Web Api Host AngularJS Application http / ajax http / requests SignalR read Il nostro focus odierno
- 24. «services» •Dato che abbiamoDI 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 farele cose serie :-P
- 27.
- 28. «router» •Forse () visiete 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 hocorso 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 unadirettiva è 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.
- 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! :-)