Angular è l’ultima invenzione di un gruppo di ingegneri di Google, capeggiati da Brad Green, nata come evoluzione del progetto AngularJS, un popolare framework Model View (MV*) per la creazione di applicazioni (Web APP) e pagine web.
Angular va a sostituire AngularJS; entrambi sono dei framework studiati per essere potenti strumenti di sviluppo. L’esperienza accomulata con questo framework, ha permesso di eliminare tutti i colli di bottiglia di AngularJS emersi negli anni, quindi Angular, rimpiazzerà ben presto il suo predecessore, diventando il framework più usato per lo sviluppo di moderne Web APP sul browser e dispositivi mobili con Android e iOS.
La tecnologia che permette la creazione di App ibride e webapp si evolve molto rapidamente quindi spesso è difficile rimanere al passo e capire quali strumenti usare per lo sviluppo dei nostri progetti su dispositivi mobili e desktop.
Introduzione ad Angular
In questa guida introduttiva tratteremo alcuni dei concetti base per poter iniziare a sviluppare un’applicazione in Angular. A tal proposito cercheremo di illustrare le diverse funzionalità del framework attraverso degli esempi pratici che…
2
Introduzione ad Angular CLI
Iniziamo a vedere come creare un’applicazione in Angular e per farlo utilizziamo il tool Angular CLI che consente di inizializzare l’applicazione stessa, creare e configurare moduli, servizi, direttive, pipe e molto altro ancora. Si tratta di uno…
3
Caricare e avviare un’applicazione Angular
Abbiamo concluso la precedente lezione mostrando il funzionamento del comando ng serve che mostra un’anteprima dell’applicazione con la funzionalità di live reloading che può tornare molto utile in fase di sviluppo. Ripartiamo allora…
4
Cos’è un componente in Angular e come crearne uno
Nelle precedenti lezioni abbiamo già accennato che un’applicazione Angular può essere vista come un insieme di componenti i quali occupano visivamente una porzione dell’intera applicazione, mostrano delle informazioni sullo schermo e…
5
I template in Angular: Interpolazione, Property binding, Event Binding e Two-way binding
Nelle precedenti lezioni abbiamo visto come definire un componente che, ricordiamo, è una semplice classe a cui viene applicato il decoratore @Component. Angular considera un componente come un caso particolare di direttiva (parleremo delle…
6
Composizione di componenti in Angular
Nelle precedenti lezioni abbiamo detto che un’applicazione può essere suddivisa in più componenti che possono essere organizzati in modo da formare una struttura gerarchica avente un componente base che chiamiamo root component. Un c…
7
Content Projection: come personalizzare i componenti con ng-content
Nelle precedenti lezioni abbiamo cominciato a vedere quale strumenti vengono messi a disposizione da Angular per lavorare con i template dei componenti. Abbiamo iniziato a creare delle strutture statiche di componenti annidati per poi illustrare i…
8
Le direttive predefinite in Angular
In questa lezione continuiamo ad illustrare altri strumenti che Angular fornisce per lavorare con i template e in particolare ci soffermiamo ad analizzare alcune delle direttive predefinite più utili. Tipi di direttive In Angular esistono t…
9
Le pipe in Angular
Proseguiamo anche in questa lezione ad esplorare ulteriori funzionalità presenti in Angular per lavorare con i template. In particolare andiamo ad approfondire un argomento con cui abbiamo iniziato a prendere familiarità in alcuni de…
5.413 lettori
10
Il ciclo di vita di un componente in Angular
In questa lezione illustreremo quali sono le diverse fasi del ciclo di vita che attraversa un componente dal momento in cui viene creato fino a quando viene distrutto. Angular dà la possibilità di intercettare queste fasi per avere u…
11
Lavorare con le Template Reference Variables in Angular
Dopo una leggera deviazione che ci ha permesso di illustrare qual è il ciclo di vita di un componente, torniamo a rivolgere nuovamente la nostra attenzione ai template dei componenti ed esploriamo una nuova funzionalità che risulta m…
12
Come creare una direttiva personalizzata in Angular
In questa lezione illustreremo attraverso degli esempi in che modo creare delle direttive personalizzate. Anche in questo caso, sebbene sia possibile procedere manualmente alla creazione e modifica dei singoli file, ci affideremo ancora una volta…
13
Form in Angular: due differenti approcci Template Driven e Reactive Form
In questa lezione inizieremo a parlare dei due diversi approcci forniti da Angular per lavorare con i form e vedremo in che modo è possibile acquisire delle informazioni immesse da un utente, validare ciascun campo di input o l’intero form…
14
Reactive form in Angular
Dopo aver visto come creare dei form in Angular utilizzando il metodo Template-driven, vediamo ora un approccio alternativo. In questa lezione illustreremo cosa sono e come creare i cosiddetti Reactive form (o Model-driven Form). In questo caso sv…
15
Introduzione a RxJS per le applicazioni Angular
A partire dalla versione 2 del framework, il team Angular ha introdotto numerose novità e, in diversi casi, ha utilizzato un approccio completamente differente rispetto alla versione precedente per la risoluzione degli stessi problemi. In t…
16
RxJS: gli operatori più utili e comuni
Analizziamo ora il funzionamento di alcuni degli operatori più utili e comuni degli Observable. La lista degli operatori disponibili è piuttosto lunga e articolata. Per questo motivo risulta impossibile trattarli tutti in un’unica le…
17
Servizi e Dependency Injection in Angular
In questa lezione affronteremo un altro argomento cruciale per lo sviluppo di un’applicazione Angular. Parleremo infatti dei Servizi e illustreremo superficialmente il meccanismo di Dependency Injection del framework. Cosa sono i Servizi in Angula…
18
Esempio pratico di applicazione Angular
In questa lezione vedremo come creare una semplice applicazione che consente di convertire una certa somma di denaro da una valuta all’altra. Per semplicità la valuta di partenza può essere solo una delle tre principali valute, ovver…
19
Organizzare un’applicazione Angular attraverso i moduli
In questa punultima lezione mostreremo come creare dei nuovi moduli per meglio organizzare la nostra applicazione. Prima però ricapitoliamo cosa sono i moduli in Angular e quali sono le differenze rispetto ai moduli disponibili a partire da…
20
Rounting in Angular con Angular Router
In quest’ultima lezione vedremo come utilizzare Angular Router per creare delle applicazioni con più view e permettere all’utente di navigare fra le diverse sezioni senza dover ricaricare le pagine attraverso il browser. In questo modo rius…
