- Informazioni
- Cos’è Angular Corso Completo
- Il libro su Amazon (anteprima)
- Codici
- Introduzione
- Sommario completo
Informazioni
- Come nasce il libro: Il libro su Angular è il frutto di un corso ormai giunto alla sesta edizione tenuto tramite il Codemotion presso le aziende.
- L’autore: l’autore del libro lavora con Angular fin dalla versione 1 (AngularJS) e ora alla versione 6, su cui il libro si basa. Altre informazioni sull’autore sono disponibili su https://linkedin.com/in/salvatoreromeo
- Non un manuale, un’esperienza: il libro non è un manuale, le nozioni si trovano facilmente su internet a partire dal sito ufficiale https://angular.io. Il libro vuole trasmettere l’esperienza appresa con lo sviluppo di sistemi completi oggi in produzione. Ogni capitolo parte infatti dall’esigenza che porta a introdurre un concetto.
- Scritto come se stessi seguendo il corso: nello scrivere il libro, l’autore ha voluto cercare di riprodurre l’esperienza del corso dal vivo in un testo. Per questo a volte noterai le esercitazioni sono scritte in terza persona plurale (perché fatte insieme all’autore), mentre le spiegazioni, rivolte agli studenti, sono in seconda persona.
- Puoi trovare una descrizione completa del libro su Amazon: Libro Angular
Cos’è Angular Corso Completo
Impara tecniche e metodologie affinate con anni di esperienza
Diventa un esperto nell’uso del framework Angular
Progetta e sviluppa componenti web
Usa i servizi per separare la logica
Usa pipe, directive e form
Gestisci le pagine tramite il routing
Conosci gli strumenti per essere veloce ed efficace nello sviluppo
Ogni capitolo comprende:
• L’esigenza per cui serve imparare una tecnica
• L’occorrente per comprendere e saper usare la tecnica
• Esercitazioni per fare propria la tecnica
• L’esperienza dell’autore per affinare ulteriormente quanto appreso
E inoltre 10 esempi di casi d’uso da sistemi reali per confrontarsi con applicazioni vere e usate ogni giorno da migliaia di utenti.
Tra gli use case:
• Login e autenticazione con token JWT
• Tabella smart con filtro e ordinamento delle colonne
• Componente Google Maps
• Struttura base di un template con menu dinamico
• Gestione di progetti multi-lingua
• Componenti utili, come popup e loading
• Tips sulla manipolazione di array, date e colori
Anteprima libro su Amazon
Codici sui casi d’uso reali
Probabilmente i codici sorgenti più utili che troverai in questa pagina sono i codici relativi al capitolo sugli esempi da casi d’uso reali:
https://github.com/devexp-io/libro-angular-corso-completo-codici/tree/master/devexp11
Demo: https://devexp.io/libro-angular/devexp1
Codici sulle esercitazioni
Di seguito troverai invece tutti i codici per ogni altro capitolo
Codici relativi al capitolo iniziale su Node e NPM:
https://github.com/devexp-io/libro-angular-corso-completo-codici/tree/master/node-npm
Codici relativi al capitolo su Typescript:
https://github.com/devexp-io/libro-angular-corso-completo-codici/tree/master/typescript
Codici relativi al capitolo sulla struttura:
https://github.com/devexp-io/libro-angular-corso-completo-codici/tree/master/devexp1
Codici relativi al capitolo sui componenti e sui template:
https://github.com/devexp-io/libro-angular-corso-completo-codici/tree/master/devexp2
Codici relativi al capitolo su classi e stili dinamici:
https://github.com/devexp-io/libro-angular-corso-completo-codici/tree/master/devexp3
Codici relativi al capitolo sul two-way data binding:
https://github.com/devexp-io/libro-angular-corso-completo-codici/tree/master/devexp4
Demo: https://devexp.io/libro-angular/devexp4
Codici relativi al capitolo sulla transclusion:
https://github.com/devexp-io/libro-angular-corso-completo-codici/tree/master/devexp5
Codici relativi al capitolo sul ciclo di vita:
https://github.com/devexp-io/libro-angular-corso-completo-codici/tree/master/devexp6
Codici relativi al capitolo sui servizi:
https://github.com/devexp-io/libro-angular-corso-completo-codici/tree/master/devexp7
Codici relativi al capitolo sul routing:
https://github.com/devexp-io/libro-angular-corso-completo-codici/tree/master/devexp8
Codici relativi al capitolo sulle directive e le pipe:
https://github.com/devexp-io/libro-angular-corso-completo-codici/tree/master/devexp9
Codici relativi al capitolo sui form:
https://github.com/devexp-io/libro-angular-corso-completo-codici/tree/master/devexp10
Introduzione
L’obiettivo di questo libro è quello di comprendere e imparare ad utilizzare il framework Angular per realizzare sistemi web, dashboard e sistemi CRUD. Lo faremo attraverso una lettura semplice e leggera, con esempi, esercitazioni, ma soprattutto con la consapevolezza che ogni concetto appreso serve per risolvere determinati problemi.
La mia esperienza Angular risale agli inizi, con AngularJS (che ormai è stato completamente sostituito da Angular): qualche anno fa le aziende per cui lavoravo hanno avuto la necessità di usare una libreria affidabile e completa per sviluppare progetti front-end più velocemente, più facilmente e con maggiore manutenibilità. Il framework scelto è stato appunto Angular e la scelta è stata vincente.
Non mi limiterò a fornire le nozioni del framework, quelle le puoi trovare anche su internet. Cercherò invece di trasmettere tutta la mia esperienza derivata dal desiderio di conoscere nuove tecniche e dalla capacità di risolvere problemi concreti.
Come appena anticipato, non si tratta del classico manuale con la sintassi e la spiegazione delle funzionalità. Ho voluto realizzare un libro che risultasse diverso per tre motivi:
- ogni concetto spiegato deriva da un’esigenza vera dettata da necessità di sviluppo;
- ogni esigenza di sviluppo sarà implementata utilizzando il framework; saranno mostrati esempi e sarà descritto anche il processo con cui affrontare lo sviluppo al fine di essere efficaci ed efficienti;
- vedremo inoltre come una determinata esigenza software è diventata una soluzione in un sistema reale.
Argomenti trattati
Nel libro studieremo i seguenti argomenti:
- Node e NPM
- Le basi del linguaggio Typescript per usare Angular
- Il framework Angular
- Il processo di sviluppo per essere veloci ed efficienti
- Gli strumenti per il debug e l’automazione di azioni noiose e ripetitive
Pre-requisiti
Mi aspetto che si abbiano le basi di programmazione in un altro linguaggio (es. JAVA) e che si conoscano le basi di HTML, CSS e Javascript. Non mancheranno comunque brevi sezioni per richiamare concetti introdotti per la prima volta nel testo, come ad esempio JSON, Ajax, DOM, ecc.
Obiettivo
Il mio obiettivo è fare in modo che alla fine di questo percorso sarai capace di creare un sistema completo in Angular, sia esso un sito web, una dashboard, un sistema CRUD o un’applicazione più complessa.
Ti auguro quindi una buona lettura e ti ricordo che sul sito www.devexp.io/angular potrai trovare materiale aggiuntivo, come ad esempio codici sorgenti, esempi e aggiornamenti.
In ogni momento non esitare a contattarmi tramite e-mail o linkedin:
https://linkedin.com/in/salvatoreromeo
e, quando sarai a buon punto nello studio, mi piacerebbe avere il tuo feedback.
Buono studio e buona lettura!
Indice del libro
Poiché molti lettori me lo hanno chiesto, di seguito riporto l’indice del libro per avere un’idea più chiara degli argomenti trattati.
Introduzione 17
Argomenti trattati 18
Pre-requisiti 18
Obiettivo 18
Compatibilità 19
Safari 7 & 8, IE10 & 11, Android 4.1+ 19
IE 8 e IE 9 20
Una breve storia del front-end 22
Il front-end più di 10 anni fa 22
Dopo Flash: jQuery 23
La necessità di avere qualcosa di più strutturato e scalabile 24
Avviciniamoci all’ambiente front-end: Node e NPM 27
Esigenza 27
Node e NPM 28
Installare Node e NPM 28
Problemi durante l’installazione 31
Esercitazione 32
Passo 1: Installiamo una libreria con NPM: moment 32
Passo 2: Creiamo un file index.html 33
Passo 3: Visualizziamo il risultato sul browser 35
Ricapitolando 36
Cosa imparerai dall’esperienza 36
Conclusioni 37
Iniziamo a conoscere Typescript: installazione, sintassi ed esempi 38
Esigenza 39
Typescript 40
Variabili e oggetti JSON 41
Visualizzare i risultati di una espressione usando console.log 42
Tipi 44
Array e for 45
Ordinamento semplice 46
Ordinamento di oggetti json, filtro e trasformazione 47
Funzioni autonome 47
Classi 48
Interfacce 51
Come gestire librerie esistenti 53
Esercitazione 54
Installiamo Typescript 54
Installiamo WebStorm (o VisualStudio Code) 56
Esercitazione array, classi, interfacce e funzioni 58
Ricapitolando 63
Cosa imparerai dall’esperienza 63
Conclusioni 64
La struttura di un’applicazione Angular 65
Esigenza 65
La struttura di un’applicazione e Angular CLI 66
Cosa mi aspetto da un’applicazione front-end 66
Assets 66
Parte relativa alla visualizzazione 67
Parte relativa alla logica 67
Parte relativa alla configurazione 68
Angular CLI 69
La struttura di un’applicazione Angular 70
La cartella src/app 71
La cartella src/assets 71
Il file di package.json 72
Il file angular.json 73
Il main e il modulo della mia applicazione 75
Esercitazione 75
Installazione di Angular CLI 75
Problemi nell’installazione 77
Creazione e avvio di un nuovo progetto 77
Personalizzazione del progetto 81
Ricapitolando 83
Cosa imparerai dall’esperienza 83
Conclusioni 84
Estendiamo HTML con i nostri tag personali: i componenti 85
Esigenza 85
I componenti web 87
Cos’è un componente a livello astratto 87
Componenti Angular 90
La logica del componente: nome-componente.component.ts 91
La configurazione del componente: il decorator @Component 92
Gli imports 93
Mini-Esercitazione 1: Creiamo il nostro primo componente usando Angular CLI 94
Input 97
Mini-Esercitazione 2: Definiamo un Input 99
Output 101
Nota: Angular e gli elementi nativi 103
Mini-Esercitazione 3: usiamo gli eventi 104
Uso in altri componenti 105
Esercitazione 106
Ricapitolando 109
Note 110
Gli Input possono avere valori di default 110
I nomi dei componenti 110
Il comando short per generare un componente 110
Cosa imparerai dall’esperienza 111
Gli import automatici 111
Conclusioni 112
Debug Angular con Chrome e Augury 114
Esigenza 114
I Chrome Dev Tools e Angular CLI 115
Esercitazione 119
Augury 123
Esercitazione 124
Ricapitolando 127
Cosa imparerai dall’esperienza 127
Conclusioni 128
I template: ngFor, ngIf, ngClass, ngStyle 129
Esigenza 129
Lavorare con gli array: *ngFor 130
Mini-esercitazione 1: la sintassi *ngFor per i template 132
Visualizzazione condizionale di parti del template: *ngIf 135
Mini-esercitazione 2: rendering condizionale con *ngIf 137
Renderizziamo un elemento con una classe dinamicamente: [class.nomeClasse] e ngClass 138
Mini-esercitazione 3: applichiamo dinamicamente una classe ad un elemento HTML 140
Uso di ngClass per nomi di classe dinamici 141
Renderizziamo un elemento con uno stile dinamicamente: [style.nomeStile] e ngStyle 142
Mini-esercitazione 4: applichiamo stili dinamici ad un elemento 143
Esercitazione 144
Ricapitolando 146
Note 148
Accesso agli indici dell’array nel template 148
*ngFor e *ngIf sullo stesso elemento 149
Evitare errori di riferimenti a null nel template 150
Le classi di un componente 151
Cosa imparerai dall’esperienza 152
Performance 152
Conclusioni 152
Two way data binding 153
Esigenza 154
Two-way data binding 154
Esercitazione 158
Ricapitolando 161
Cosa imparerai dall’esperienza 161
Conclusioni 162
Codice HTML tra i tag di apertura e chiusura: la transclusion 164
Esigenza 164
La transclusion in angular 165
Esercitazione 166
Ricapitolando 169
Cosa imparerai dall’esperienza 170
Conclusioni 171
Il ciclo di vita di un componente 172
Esigenza 172
Come eseguire operazioni durante una fase del ciclo di vita 173
Istanziazione 173
OnInit, OnChanges 173
AfterViewInit, AfterViewChecked 174
OnDestroy 174
Esercitazione 174
Ricapitolando 178
Cosa imparerai dall’esperienza 179
Conclusioni 179
La logica condivisa nella nostra applicazione: servizi e dependency injection 180
Esigenza 180
I servizi in Angular 180
Mini-esercitazione 1: creiamo un servizio per condividere i dati dell’applicazione 184
Servizi buit-in 188
Mini-esercitazione 2: Usiamo il servizio HttpClient per fare richieste Http 189
Esercitazione 192
Ricapitolando 196
Cosa imparerai dall’esperienza 197
Conclusioni 197
Mostriamo componenti in base all’url: il routing 199
Esigenza 199
Il routing in Angular 199
Routing di base: @angular/router e il componente router-outlet 200
Mini-esercitazione 1: creiamo una pagina Home e una pagina About 202
Parametri di routing: il servizio ActivatedRoute 204
Mini-esercitazione 2: usiamo i parametri passati nell’URL 205
Esercitazione 210
Parametri REST-style 213
Uso del servizio Router 214
Ricapitolando 214
Cosa imparerai dall’esperienza 215
Scegliere tra routing HTML5 e hash routing 215
Conclusioni 216
Trasformiamo i dati nel template: le pipe 217
Esigenza 217
Le pipe in Angular 217
Mini-esercitazione 1: creiamo una pipe per filtrare un array 219
Pipe built-in in Angular 221
Pipe json 221
Pipe number 222
Esercitazione 223
Ricapitolando 225
Cosa imparerai dall’esperienza 225
Conclusioni 226
Estendiamo i componenti con funzioni extra: le directive 227
Esigenza 227
Le directive in Angular 227
Mini-esercitazione 1: directive log-inputs 229
Mini-esercitazione 2: estendere un componente esistente con un nuovo input 232
Ricapitolando 234
Cosa imparerai dall’esperienza 235
Conclusioni 235
Form e validazione: i form Angular 236
Esigenza 236
I form in Angular 236
Input e ngModel 237
Select e ngValue 239
Mini-esercitazione 1: usiamo la select per selezionare un oggetto JSON 241
Mostrare un placeholder sulla select 242
Mostrare un valore iniziale 243
Checkbox 243
Form submit 244
Validazione semplice 245
Validazione avanzata 248
Esercitazione 249
Ricapitolando 252
Cosa imparerai dall’esperienza 253
Conclusioni 253
Deploy di un progetto Angular 255
Esigenza 255
Deploy di un progetto Angular 255
Esercitazione 257
Ricapitolando 259
Cosa imparerai dall’esperienza 259
Conclusioni 262
Esempi di casi d’uso da progetti reali e tips di sviluppo 264
Pipe per debuggare quando cambia l’input in un template html 266
Componente di login 269
Menu del portale e directive active 273
La directive active 274
Servizio di login e gestione di un token JWT 277
Disegno di una mappa e accesso al DOM del template 281
Passo 1: configurare una API key 281
Passo 2: esploriamo il componente map 282
Componente loading 285
Componente Modal 287
Uso di un componente di terze parti: la smart-table 291
Applicazioni multi-lingua con ngx-translate 295
Array pipes 298
Pipe Array map 299
Pipe array contains 300
Pipe array limit 300
Pipe per manipolare i colori 302
Pipe color lighten 302
Conclusioni