Angular: la guida definitiva

Questa guida comprenderà tutte le versioni di Angular, a partire da Angular 2, quindi, Angular 4, Angular 5, Angular 6, Angular 7, Angular 8, Angular 9. Ho creato questa guida, step by step, particolarmente adatta a coloro che intendono apprendere appieno il framework. La guida comprenderà inoltre tutte le ultime features di Angular.

Cos’è Angular

Angular è un framework di sviluppo per realizzare applicazioni desktop, web application e mobile application.Ha tutto ciò di cui tu hai bisogno per realizzare applicazioni complesse, sia per desktop che per web o mobile. Vedremo nella guida caratteristiche come: componenti, directtive, form, pipe, HTTP service, dependency Injection, ecc

Versioni di Angular

La prima versione di Angular è Angular 2, conosciuta semplicemente come Angular, possiamo definirla come l’evoluzione di AngularJs. Il team di Angular rilascia regolarmente nuove versioni del framework, attualmente, l’ultima versione è la 9.0.0

La versione beta di Angular 9 è stata rilasciata il 25/09/2019.

Di seguito il changelog con tutte le versioni rilasciate.

https://github.com/angular/angular/blob/master/CHANGELOG.md

Tutte le versioni attualmente rilasciate

Prerequisiti

Questa guida richiede una conoscenza approfondita di javascript, HTML e CSS. Richiede inoltre il concetti di programmazione orientata agli oggetti (OOP). Non è necessario conoscere AngularJs per seguire questa guida, dalla versione 2 il framework è stato completamente riscritto.
Utilizzerò Typescript in questa guida, un superset di Javascript.

Introduzione ad Angular

Questa introduzione ad Angular, la guida definitiva, ti darà una visione di insieme. Angular è un framework per realizzare applicazioni desktop, web e mobile. È stato realizzato utilizzando Javascript. Utilizzando Angular potrai realizzare fantastiche applicazioni client-side utilizzando html, css e typescript. Certamente importante per te è comprendere come funziona prima di iniziare ad utilizzarlo. Le seguenti guide, introduzione ad Angular ed Architettura di Angular ti permetteranno di comprendere ciò che è alla base del framework di casa Google.

• Introduzione ad Angular
• Comprendere l’Architettura di Angular

Iniziamo!

La prima versione di Angular, AngularJs era certamente più semplice da configurare rispetto ad Angular 2. Con il rilascio di nuove versioni, fino ad arrivare alla versione 9 di Angular abbiamo visto una sempre più semplice procedura dedicata all’installazione e configurazione di un nuovo progetto. Per procedere all’installazione ti basta un packeg managaer, puoi utilizzare NPM, e Angular CLI. Una volta installate tutte le dipendenze, creare un nuovo progetto risulterà piuttosto semplice, sarà sufficiente infatti il comango ng new. Angular CLI si occuperà dell’installazione e dell’inizializzazione delle varie librerie.

Le seguenti guide ti aiuteranno per quanto riguarda la creazione di un nuovo progetto Angular.

• Installazione e configurazione dell’ambiente di sviluppo in Angular
• Come creare un nuovo progetto
• Bootstrapping di un’applicazione

Componenti

I componenti (components) sono l’elemento principale di un’applicazione Angular. Un componente contiene la definizione dellla vista e dei dati che determinano l’aspetto ed il comportamento di quella vista. I componenti sono semplici classi Javascript e sono definiti tramite il decoratore @Components. Il decoratore fornisce al componente la vista per visualizzare i metadati sulla classe. Il Componente passa i dati alla view utilizzando un processo chiamato Data Binding. Tale processo viene messo in atto legando gli elementi del DOM alle proprietà del componente. Il bind può essere utilizzato per visualizzare i valori delle proprietà delle classi dei componenti per l’utente, per modificare gli stili degli elementi, per rispondere ad un evento, ecc.

• Introduzione ai Componenti
• Data Binding
• Aggiungere un componente figlio

Direttive

Le direttive (directives) ci aiutano a manipolare il DOM. Puoi cambiare l’aspetto, il comportamento o il layout di un elemento del DOM utilizzando le direttive. Ti aiutano ad estendere l’HTML. Le direttive sono classificate in tre categorie in base al loro comportamento. Abbiamo quindi, Component, direttive di attributo e direttive strutturali.

NgFor è una direttiva strutturale, tale direttiva ripete una parte del modello html tante volte quanti sono gli elementi di un elenco (collections). NgSwitch ci permette di aggiungere/rimuovere elementi dal DOM. Può essere paragonabile all’istruzione switch in javascript. NgIf ci permette di aggiungere o rimuovere elementi dal DOM.

La direttiva NgClass è una direttiva di attributo, tramite ngClass è possibile aggiungere o rimuovere classi css dagli elementi html. La direttiva ngStyle ti permette di modificare lo stile di un elemento html utilizzando semplici espressioni, con ngStyle puoi modificare dinamicamente lo stile di un elemento html.

• Direttive
• ngFor
• ngSwitch
• ngIf
• ngClass
• ngStyle

Pipe

Le pipe sono utilizzate per trasformare dei dati. Per esempio, la pipe dedicata alle date viene utilizzata per formattare appunto le date. Angular inoltre ci consente di creare pipe personalizzate.

• Pipe in Angular
• Come creare pipe

Comunicazione tra componenti

I componenti sono inutili se non condividono dati tra loro. Il componente padre può comunicare con il componente figlio tramite l’annotazione @Input. I componenti figli rilevano le modifiche alle proprietà di input utilizzando l’hook del ciclo di vita di OnChanges o tramite un setter di proprietà. Il componente figlio può comunicare con il padre generando un evento che il padre può ascoltare.

• Come passare dati a componenti figli
• Come passare dati a componenti padre

Life Cycle Hook

I Life Cycle Hook, sono metodi che Angular invoca su direttive e componenti durante la loro creazione, modifica e distruzione. Usando i Life Cycle Hook possiamo mettere a punto il comportamento dei nostri componenti durante la creazione, l’aggiornamento e la loro distruzione.

• Ciclo di vita di un componente
• OnInit & OnDestroy
• OnChanges
• DoCheck

Angular Forms

I form possono essere molto semplici o molto complessi. I form possono contenere un numero indefinito di campi in input, Text BOx, Date, Numeri, Email, Password, Check Box, ecc. Tali campi possono poi essere suddivisi in più schede o pagine. I moduli possono contenere complesse logiche di validazione indipendenti su più campi.

I form sono progettati per gestire quanto appena esposto e molto altro, possono raggiungere complessità molto elevate. Per gestire tali complessità però è certamente consigliabile utilizzare un’approccio di sviluppo dedicato, i Reactiv Form.

• Guida ad Angular Forms
• Template Driven Form
• Guida Template Driven Form
• Guida Reactive Form
• Guida Form Builder
• SetValue e PatchValue
• StatusChanges
• ValueChanges
• FormControl
• FormGroup
• Esempio Form Array
• Guida Form Array

Servizi e Dependency Injection

I servizi consentono di creare codice riutilizzabile in altri componenti. I servizi possono essere iniettati all’interno di componenti ed altri servizi. Le dipendenze sono dichiarate nel modulo utilizzando i metadati dei provider.

• Servizi
• Dependency Injection
• Injector, @Injectable e @Inject
• Provider
• Hierarchical Dependency Injection

Validazione dei form

Una delle attività più comuni svolte sui form è la validazione. La validazione dei form è integrata all’interno dei forms module. Angular fornisce diversi sistemi di validazione integrati e pronti all’uso. Se tali validatori non sono sufficiaenti, Angular permette di realizzare dei validatori personalizzati.

• Come gestire la validazione nei Reactive Forms
• Validatori personalizzati nei Reactive Forms
• Come passare parametri ad un validatore personalizzato
• Iniettare servizi all’interno di un validatore personalizzato
• Validazione all’interno dei Template Driven Forms

HTTP

Il modulo HTTPClient ci permette di interrogare un’API remota ed ottenere dei dati da utilizzare all’interno della nostra applicazione. Tale modulo ci richiede di sottoscrivere la response restituita utilizzando gli observabol RxJs.

• Guida Angular HTTP
• Passare parametri tramite URL
• HTTP Interceptor

Angular router

Il modulo router gestisce la navigazione nelle applicazioni Angular. Il routing permette di spostarsi da una parte all’altra dell’applicazione o da una vista ad un’altra vista.

• Guida al Routing ed alla Navigazione
• Location Strategies in Angular Router
• Passare parametri alle rotte
• Rotte figlie / Rotte nidificate
• Passare parametri opzionali alle rotte
• Navigare tra le rotte
• Guard
• CanActivate Guard
• CanActivateChild Guard
• CanDeactivate Guard
• Resolve Guard
• Passare dati tramite le rotte
• RouterLinkActive

Moduli in Angular

• Introduzione ai moduli
• Routing tra moduli
• Struttura cartelle
• Lazy Loading
• Strategia di preloading
• CanLoad Guard

Styling dell’applicazione

Angular utilizza diversi modi per definire lo stile di un’applicazione. Puoi personalizzare l’applicazione a livello globale e quindi sovrascrivere gli stili globali per ogni singolo compoinente molto facilmente. Gli stili dei componenti si riflettono localmente al livello di singolo componente, possono essere adottate inoltre diverse strategie per quanto riguarda i componenti incapsulati.

• Stili globali
• Incapsulazione della view
• Style binding
• Class binding
• Stile dei componenti

Altro

• Location service

Configurazione

• Come usare APP_INITIALIZER
• Configurazione run time
• Variabili d’ambiente

Gestione degli errori

• Gestione degli errori
• Gestione degli errori HTTP

Angular CLI

Scopri come utilizzare la Angular CLI per velocizzare lo sviluppo delle applicazioni Angular

• Guida Angular CLI
• Come aggiornare Angular CLI all’ultima versione
• App multiple in un’unico progetto

Risorse Angular

• Risorse utili per imparare Angular

Module Loaders

L’applicazione Angular può utilizzare SustemJs o il caricatore di moduli Webpack. Vedremo come utilizzare il Loader creando una piccola applicazione.

• Come creare un’applicazione Angular utilizzando SystemJS
• Come creare un’applicazione Angular utilizzando Webpack