Libro Angular > Codici

Info sul libro Angular + Codici sorgenti

Alcuni dettagli sul libro

• Informazioni
• Codici
• Introduzione
• Indice del libro

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.
• 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

---

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:

1. ogni concetto spiegato deriva da un’esigenza vera dettata da necessità di sviluppo;
2. 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;
3. 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:

info@salvatoreromeo.com

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        304

---