Immagine descrittiva del post

In questo articolo vedrai come creare un’applicazione web Angular, realizzando un piccolo esempio. Imparerai ad utilizzare l’interfaccia da riga di comando per creare un nuovo progetto Angular, aggiungere componenti e avviare l’applicazione.

 

Se sei arrivato fin qui avrai già sentito parlare di Angular

No? Rinfreschiamoci velocemente le idee ..

Angular è un framework molto popolare, open-source, per lo sviluppo di applicazioni web tramite linguaggi web come Javascript, TypescriptHTML, CSS

Oltre a semplificare lo sviluppo di applicazioni (godendo, tra le altre cose, anche di una forte community di sviluppatori), Angular, garantisce ottimi risultati in termini di prestazioni.

Per questo, ma non solo, possiamo concludere che Angular è un ottimo strumento per lo sviluppo di Applicazioni Web client.

Ora che ci siamo schiariti le idee, andiamo subito a vedere come iniziare ad utilizzare Angular.

Ti anticipo che si tratta di qualcosa di molto semplice e veloce.

Iniziamo?

 

Come creare un'applicazione Angular

Il modo più veloce per creare un nuovo progetto Angular è utilizzando Angular CLI.

Trattandosi di un’interfaccia da riga di comando dovrai utilizzare l’applicazione Terminale (Mac, utilizzato in questo articolo) oppure l’analoga per sistemi operativi diversi da macOS (Linux, Windows …) per eseguire i comandi.

Se hai già installato Angular CLI sul tuo computer puoi saltare il prossimo capitolo, altrimenti continua a leggere.

 

Installare Angular CLI

La prima cosa da fare è installare Angular CLI globalmente.

La documentazione sul sito ufficiale ci propone un’istallazione tramite npm, utilizzeremo questo per installare Angular CLI nel sistema. Occorre aver installato nodejs scaricando l’installer da questa pagina oppure via package manager.

Apri il terminale e digita i comandi:

npm install -g @angular/cli
ng --version

Il primo comando consente di installare Angular CLI globalmente. Verifica l’installazione con il secondo comando, il quale mostrerà la versione installata. Se non ci sono errori, da questo momento potrai utilizzare l’interfaccia da riga di comando Angular CLI per generare un nuovo progetto Angular.  

Continua a leggere.

 

Creare un nuovo progetto Angular

Utilizzando il terminale spostati nella cartella in cui vorrai inserire la tua nuova applicazione che sarà generata tramite la CLI.

Se, ad esempio, vuoi creare un progetto chiamato my-project e posizionarlo all’interno della cartella git che si trova nella tua Home, esegui i comandi:

cd git/
ng new my-project
ls

Durante l’esecuzione di ng new my-project ti verrà chiesto di confermare alcune opzioni che variano in base alla versione di Angular CLI installata, con la versione 11.x.x, ad esempio: applicare controlli più rigidi al workspace (stricter type checking e stricter bundle budgets), aggiungere Angular routing e il formato per i fogli di stile. Conferma i primi due (y), ti torneranno utili andando avanti con lo sviluppo, e scegli il formato dei fogli di stile più adatto a te (consiglio SCSS).

L’ultimo comando ls dovrebbe mostrare la nuova cartella my-project creata nella directory.

 

Esempio di applicazione Angular​

Hai appena creato un nuovo progetto Angular utilizzando Angular CLI

Ma questo progetto è un’applicazione web Angular funzionante? Assolutamente si!

A questo punto potrai iniziare lo sviluppo della tua applicazione aggiungendo nuovi componenti e nuove implementazione partendo da uno “scheletro” funzionante.

Se vuoi vedere con i tuoi occhi un esempio di applicazione web Angular completo e funzionante, dai uno sguardo a questo articolo, dove ti mostro, passo passo, i comandi da eseguire per aggiungere nuovi componenti e implementare nuove funzionalità.

 

Come avviare un'applicazione Angular in locale

Puoi avviare la tua applicazione Angular localmente lanciando all’interno della cartella del progetto il comando:

ng serve

Finita la compilazione, potrai visualizzare la tua applicazione in modalità live all’indirizzo localhost:4200

Angular utilizza Angular Live Development Server come server di sviluppo, grazie al quale potrai effettuare modifiche e allo stesso tempo visualizzarle durante l’esecuzione. Ogni modifica salvata verrà infatti ricompilata automaticamente ricaricando la pagina web coi nuovi cambiamenti.

Se non lo hai già fatto, apri il collegamento all’interno del browser per visualizzare la schermata di benvenuto della tua nuova applicazione web Angular.

Tutto qui.

Welcome Page demo Angular app
 

La struttura di un'applicazione Angular

La struttura di un’applicazione Angular, come quella realizzata poco fa, consiste in alcune cartelle principali e file di configurazione. 

Per il momento interessa sapere che è la cartella src/ a contenere tutto il codice dell’applicazione. Un’applicazione Angular può essere vista come un’insieme di componenti che interagiscono tra loro, come una sorta di mosaico, il cui risultato viene mostrato sullo schermo.

All’inizio, hai utilizzato la CLI per il bootstrap dell’applicazione ng new, mentre, poco fa, hai utilizzato il comando ng serve per avviarla.

A volte, utilizzerai la CLI, ad esempio, per effettuare la build e il deploy dell’applicazione oppure per aggiornarla all’ultima versione. Molto spesso la utilizzerai per aggiungere nuovi componenti, come vedrai tra pochissimo.

Se vuoi la lista completa dei comandi utilizzabili con la CLI, dai un occhiata a questa pagina sul sito ufficiale Angular.

 

Creare un nuovo componente Angular

Non c’è un motivo specifico per cui un’applicazione deve essere composta da uno o più componenti, più o meno piccoli. È lo sviluppatore che con la sua logica, definirà l’architettura della propria applicazione. Un componente può benissimo rappresentare un’intera nuova pagina dell’applicazione piuttosto che un piccolo pezzettino di questa.

In generale, un componente Angular può contenere un certo numero di file all’interno della sua cartella, per definire la sua rappresentazione attraverso una parte visiva (html) nonché da una parte logica.

Di base, la cartella di un componente contiene due file .html e .css/scss/less.. per la rappresentazione grafica e uno (o più) file .ts per la logica di business. Oltre al file .component.ts principale, infatti, in applicazioni più strutturate possono essere presenti moduli e servizi.

Tutti i file *.spec.* riguardano i test.

Ma come si crea un componente?

Un componente, di default, viene creato e aggiunto alla cartella app/ del progetto tramite CLI, con il comando:

ng generate component nome_componente

Se, ad esempio, vuoi aggiungere una pagina Home all’applicazione come componente, devi lanciare il comando:

ng generate component home

o semplicemente ng g c home.

In automatico, verranno creati i file home.component.html, home.component.scss, home.component.ts e home.component.spec.ts, e aggiunta la dichiarazione all’interno del modulo principale app.module.ts della cartella app/, per poterlo utilizzare.

 

Come utilizzare Angular Routing

Avendo creato un nuovo componente Home, che rappresenta la pagina principale, dovrai configurare l’applicazione affinché venga mostrato correttamente.

A questo punto entra in gioco Angular Routing.

Come utilizzare Angular routing?

In un’altro articolo ho spiegato come aggiungere ed utilizzare, attraverso un esempio, Angular Routing in un’applicazione Angular. Ad ogni modo, se hai seguito le istruzioni di questo articolo alla lettera, ti troverai già Angular Routing funzionante all’interno del progetto e potrai continuare con l’esempio.

Apri il file app-routing.module.ts e modifica la costante routes come segue:

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  }
];

Ora, rimuovi tutto il contenuto del file app.component.html ad eccezione dell’unica riga
<router-outlet></router-outlet>

Torna sul browser per visualizzare il risultato, ovvero la scritta home works!

 

Cosa fare ora?

Come già detto, ogni applicazione ha la sua struttura e la sua complessità, utilizzando in ognuna un approccio al codice diverso. Ad ogni modo, possiamo dire che sei riuscito, oggi, a creare la tua prima applicazione Angular, base si, ma funzionante!

Ora non abbandonare l’entusiasmo della prima vittoria approfondendo ogni aspetto della tua applicazione Angular sulla base di quello che hai appena imparato, spero.

Nel ringraziarti per la lettura, ti suggerisco alcuni altri articoli del sito utili per raggiungere il tuo scopo.

 

Link utili:

Recommended Posts

No comment yet, add your voice below!


Add a Comment

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *