Post on 24-May-2015
Template designed by
AngularJS 101
Mauro Servientimauro.servienti@manageddesigns.it@mauroservienti
Template designed by
Template designed by
brought to you by
Mauro ServientiCTO, Partner @ Managed Designs
mauro.servienti@manageddesigns.it@mauroservienti
//milestone.topics.it//blogs.ugidotnet.org/topics
//github.com/mauroservienti
Microsoft MVP – Visual C#NServiceBus Trainer & SupportRavenDB Trainer
Agenda
•Introduzione ad AngularJS
•AngularJS le basi fondanti
•AngularJS caratteristiche peculiari
Introduzione ad AngularJS
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);
Vademecum/1
•Html5 custom attributes:• data-ng-*
•Manipolazione del DOM:• HTML == Xaml• JavaScript == C#
dem
o L’applicazione più
semplice possibile
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;
AngularJS le basi fondanti
Le componenti essenziali
•Application• Singolare
•Modules• Plurale
•Controllers & Views• Plurale
«application»
•Rappresenta l’applicazione;• Potrebbe essere paragonata al «main»;
•È caratterizzata da un «2 phase startup process»• Config phase• Run phase
una ed una sola?
Web Server
<html> pageAngularJS Application
http request
http response
Browser
«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;
«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;
MVVM + MVC + $scope == AngularJS
View Controller
$scope
$scope 2 way data-binding
dem
o Diamo un primo
sguardo a quello che
abbiamo visto
$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)
«dependency injection»
•Forse avete notato che i «costruttori» dei controller e le funzioni possono avere delle dipendenze:
•Anche su «roba» nostra;
«$injector»
•AngularJS ha un suo motore di «dependency injection» che voi state implicitamente configurando
«Purtroppo» è JavaScript
•Quindi DI solo basata sul «nome»;
•Possibilità notevoli: e.g. Decorator;
•Sopravvivenza alla «minification»:
Backen
d
Ma non proprio solo
WebAPI :-)
Struttura completa della demo
RavenDB
BackendServices
Queue(MSMQ)
Web ApiHost
AngularJSApplicatio
n
http / ajax
http / requests
SignalRread
Il nostro focus odierno
«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»
«$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:
dem
o Cominciamo a fare le
cose serie :-P
Le p
ecu
liari
tà
Potenza allo stato
puro
«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»;
Supporto per le Regex
Named «views» & multiple
«views» per state
Named parameters
«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 */ }’
«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 } }}
«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
«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;
dem
o Adesso spacchiamo!
È 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! :-)