Fe04 angular js-101

35
Template designed by AngularJS 101 Mauro Servienti [email protected] @mauroservienti Template designed by

Transcript of Fe04 angular js-101

Page 1: Fe04   angular js-101

Template designed by

AngularJS 101

Mauro [email protected]@mauroservienti

Template designed by

Page 2: Fe04   angular js-101

Template designed by

brought to you by

Page 3: Fe04   angular js-101

Mauro ServientiCTO, Partner @ Managed Designs

[email protected]@mauroservienti

//milestone.topics.it//blogs.ugidotnet.org/topics

//github.com/mauroservienti

Microsoft MVP – Visual C#NServiceBus Trainer & SupportRavenDB Trainer

Page 4: Fe04   angular js-101

Agenda

•Introduzione ad AngularJS

•AngularJS le basi fondanti

•AngularJS caratteristiche peculiari

Page 5: Fe04   angular js-101

Introduzione ad AngularJS

Page 6: Fe04   angular js-101

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);

Page 7: Fe04   angular js-101

Vademecum/1

•Html5 custom attributes:• data-ng-*

•Manipolazione del DOM:• HTML == Xaml• JavaScript == C#

Page 8: Fe04   angular js-101

dem

o L’applicazione più

semplice possibile

Page 9: Fe04   angular js-101

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;

Page 10: Fe04   angular js-101

AngularJS le basi fondanti

Page 11: Fe04   angular js-101

Le componenti essenziali

•Application• Singolare

•Modules• Plurale

•Controllers & Views• Plurale

Page 12: Fe04   angular js-101

«application»

•Rappresenta l’applicazione;• Potrebbe essere paragonata al «main»;

•È caratterizzata da un «2 phase startup process»• Config phase• Run phase

Page 13: Fe04   angular js-101

una ed una sola?

Web Server

<html> pageAngularJS Application

http request

http response

Browser

Page 14: Fe04   angular js-101

«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;

Page 15: Fe04   angular js-101

«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;

Page 16: Fe04   angular js-101

MVVM + MVC + $scope == AngularJS

View Controller

$scope

$scope 2 way data-binding

Page 17: Fe04   angular js-101

dem

o Diamo un primo

sguardo a quello che

abbiamo visto

Page 18: Fe04   angular js-101

$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)

Page 19: Fe04   angular js-101

«dependency injection»

•Forse avete notato che i «costruttori» dei controller e le funzioni possono avere delle dipendenze:

•Anche su «roba» nostra;

Page 20: Fe04   angular js-101

«$injector»

•AngularJS ha un suo motore di «dependency injection» che voi state implicitamente configurando

Page 21: Fe04   angular js-101

«Purtroppo» è JavaScript

•Quindi DI solo basata sul «nome»;

•Possibilità notevoli: e.g. Decorator;

•Sopravvivenza alla «minification»:

Page 22: Fe04   angular js-101

Backen

d

Ma non proprio solo

WebAPI :-)

Page 23: Fe04   angular js-101

Struttura completa della demo

RavenDB

BackendServices

Queue(MSMQ)

Web ApiHost

AngularJSApplicatio

n

http / ajax

http / requests

SignalRread

Il nostro focus odierno

Page 24: Fe04   angular js-101

«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»

Page 25: Fe04   angular js-101

«$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:

Page 26: Fe04   angular js-101

dem

o Cominciamo a fare le

cose serie :-P

Page 27: Fe04   angular js-101

Le p

ecu

liari

Potenza allo stato

puro

Page 28: Fe04   angular js-101

«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»;

Page 29: Fe04   angular js-101

Supporto per le Regex

Named «views» & multiple

«views» per state

Named parameters

Page 30: Fe04   angular js-101

«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 */ }’

Page 31: Fe04   angular js-101

«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 } }}

Page 32: Fe04   angular js-101

«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

Page 33: Fe04   angular js-101

«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;

Page 34: Fe04   angular js-101

dem

o Adesso spacchiamo!

Page 35: Fe04   angular js-101

È 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! :-)