Il documento fornisce una panoramica dettagliata di Angular, un framework per lo sviluppo di applicazioni web e mobili, evidenziando le sue caratteristiche principali come la modularità, l'architettura basata su componenti e la produttività attraverso strumenti come Angular CLI. Viene discussa anche l'integrazione con librerie esterne, l'uso di Firebase e l'importanza delle direttive e dei servizi. Inoltre, si approfondisce il processo di sviluppo, il coinvolgimento della comunità open source, le best practices e le innovazioni recenti in Angular.

1. Angular Overview
Francesco Sciuti
www.acadevmy.it | info@acadevmy.it | francesco@acadevmy.it
1

2. Cosa facciamo
Web Mobile DevOps Labs Formazione
2

3. Formazione
Training Eventi Talks
3

4. Chi Sono?
Developer per scelta e per passione,
amante di nerdaggini di ogni tipo
ed amante della condivisione del sapere!
4 . 1

5. Di recente mi piacciono
4 . 2

6. 4 . 3

7. passiamo quindi all'argomento di oggi...
Angular Framework
5

8. One framework. Mobile & desktop.
Cross Platform
(PWA, Native, Desktop)
Veloce e Performante
(Code Generation, Universal, Code Splitting)
Produttività
(Templates, Angular CLI, IDEs)
Pensato per la Full Dev Story
(Testing, Animation, Accessibility)
6

9. SEMPLIFICA lo sviluppo di applicazioni web dinamiche
PRODUTTIVITÀ numerose funzionalità e utility incluse
MANUTENIBILITÀ codice leggibile e ben organizzato
RIDUCE i tempi di inserimento di nuovi membri in team e progetti
EFFICIENZA, PERFORMANCE E GESTIONE MEMORIA
ECOSISTEMA ricco di tools, librerie, componenti ready-to-use,
addons
COMMUNITY open source, supporto/forum/articoli, fix/PR
frequenti
7

10. Angular
Scrivere template HTML con markup ng+,
componenti per gestirli
e servizi per la logica applicativa.
Il tutto impacchettato nei moduli !
8

11. Components
Templating
Forms
Built-in Directives
Pipes
Routing
Modules
Services
DI
Server Side Communication
Testing
e tanto altro...
Angular Framework è
9

12. NG Simple (Dynamic) Dashboard
10

13. NG-Dashboard Home Login Signup
Your email
Please enter a valid email.
Your password
Please enter your password.
Submit
Console  1
   https://nbwivylj.github.stackblitz.io/login
Edit on StackBlitznbwivylj.github Editor Preview Both
11

14. Di cosa parleremo oggi?
NG Simple (Dynamic) Dashboard
Panoramica su Angular
Architettura delle Applicazioni
Component Communication & Change Detection
Dynamic Components
Dependency Injection
RxJS Observable, Subject e Subscription
12

15. Come l'abbiamo sviluppata?
NG Simple (Dynamic) Dashboard
Angular CLI
Angular Material / Angular Flex
Firebase (AngularFire)
AGM
Graphs Library
13 . 1

16. Come l'abbiamo sviluppata?
NG Simple (Dynamic) Dashboard
CompoDoc
webpack-bundle-analyzer
source-map-explorer
13 . 2

17. Angular - Architettura
14 . 1

18. Angular - Architettura
14 . 2

19. Angular - Boostrap dell'Applicazione
Configurazione angular.json
Root Module (comunemente AppModule)
Componente di Bootstrap
Parsing del Template del Componente
...e gestione di tutti i child components!
14 . 3

20. Angular - Modules
La app Angular sono modulari ed il sistema di modularità è
NgModules.
NgModules configura l'injector, il compilatore e aiuta a
organizzare insieme le entità.
Possono essere caricati all'avvio dell'applicazione o in modo
asincrono dal router.
È una classe con @NgModule decorator.
NgModules vs. JavaScript modules
15 . 1

21. Angular - Modules
15 . 2

22. Angular - Modules
In ogni applicazione è presente almeno un Root Module
In ogni applicazione possono essere presenti più Feature
Modules, Service Modules, etc...
15 . 3

23. Angular - Modules - @NgModule Metadata
declarations le classes appartenenti al modulo
(components, directives, pipes)
exports le declarations visibili ed utilizzabili
all'esterno del modulo
imports altri moduli da importare necessari ai
componenti del modulo
providers i servizi utili a livello globale del modulo via
DI
entryComponents i servizi utili a livello globale del modulo via
DI
bootstrap il root component dell'applicazione. Solo
15 . 4

24. Angular - Components
Controlla una porzione della UI chiamata view
È composta (almeno) da un template ed una classe decorata
Angular si occupa di creare, aggiornare e distruggere a seconda
delle interazioni degli utenti
Hanno quindi un proprio ciclo di vita
16 . 1

25. Angular - Components - @Component Metadata
selector Selettore che indica ad Angular la presenza
di un componente all'interno di un parent
HTML
templateUrl /
template
Template del componente (su file o inline)
styleUrls /
style
Stili del componente (su file o inline)
changeDetection Definisce la strategia di change detection
encapsulation Definisce la strategia di style encapsulation
16 . 2

26. Angular - Components - @Component Metadata
One-way dal data source al
view target
{{expression}}
[target]="expression"
bind-
target="expression"
Interpolation Property
Attribute Class Style
One-way dal view target al
data source
(target)="statement"
on-target="statement"
Event
Two-way [(target)]="expression"
bindon-
target="expression"
Two-way
Binding targets
16 . 3

27. Angular - Components - @Component Life Cycle
ngOnChanges
ngOnInit
ngDoCheck
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
ngOnDestroy
16 . 4

28. Angular - Components - @Component Communication
Input Binding
Input Property Setter
OnChanges
Child Events
Local Variables
@ViewChild
Services
16 . 5

29. Angular - Components - Stateful/Stateless
Impure Function = Stateful Component
Pure Function = Stateless Component
Consideriamo pure functions le funzioni che dato uno
stesso input ritorneranno sempre uno stesso output (no
side-effects)
16 . 6

30. Angular - Components - Stateful/Stateless
Gestisce eventuali cambiamenti di stato (via services)
Possono contenere Redux actions (ngrx/store per esempio)
Gestisce i dati (via services)
Può ricevere dati via route resolvers
Possono comunicare con dipendenze esterne
Hanno child components stateless (ma anche stateful)
Comunicano con i child componentes stateless via
@Input/@Output
16 . 7

31. Angular - Components - Stateful/Stateless
Nessuna request/fetch di dati
Ricevono i dati via property binding
Emettono i dati via event callbacks
Hanno child components stateless (ma anche stateful)
Possono contenere local UI state
Sono un piccolo tassello di un quadro più grande!
16 . 8

32. Angular - Change Detection - Default Strategy
Ogni volta che qualcosa cambia nella nostra
applicazione (come risultato di vari eventi utente, timer,
XHR, promise, ecc.), la strategia predefinita esegue un
rilevamento delle modifiche su tutti i componenti.
Questa tecnica è chiamata dirty check. Per sapere se la vista deve essere aggiornata, Angular
deve accedere al nuovo valore, confrontarlo con quello vecchio e decidere se la vista deve essere
aggiornata.
16 . 9

33. Angular - Change Detection - OnPush Strategy
changeDetection: ChangeDetectionStrategy.OnPush
Impostando la strategia di rilevamento su onPush
stiamo firmando un contratto con Angular che ci obbliga
a lavorare con oggetti immutabili.
16 . 10

34. Angular - Change Detection - OnPush Strategy
Il componente dipende solo da @Inputs e deve essere
controllato solo nei seguenti casi:
Le referenze @Input cambiano
Un evento è originato da un componente o uno dei figli
Eseguiamo la CD esplicitamente
ChangeDetectorRef (detectChanges), ApplicationRef.tick(), markForCheck
16 . 11

35. Angular - Directives
Manipolano il DOM
È composta da una classe decorata
Esistono di due tipi: structural e attribute
Sono presenti direttive built-in
È possibile scrivere direttive custom
17 . 1

36. Angular - Directives - Structural
Le structural directives modificano direttamente il DOM,
aggiungendo, rimuovendo e sostituendo elementi
I più comuni sono: *ngIf, *ngFor, *ngSwitch
17 . 2

37. Angular - Directives - Attributes
Le attribute directives modificano l'aspetto o il
comportamento di un elemento presente nel DOM
I più comuni sono: ngStyle, ngClass, ngModel
17 . 3

38. Angular - Services
È tipicamente una classe con un definito scopo utile a più parti
dell'applicazione
Angular non ha una vera definizione per i servizi
I Components sono grandi fruitori di Servizi
Utilizzati comunemente per: Logging, Data, etc...
Sono iniettati per mezzo della DI
Usati per la comunicazione cross-component
18 . 1

39. Angular - Services - DI
Dependency Injection (DI) è un modo per creare oggetti
che dipendono da altri oggetti.
18 . 2

40. Angular - Services - DI
È il modo per fornire le dipendenze ad una nuova istanza di
classe
Angular la usa per fornire ai nuovi componenti i servizi necessari
Angular usa il costruttore per iniettare le dipendenze
È possibile registrare i fornitori in moduli o in componenti
Alternative class providers, Class provider with dependencies,
Aliased class providers, Value providers, Factory providers
18 . 3

41. Angular - Services - DI Gerarchica
Angular ha un sistema di DI Gerarchica, gestito con un albero di injector parallelo all'albero dei
componenti di un'applicazione ed è possibile riconfigurare il tutto a qualsiasi livello dell'albero.
Injector Bubbling (first wins)
Service Isolation
@Optional() / @Host()
Injector Bubbling
18 . 4

42. Angular - Services - Tree-shakable providers
Tree shaking è la capacità di rimuovere dal pacchetto
finale di un'applicazione il codice che non è referenziato.
Angular 6 ha la capacità di rimuovere i servizi che non sono utilizzati nella vostra applicazione
dall'output finale e questo riduce significativamente le dimensioni dei tuoi pacchetti.
@Injectable({ providedIn: 'root', })
18 . 5

43. Angular - Routing
Il routing consente la navigazione tra le viste
Interpreta l'url del browser e reagisce di conseguenza
È possibile un approccio con direttive sulle view o in modalità
programmatica
È possibile passare dei parametri, query params e fragment
Sono consigliati i Routes Modules
Con le Guards è possibile proteggere path di routing
19 . 1

44. ROUTE CONFIGURATIONROUTE CONFIGURATION
const appRoutes: Routes = [
{ path: 'crisis-center', component: CrisisListComponent },
{ path: 'hero/:id', component: HeroDetailComponent },
{
path: 'heroes',
component: HeroListComponent,
data: { title: 'Heroes List' }
},
{ path: '',
redirectTo: '/heroes',
pathMatch: 'full'
},
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
i t [
19 . 2

45. Angular - Routing
router-outlet
Direttive routerLink e routerLinkActive
Dopo la fine di ogni ciclo di vita di navigazione, il router crea un
treeActivatedRoute
Riepilogo
19 . 3

46. Angular - Forms
Angular contempla 2 tipi di approccio per la gestione dei forms:
Template-Driven e Reactive-Driven
Angualar crea un object che rappresenta il form
Gestione del change tracking, dello status, della validità, etc...
Gestione della Validazione
Gestione degli Errori
20 . 1

47. Angular - Forms - Approcci
Template-Driven: utilizza le direttive sul template del
componente per creare l'oggetto form di Angular
Reactive-Driven: utilizza l'oggetto form di Angular per
bindare gli elementi nel template del componente
Le due tecnologie appartengono ad @angular/forms
20 . 2

48. Angular CLI
Il CLI Angular è uno strumento (a riga di comando) utile
per creare un progetto, aggiungere file, eseguire test,
eseguire il bundling, etc...
npm install -g @angular/cli
https://cli.angular.io/
21 . 1

49. Angular CLI - Progetto Base
ng new my-app
cd my-app
ng serve -o
Il resto è sul wiki
21 . 2

50. Angular CLI - Alcuni Comandi
generate
serve
build
update
add
21 . 3

51. Angular CLI - Build economico!
ng build --prod --aot --vendor-chunk --common-chunk
--delete-output-path --buildOptimizer --stats-json
21 . 4

52. Angular Material
Consente l'utilizzo del Material Design con Angular in
maniera molto semplice, grazie ad una raccolta di
componenti forniti dal team di Angular.
ng add @angular/material
https://material.angular.io/
22 . 1

53. Angular Material - CDK
Oltre a fornire componenti UI pronti all'uso,
Angular Material viene fornito con un CDK di classi
riutilizzabili e privi di UI-behaviors.
Accessibility, Layout, Overlay, Scrolling, etc...
22 . 2

54. Angular Material - Stater Components
Con Angular 6 sono disponibili alcuni generatori (che
aumenteranno nel futuro) con i quali è possibile creare
rapidamente componenti complessi.
SideNav, Dashboard, Table
ng generate @angular/material:materialNav --name myNav
ng generate @angular/material:materialDashboard --name myDashboard
ng generate @angular/material:materialTable --name myTable
22 . 3

55. Angular Material - Alcuni Componenti/Direttive
Form: mat-checkbox, mat-datepicker, mat-form-field, matInput
Navigation: mat-sidenav, mat-toolbar
Layout: mat-card, mat-grid-list, mat-tab
Data Table: mat-table, mat-sorter, mat-paginator
Altro: MatSnackBar, mat-spinner, mat-button
22 . 4

56. Angular-Flex
Angular-Flex fornisce una sofisticata API che fornisce
agli sviluppatori la flessibilità e robustezza
dei layout .
npm install @angular/flex-layout --save
https://github.com/angular/flex-layout
Flex
22 . 5

57. Angular-Flex
Containers: fxLayout, fxLayoutGap, fxLayoutAlign
Child Elements: fxFlex, fxFlexOrder, fxFlexOffset, fxFlexAlign,
fxFlexFill
Altro: fxShow, fxHide
https://tburleson-layouts-demos.firebaseapp.com/#/docs
22 . 6

58. Firebase
Firebase è il BaaS di Google che offre l'infrastruttura
necessaria per realizzare applicazioni incredibili!
https://firebase.google.com/
23 . 1

59. Firebase

60. 23 . 2

61. AngularFire
È la libreria ufficiale di connessione tra Angular e
Firebase e consente di utilizzare molteplici servizi con un
approccio reattivo (utilizzando la potenza di RxJS).
npm install angularfire2 firebase --save
https://github.com/angular/angularfire2
23 . 3

62. AngularFire
Observable based
Realtime bindings
Authentication
Offline Data
ngrx friendly
AngularFirestoreModule, AngularFireAuthModule, AngularFireDatabaseModule,
AngularFireStorageModule, AngularFireMessagingModule (Future release)
23 . 4

63. Integrazione di Librerie
AGM Angular Components for Google Maps https://angular-maps.com/
HighCharts Interactive JavaScript charts https://github.com/cebor/angular-
highcharts
amCharts Programming libraries and tools for all
your data visualization needs
https://github.com/amcharts/amcharts3-
angular2
24 . 1

64. Dynamic Components
Angular consente di instanziare componenti
direttamente a runtime, consentendo quindi una
gestione dinamica dell'aggiunta e rimozione dei
componenti.
Verranno istanziati degli entry component che sono componenti caricati in maniera imperativa, e
che quindi non hanno reference sui templates.
Gli entry component sono gestiti tramite NgModule, or inclusi via routing definition.
25 . 1

65. Dynamic Components
ViewContainerRef Rappresenta il container dove una o più view posso essere
assegnate
ComponentRef Rappresenta un'istanza del Component creata via
ComponentFactory
ComponentFactory Oggetto utile ad istanziare un Component
ComponentFactoryResolver Servizio utilizzato per risolvere la ComponentFactory di ogni
specifico Component
Attualmente è inoltre presente come Experimental la direttiva NgComponentOutlet
25 . 2

66. Angular Elements
Angular Elements consente di creare componenti
impacchettati come Custom Elements, uno standard
Web per la definizione di nuovi elementi HTML in modo
agnostico rispetto ai framework.
I Custom Elements consentono di estendere HTML con nuovi tags controllati via Javascript, e
gestiti dal browser per mezzo del CustomElementRegistry.
26 . 1

67. 4 Tecnologie che
consentono di creare
componenti custom con
logica e funzionalità
incapsulate, evitandone la
collisione.
Custom elements
Shadow DOM
HTML Templates
(Templates, Slots)
HTML Imports
Web Components
26 . 2

68. Custom Elements
26 . 3

69. NG Component > Custom Element
26 . 4

70. Web Components
ng new elements-demo --prefix custom
ng add @angular/elements
ng g component name --inline-style --inline-
template -v Native
26 . 5

71. Web Components
createCustomElement Crea una classe di custom elements basata su un Angolar
components.
NgElementConstructor Prototipo per costruttore di classi basato su Angular components
che può essere utilizzato per la registrazione di custom elements.
customElements.define() Funzione JavaScript che registra il costruttore configurato ed il
relativo tag del custom element, associandolo al
CustomElementRegistry del browser.
26 . 6

72. Integrazione di Tools
CompoDoc Documentation tool for your Angular
application
https://compodoc.app/
Webpack
Bundle
Analyzer
Bundle content as convenient
interactive zoomable treemap
https://github.com/webpack-
contrib/webpack-bundle-analyzer
Source Map
Explorer
Analyze and debug space usage
through source maps
https://github.com/danvk/source-
map-explorer
27 . 1

73. Integrazione di Tools
CompoDoc "doc:buildandserve": "compodoc -p
src/tsconfig.app.json -s"
Webpack Bundle
Analyzer
ng build --prod --stats-json
npx webpack-bundle-analyzer dist/stats.json
Source Map Explorer ng build --prod --sourcemaps
npx source-map-explorer
dist/main.f3be1bf742c2a16b21d5.bundle.js
27 . 2

74. Angular 6
Migliorie su Angular-CLI
(update, add, Workspaces, library support)
Tree Shakable Providers
Angular Elements
Angular Material + CDK + Starter Components
(mat-tree, overlay, etc...)
RxJS 6
Animations Performance Improvements
https://update.angular.io/
28

75. Angular 7
Migliorie su Angular-CLI
(CLI Prompts)
Angular Elements
(Content Projection con slot)
Angular Material
(ScrollingModule, DragDropModule, Updated Component Styles etc...)
Application Performance
(rimozione reflect-metadata, Budgets)
Updated Dependencies
(TS 3.1, RxJS 6.3, NodeJS 10)
Ecosystem
(Angular Console, NativeScript, StackBlitz, etc...)
https://update.angular.io/
29

76. Grazie a tutti!
Francesco Sciuti
www.acadevmy.it | info@acadevmy.it | francesco@acadevmy.it
30