Fe04 angular js-101
Download as PPTX, PDF0 likes540 views
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.
Fe04 angular js-101
- 1. Template designed by AngularJS 101 Mauro Servienti [email protected] @mauroservienti Template designed by
- 2. Template designed by brought to you by
- 3. Mauro Servienti CTO, Partner @ Managed Designs [email protected] @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
- 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#
- 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;
- 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! :-)