Immagine descrittiva del post

In questo articolo vedrai come creare un’applicazione Angular, realizzando un piccolo esempio.

 

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

No? Rinfreschiamoci velocemente le idee ..

Angular è un framework molto popolare, open-source, utilizzato per lo sviluppo di applicazioni facendo uso di linguaggi web come Javascript, Typescript e HTML.

Oltre a semplificare lo sviluppo di applicazioni web (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 front-end di Applicazioni Web.

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.

In questo capitolo imparerai ad utilizzare Angular CLI per creare un nuovo progetto Angular ed avviare la tua applicazione.

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 computer. Se non è già stato fatto, installare nodejs scaricando l’installer da questa pagina oppure via package manager.

Apri il terminale e digita il comando:

npm install -g @angular/cli

Verifica l’installazione con ng --version.

Se ottieni un risultato simile al seguente, l’installazione è completa e, da questo momento, potrai usare Angular CLI.

Bash: ng --version
 

Per prima cosa, spostati all’interno della cartella in cui vorrai inserire il tuo nuovo progetto Angular e lancia il comando per crearlo. Se, ad esempio, vuoi creare un progetto Demo e posizionarlo all’interno della cartella git che si trova nella tua Home Utente, esegui i comandi:

~ cd git/
git ng new demo

Il comando ng new creerà una cartella demo contenente il nuovo progetto Angular.

Durante l’esecuzione di quest’ultimo, ti verrà chiesto se includere Angular Routing e lo stile da utilizzare. Scegliere si (y) per il primo e SCSS per il secondo scorrendo con le freccette sopra di questo e premendo invio.

Spostati all’interno della cartella Demo, all’interno della quale potrai eseguire i successivi comandi utilizzando Angular CLI.

git cd demo/

Bene!

Ora che hai visto come creare un’applicazione Angular, da zero, in pochissimo tempo, non resta che sviluppare la nuova applicazione aprendo il progetto all’interno di un IDE.

Consiglio Visual Studio Code.

 

Esempio di applicazione Angular​

Poco fa, hai creato un nuovo progetto Angular utilizzando Angular CLI. 

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

Vediamo allora come si avvia in locale un’applicazione web Angular in fase di sviluppo.

 

Come avviare un'applicazione Angular in locale

Per avviare un’applicazione Angular in locale, basta spostarsi all’interno della sua cartella principale e lanciare il comando ng serve.

Una volta terminata la compilazione (Compiled successfully.), un log ti avverte che Angular Live Development Server è in ascolto all’indirizzo localhost:4200. Ciò vuol dire che ogni modifica del codice salvata, durante l’esecuzione, verrà ricompilata automaticamente ricaricando la pagina web coi nuovi cambiamenti.

Apri il collegamento all’interno del browser e visualizza la schermata di benvenuto della tua nuova applicazione Angular.

Tutto qui.

Welcome Page demo Angular app
 

La struttura di un'applicazione Angular

A partire da nuovo progetto Angular realizzato con angular CLI, tra i vari file e le varie cartelle generate, prendiamo in considerazione la cartella principale src/ contenente il codice dell’applicazione.

La cartella node_modules/ contiene tutte le dipendenze definite nel file package.json. Questo tipo di applicazione, infatti, fa uso del gestore npm per l’installazione e la gestione di nuove dipendenze.

Per il momento, puoi abbandonare la cartella node_module e tutti i restanti file presenti nella cartella principale, concentrandoti solamente sulla cartella src/ citata poco fa.

È in questa cartella, infatti, che andrai ad inserire i nuovi componenti dell’applicazione, piuttosto che nuovi assets e nuove cartelle. 

In particolare, la cartella app/ è directory principale per la generazione di nuovi componenti, servizi e altro, utilizzando Angular CLI e contiene di per se i componenti principali dell’applicazione (immagine di destra).

Come avrai notato, ho nominato spesso la parola Angular CLI, che da questo momento per comodità chiameremo solamente CLI. Ma cosa posso farci con questo strumento?

In pratica tutto quello che riguarda la creazione e lo sviluppo dell’applicazione.

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

A volte, utilizzerai la CLI, ad esempio, per effettuare la build e il deploy dell’applicazione, aggiornarla all’ultima versione di angular, e molto altro. 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 questo componente.

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 *