1 Guida di Angular 5 Data 1° pubblicazione 18/10/2017 Rilascio 9 del 21 Novembre 2017 Fabio Guerrazzi https://unplugged855.wordpress.com/ [email protected] Sommario Capitolo 1 ........................................................................................................................................................... 5 Cosa è Angular ............................................................................................................................................... 5 Perché Angular? ............................................................................................................................................ 5 Riferimenti e Copyright ................................................................................................................................. 5 Requisiti minimi per comprendere questa guida .......................................................................................... 5 Note sulle versioni ......................................................................................................................................... 6 Da Angular 2 ad Angular 5 ............................................................................................................................. 6 Da dove si parte ............................................................................................................................................. 6 Partire da una app esistente, cosa fa? .......................................................................................................... 7 Capire bene Observables e lib RxJS. .............................................................................................................. 7 I Wizard e tools di Angular ............................................................................................................................ 7 Zone ............................................................................................................................................................... 7 Code structuring ............................................................................................................................................ 7 La Prima Applicazione Angular5 .................................................................................................................... 8 Preparazione dell’ambiente di Sviluppo ........................................................................................................ 8 Creazione e preparazione del Progetto ......................................................................................................... 9 Bootstrap per Angular 5 .............................................................................................................................. 10 Check dei pacchetti NPM............................................................................................................................. 11 Check configurazione TypeScript ................................................................................................................ 11 Aggiungiamo il Dataset Angular e personalizziamo la nostra lista di prova ................................................ 14 Templates e Components ............................................................................................................................ 14 Utilizzo dei Templates ................................................................................................................................. 15 2 Creazione di un Component ........................................................................................................................ 16 Le Direttive di Angular ................................................................................................................................. 16 Capire l’Import ............................................................................................................................................. 16 Capire il Decoratore ..................................................................................................................................... 17 capire la Class .............................................................................................................................................. 18 Data binding bidirezionale ........................................................................................................................... 19 Filtrare i dati ................................................................................................................................................ 19 Aggiunta del campo di Input e Add Button ................................................................................................. 20 Mettere insieme l’intera applicazione......................................................................................................... 20 ngModule .................................................................................................................................................... 21 Cross Platform ............................................................................................................................................. 22 Esecuzione dell’applicazione ....................................................................................................................... 22 Eseguire online il sorgente su http://plnkr.co/ ........................................................................................... 23 Utilizzare SystemJS in una app Angular 5 .................................................................................................... 23 Capitolo 2 ......................................................................................................................................................... 25 Data Binding e Direttive Angular ................................................................................................................. 25 Binding Target o destinazione delle associazioni .................................................................................... 25 *ngIf ......................................................................................................................................................... 25 *ngFor ...................................................................................................................................................... 26 *ngSwitch ................................................................................................................................................ 26 ngStyle ..................................................................................................................................................... 26 ngClass ..................................................................................................................................................... 26 src ............................................................................................................................................................ 27 One-Way Data Binding ................................................................................................................................ 27 L’uso di parentesi in Angular ....................................................................................................................... 27 Bindings ....................................................................................................................................................... 28 Binding di proprietà ................................................................................................................................. 28 Binding di attributi ................................................................................................................................... 28 Interpolazione di Stringhe ....................................................................................................................... 29 String e dollaro $ ..................................................................................................................................... 29 Binding di Eventi ...................................................................................................................................... 29 Componenti multipli .................................................................................................................................... 30 Direttiva @Input ...................................................................................................................................... 34 Aliasing delle proprietà ............................................................................................................................ 34 Proprietà di Outupt ................................................................................................................................. 34 3 Condivisione dati via servizi ......................................................................................................................... 36 Capitolo 3 – Esempio: Server REST per ToDo .................................................................................................. 39 Json-server package .................................................................................................................................... 39 Postman ....................................................................................................................................................... 40 Client REST ................................................................................................................................................... 42 Creazione API Service per la comunicazione ........................................................................................... 42 HTTP Service di Angular ........................................................................................................................... 42 Implementazione Metodi Api.Service ..................................................................................................... 43 Capitolo 4 - RxJS ............................................................................................................................................... 46 Lavorare con gli Observables ....................................................................................................................... 46 Cosa è RxJS................................................................................................................................................... 46 Programmazione Reattiva ........................................................................................................................... 46 Dati asincroni ........................................................................................................................................... 47 Observer ...................................................................................................................................................... 47 Observable ................................................................................................................................................... 47 Babel ............................................................................................................................................................ 48 Subscription ................................................................................................................................................. 49 Operatori ..................................................................................................................................................... 49 Riepilogo Operatori più comuni .............................................................................................................. 50 Altri esempi .............................................................................................................................................. 50 Merging Observable streams ...................................................................................................................... 51 Observable.interval() ............................................................................................................................... 51 AsyncPipe..................................................................................................................................................... 52 HTTP e Observable ...................................................................................................................................... 52 Implementare il campo di ricerca sull’app Book ..................................................................................... 52 Capitolo 4 – JavaScript ES7, l’evoluzione ......................................................................................................... 55 ES5/6 - bignami ............................................................................................................................................ 55 Capitolo 5 ......................................................................................................................................................... 58 Forms – Creiamo insieme la WebApp FORM-DEMO ................................................................................... 58 Form-demo app ....................................................................................................................................... 58 Form-driven ............................................................................................................................................. 58 Submit .......................................................................................................................................................... 60 Validazione .................................................................................................................................................. 61 Validatori personalizzati .......................................................................................................................... 62 Reactive Forms ............................................................................................................................................ 63 4 Nesting Forms .............................................................................................................................................. 65 Capitolo 6 ......................................................................................................................................................... 66 Routing ........................................................................................................................................................ 66 Direttive di Attributo ................................................................................................................................... 67 Aggiungiamo una pagina a form-demo ................................................................................................... 68 @ViewChild ............................................................................................................................................. 70 Aggiungere nostre librerie di Helper o Utilities ........................................................................................... 70 Debugging Angular ...................................................................................................................................... 71 Aggiungiamo un logger al nostro helper per il debugging ...................................................................... 71 logging su filesystem ............................................................................................................................... 72 Debugging da Chrome ............................................................................................................................. 73 Variabili di configurazione Environment ..................................................................................................... 73 Mappatura di Environment ..................................................................................................................... 73 Capitolo X......................................................................................................................................................... 75 Risoluzione di problemi ............................................................................................................................... 75 Reinstallazione dei pacchetti ................................................................................................................... 75 Novità di Angular 5 ...................................................................................................................................... 77 Supporto PWA ......................................................................................................................................... 77 Novità sui Forms Reattivi ......................................................................................................................... 77 HttpClient ................................................................................................................................................ 78 i18N Pipes ................................................................................................................................................ 78 Router ...................................................................................................................................................... 78 Animazioni ............................................................................................................................................... 79 Altre modifiche in Angular 5 .................................................................................................................... 79 Indice ............................................................................................................................................................... 80 5 Capitolo 1 Cosa è Angular Angular 5 è un framework JavaScript che potenzia in modo considerevole quello che dagli anni 2000 è stato introdotto come Web 2.0 ovvero l’asincronismo AJAX nelle web application. Questa guida ti permetterà di imparare Angular da zero partendo direttamente da Angular 5 senza passare dalle versioni precedenti, della quale verrà fatto riferimento solo per il porting. Perché Angular? Ci sarebbe molto da dire sulle scelte che sono state fatte in Google, a partire dalle inutili complicazioni a voler ribattezzare tutto con nuova nomenclatura senza usare neanche uno dei migliaia di termini già ampiamente consolidati dalle precedenti comunità scientifiche. Ma al di là della moda del momento, del fascino dei nuovi strumenti, alla fine Angular ha oggettivamente ragione di essere e assolve brillantemente al suo compito, nessuno meglio di lui. Oggi che il web tende a concentrarsi sul principo SPA (Single-Page- Application) viene facile immaginare web application che in cascata devono aggiornare decine, centinaia, migliaia di porzioni della pagina corrente. Casistiche in cui mi sono imbattuto spesso in ASP.Net e PHP, e si faceva con le classiche chiamate $.ajax con richieste al Back-End e generazione asincrona della porzione di pagina. Chiamata ajax, preparazione, richiesta, pool sul server che inizia a lavorare, parsing, conversione, accesso al db, caricamento dati, conversione in html, rendering pagina, trasferimento dal server al browser, rendering client. Fallo un centinaio di volte per una singolo click fatto dall’utente per migliaia di utenti e possiamo andare a casa. Angular è la risposta a questo lavoro: l’asincronismo, il Javascript evoluto che è possibile utilizzare, utilizzo di funzioni reattive, i boundle compatti, tutto questo insieme proiettano le Web Application nella nuova era di gestione efficiente delle risorse di networking probabilmente per alcuni decenni a venire. Riferimenti e Copyright Questa guida è liberamente tratta dal libro Pro-Angular 2 di Adam Freeman, adattato da me alla versione 5, piu il libro Building m web applications using Angular di Shravan Kumar Kasagoni, quest’ultimo direttamente scritto per la vers 5. Piu altri articoli interessanti presi in rete, alcune parti derivano direttamente dalla guida ufficiale di Angular, insomma è un mix di quello che ho trovato interessante per imparare ad usarlo. Per me la via piu efficiente per imparare un linguaggio è scrivere cosa ci ho capito. Questo è lo scopo di questa guida, sono le note e gli appunti presi durante il mio corso di tutorial. Sono sicuro che può essere utile ad altri. I libri ovviamente contengono tutte le informazioni dettagliate e sono sicuramente piu utili di questo documento. Il vantaggio di questa guida è essere totalmente gratuita e in italiano. E’ comunque severamente vietata la copia o la riproduzione in ogni forma a scopo di lucro, sia del testo che dei sorgenti. Requisiti minimi per comprendere questa guida Non sarà sottinteso nulla riguardante Angular, mentre lo sarà per tutto il resto. Ciò significa che è dato per scontato che tu conosca bene come funziona il protocollo http, Javascript, AJAX. Che tu conosca NodeJS non è necessario, basta sapere cosa è e i principi di funzionamento, lo impareremo bene studiando Angular 6 Note sulle versioni Attualmente (novembre 2017) è ufficiale la versione 5 uscita l’8 novembre 2017. Si parla di un piano di uscita della 6 a marzo 2018, ma al momento è tutto in fase embrionale. Quello che è importante sapere, al momento, è sul naming convention e un breve accenno alla sua storia. Angular nasce come AngularJS 1 e nel giro di un paio di anni si evolve nella versione 2. Dalla 1 alla 2 non si puo propriamente parlare di versione ma di una completa riscrittura del framework. Questo ha portato non pochi problemi a chi aveva iniziato a distribuire applicazioni in produzione con la vers 1. La 2 era tutto un altro linguaggio. Dalla 2 alla 4 e poi la 5 (non ho notizie di versione 3) fortunatamente non si è trattato di riscrittura ma di vero e proprio aggiornamento, il core è rimasto lo stesso. Dalla 5 alla 6 idem, saranno solo nuove implementazioni e pochi miglioramenti strutturali. Gli standar di denominazione di Angular si sono evoluti in questo modo E’ nato AngularJS 1 e poi AngularJS 2. Dalla versione 4 è stato rimosso il JS e il nome è Angular, indipendentemente dal numero di rilascio. Anche questo creava un problema, ormai risolto, di upgrade in quanto le versioni angular erano hard-coded dentro le librerie e aggiornarlo richiedeva molti interventi manuali su codice di sistema. Da Angular 4 tutti i riferimenti sono semplicemente riferiti ad “Angular” e non Angular-<numero> come avveniva in precedenza Da Angular 2 ad Angular 5 Per chi aveva gia familiarita con Angular 2 (io no), nella 5 sono spariti i js compilati dal ts, che in effetti erano un po superflui. Se non avevi mai visto A2 sappi che per ogni ts il compilatore generava .js. Non ci sono piu, ecco. O meglio, ci sono ma sono generati a runtime e cancellati al termine dell’esecuzione, non si vedono nel progetto come prima. Dal rilascio di Angular 2, il pacchetto angular-cli è diventato il modo standard per creare e gestire progetti angolari. angular-cli è il tool per semplificare il setup e il controllo dei packages. Il rilascio della versione 1 di angular-cli è ora parte integrante di Angular. Il vantaggio di utilizzare angular-cli è quello di semplificare il processo di installazione, il che significa che non è necessario gestire manualmente l’ insieme di pacchetti NPM, la configurazione del compilatore di TypeScript o impostare un server HTTP di sviluppo. Gli step per la preparazione di una nuova applicazione Angular 4 per la distribuzione è decisamente molto più semplice. Lo svantaggio è che non vedrete i dettagli di basso livello di come funziona il binding tra i moduli base e il modo in cui sono uniti i diversi pezzi (a meno che tu non vada a controllare, ovviamente). Da dove si parte leggere una app angular può essere il primo step per capire chi è. Spulciando le varie guide in inglese ho trovato molto molto pertinente una citazione: “se hai bisogno di una webapp che ti dia risultati rapidi usa jQuery. Se hai tempo per analizzare e controllare il rendering html vale la pena di imparare Angular” 7 Questa dice molte cose. Angular non è di facilissimo impatto, non consente aplicazioni on the fly, piuttosto richiede una attenta strategia di programmazione e strutturazione delle app, anche se sono semplicissime da un punto di vista utente. A favore c’è che ti permette di fare SPA (Single Page Application) nel modo piu efficiente possibile Partire da una app esistente, cosa fa? Tutto ebbe inizio da package.json :) Se il progetto è stato creato con li CLI ng new xxx dovresti avere un main.ts. Se è stata fatta in Angular lo vedi perche ci sono questi due files: .angular-cli.json e src\main.ts Se non ci sono questi files apri i json alla ricerca di un app name, root path. Ti solito puoi trovare \src\app.js, app.ts, main.ts Una volta trovato l’entry point dell’app, cerca di capire cosa esegue e cosa renderizza come home page. In questi files dovresti trovare un riferimento a app.module.ts, che è il core dell’applicazione. In questo file sono dichiarati tutti i componenti e le librerie utilizzate dal programma. Apri quindi app.module.ts e dovresti trovare questa dichiarazione bootstrap:[AppComponent] Apri l’index.html se cè e apri quindi i files componenti app.component.ts e *.html Se c’è un routing vedi il bootstrap su quale componente lo fa, oppure sono strutturati scaffolding tipici MVC cerca i controllers e moduls. Capire bene Observables e lib RxJS. Un mucchio di lavoro da fare per imparare angular riguarda capire bene cosa è Observable e come si usa. E’ vitale capire come funziona e fai tutti i tentativi possibile finche non ti senti sicuro con RxJS, perche rappresentano il vero core di Angular. L’argomento sarà trattato a diversi livelli e con più esempi possibile. I Wizard e tools di Angular Una volta presa confidenza con l’ambiente considera queste librerie PrimeNG or ValorSoft come standard tra i tuoi strumenti di sviluppo. Provale e vedrai che li integri nel tuo ambiente. Zone NgZone è abbastanza easy to use . capire cosa è aiuta Code structuring 1. Condividi i Moduli — Sforzati di usare moduli condivisi. Crea un modulo che importi ed esporti tutti i moduli comuni e importali negli altri moduli. Eviti di reimportarli ovunque 2. Global vs local CSS —  metti le istruzioni CSS a livello di app anziché a livello di applicazione se dovesse essere ripetuto 3. Tema SCSS —  Quando utilizzi un preprocessore CSS, definisci sempre un file che usi variabili relative al colore, alla dimensione del carattere, ecc. Ti aiuterà quando devi cambiare il tema. 4. Ereditarietà Typescript  — Cerca di utilizzare l'ereditarietà Typescript. Se disponi di alcune funzionalità che potrebbero essere richieste in diversi componenti, crea un componente base con 8 funzionalità comuni in modo che tutti gli altri componenti eventualmente possono semplicemente estenderlo. 5. Usa i Servizi — Sforzati di tenere separati view e service. Nel componente dell'interfaccia utente tieni solo il codice deputato alla visualizzazione e delega servizi per effettuare chiamate al back- end. La Prima Applicazione Angular5 La via più breve per imparare Angular è procedere per esempi. In questo capitolo esploreremo come impostare l’ambiente di sviluppo di base con Angular, con un minimo di static mock-up (dati di esempio) e applicheremo le basi per creare una tipica dynamic web application. Piu avanti vedremo come creare una applicazione piu sofisticata e completa, ma per il momento è sufficiente evidenziare quali sono i componenti piu importanti. Anche se non tutto il codice risulterà chiaro immediatamente, è importante prendere familiarità con la sintassi Angular. Alla fine del capitolo tutta la struttura risulterà chiara e lineare, gli step di questa prima fase servono comprendere il flusso di dichiarazione dei componenti La nostra app sarà composta da una pagina con un campo di input e un pulsante Add, piu’ l’elenco dei dati inseriti. L’utente rimuoverà gli elementi cliccando su un ceckbox della lista o aggiungera un nuovo item premendo Add. Il tutto avverrà in modo dinamico senza ricaricare nessuna pagina Preparazione dell’ambiente di Sviluppo Primo step è l’installazione di NodeJS e NPM da https://nodejs.org/it/download . Scarica e installa Visual Studio Code da https://code.visualstudio.com/download , che consiste nell’IDE cross platform di Microsoft. Per chi non conoscesse lo strumento, è il Visual Studio di NodeJS (non solo ma ok, usa questo). Comprende da editor, intellisense, debug, search, package management Infine il browser, è sufficiente che sia presente Chrome sul computer. In questa guida ci riferiremo a sviluppo di un progetto su ambiente Windows, e verranno omessi tutti i comandi corrispondenti per Ubuntu Sia chiaro che NodeJS è un componente server ma basandosi su script client javascript per funzionare ha bisogno del CLR di un browser, ovvero un interprete javascript. Essendo un linguaggio script non vi stupite se nel corso dello sviluppo delle vostre app troverete difficoltà ad interpretare cosa è server e cosa è client, perche non è cosi scontato. Il linguaggio sottostà a tutte le regole client, ad esempio non si puo salvare nulla sul filesystem, benchè tutto l’asincronismo delle richieste e response sono chiaramente caratteristiche server. 9 Creazione e preparazione del Progetto Posizionati sulla cartella radice dei tuoi progetti (es c:\src_angular e digita il comando ng new seguito dal nome della nuova applicazione, in questo caso la nostra prima app si chiamerà todo ng new todo Il sistema scaricherà tutti i pacchetti piu recenti e li posizionerà nella nuova cartella di progetto todo PS C:\src_angular\ > ng new todo create todo/e2e/app.e2e-spec.ts (286 bytes) create todo/e2e/app.po.ts (208 bytes) create todo/e2e/tsconfig.e2e.json (235 bytes) create todo/karma.conf.js (923 bytes) create todo/package.json (1309 bytes) create todo/protractor.conf.js (722 bytes) create todo/README.md (1020 bytes) create todo/tsconfig.json (363 bytes) create todo/tslint.json (2985 bytes) create todo/.angular-cli.json (1281 bytes) create todo/.editorconfig (245 bytes) create todo/.gitignore (516 bytes) create todo/src/assets/.gitkeep (0 bytes) create todo/src/environments/environment.prod.ts (51 bytes) create todo/src/environments/environment.ts (387 bytes) create todo/src/favicon.ico (5430 bytes) create todo/src/index.html (291 bytes) create todo/src/main.ts (370 bytes) create todo/src/polyfills.ts (2667 bytes) create todo/src/styles.css (80 bytes) create todo/src/test.ts (1085 bytes) create todo/src/tsconfig.app.json (211 bytes) create todo/src/tsconfig.spec.json (304 bytes) create todo/src/typings.d.ts (104 bytes) create todo/src/app/app.module.ts (314 bytes) create todo/src/app/app.component.html (1120 bytes) create todo/src/app/app.component.spec.ts (986 bytes) create todo/src/app/app.component.ts (207 bytes) create todo/src/app/app.component.css (0 bytes) Installing packages for tooling via npm. Installed packages for tooling via npm. Successfully initialized git. Project 'todo' successfully created. Perchè NodeJS e Angular funzionino devono avere come configurazione di base il file package.json in cui sono presenti tutte le dichiarazioni dei pacchetti necessari al runtime. Ispezioniamo il file package.json per vedere quali versioni ci ha installato. Al package generato dall angular-CLI ci va aggiunto il bootstrap e altri pacchetti che non sono inclusi come predefinito. Aggiungi queste linee sotto zone.js nelle declarations "bootstrap": "4.0.0-alpha.4", "font-awesome": "4.7.0", "web-animations-js": "^2.3.1", "systemjs": "^0.19.40", Il package.json finale che ci serve assomigliera a questo { 10 "name": "todo", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^5.0.0", "@angular/common": "^5.0.0", "@angular/compiler": "^5.0.0", "@angular/core": "^5.0.0", "@angular/forms": "^5.0.0", "@angular/http": "^5.0.0", "@angular/platform-browser": "^5.0.0", "@angular/platform-browser-dynamic": "^5.0.0", "@angular/router": "^5.0.0", "core-js": "^2.4.1", "rxjs": "^5.5.2", "zone.js": "^0.8.14", "bootstrap": "4.0.0-alpha.4", "font-awesome": "4.7.0", "web-animations-js": "^2.3.1", "systemjs": "^0.19.40" }, "devDependencies": { "@angular/cli": "1.5.0", "@angular/compiler-cli": "^4.2.4", "@angular/language-service": "^4.2.4", "@types/jasmine": "~2.5.53", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "codelyzer": "~3.2.0", "jasmine-core": "~2.6.2", "jasmine-spec-reporter": "~4.1.0", "karma": "~1.7.0", "karma-chrome-launcher": "~2.1.1", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.1.2", "ts-node": "~3.2.0", "tslint": "~5.7.0", "typescript": "~2.3.3" } } Bootstrap per Angular 5 Per utilizzare correttamente i componenti js di bootsrap occorre installare la parte ‘plugin’ https://ng-bootstrap.github.io/#/getting-started Setup npm install --save @ng-bootstrap/ng-bootstrap app.module.ts import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; @NgModule({ .. imports: [NgbModule.forRoot()], ..