![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](https://image.slidesharecdn.com/acadevmy-ngoverview-191030223802/85/Acadevmy-Angular-Overview-26-320.jpg)
![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](https://image.slidesharecdn.com/acadevmy-ngoverview-191030223802/85/Acadevmy-Angular-Overview-44-320.jpg)
Acadevmy - Angular Overview
- 2. Cosa facciamo Web Mobile DevOps Labs Formazione 2
- 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 | [email protected] | [email protected] 30