In questo articolo imparerai a creare un’applicazione web Angular nel modo più semplice e veloce possibile.
Cos’è Angular? Come creo un nuovo progetto? Che cos’è e come si utilizza Angular-CLI?
Se ti sei posto almeno una di queste domande sei nel posto giusto. Continua a leggere.
Allerta spoiler!
Per creare un nuovo progetto Angular utilizza il comando:
ng new my-projectMa andiamo per gradi…
Cos'é Angular
Se sei arrivato fin qui avrai già sentito parlare di Angular.
No? Rinfreschiamoci le idee ..
Angular è un framework molto popolare, open-source, per lo sviluppo di applicazioni web tramite linguaggi web come Javascript, Typescript, HTML, 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 web Angular
Il modo più veloce per creare un’applicazione 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 a livello globale.
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 --versionIl primo comando consente di installare Angular CLI globalmente, il secondo per verificarne l’istallazione. 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 una nuova applicazione Angular
Utilizzando il terminale spostati nella cartella in cui vorrai inserire la tua nuova applicazione che sarà generata tramite Angular CLI.
Se, ad esempio, vuoi creare un progetto chiamato my-project e posizionarlo all’interno della cartella git che si trova nella tua Home, digita i comandi:
cd git/
ng new my-projectDurante l’esecuzione del comando ng new my-project, ti verrà chiesto di confermare alcune opzioni che variano in base alla versione di Angular CLI installata. Ad esempio, con la versione 14.x.x ti verrà chiesto di: 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).
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 implementando nuove funzionalità 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 su server di sviluppo
Puoi avviare la tua applicazione Angular localmente, utilizzando il server di sviluppo Angular DevServer, utilizzando il comando:
ng serveFinita 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.
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.
Per 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, tramite il comando:
ng generate component nome_componenteSe, ad esempio, vuoi aggiungere una pagina Home all’applicazione come componente, devi lanciare il comando:
ng generate component homeo 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 all’interno di una cartella home, e importato il modulo HomeComponent in app.module.ts per poterlo utilizzare.
Come utilizzare Angular Routing
Se il componente corrisponde ad una nuova pagina dell’applicazione, questo può essere configurato in Angular Routing come una nuova rotta.
Non tutti i componenti rappresentano pagine, ma bensì parti di essa.
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, 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!
Bonus: utilizzare Angular Material
Rimanendo in ambito di Angular, esiste una libreria grafica in grado di rendere semplice e accattivante lo sviluppo della tua applicazione Angular, sto parlando di Angular Material.
Angular Material è una libreria per l’interfaccia utente (UI) che fornisce una serie di componenti per aiutarti nella progettazione e nello sviluppo delle tue pagine web e della tua applicazione Angular in modo strutturato. Fra le varietà di componenti offerti dalla libreria, puoi trovare pulsanti, liste, menu e tutto quello di cui ai bisogno per progettare e realizzare le pagine della tua applicazione.
Aggiungere Angular Material al tuo progetto Angular è estremamente semplice.
Quello che dovrai fare, una volta creato il tuo nuovo progetto Angular, è dirigerti all’interno della cartella del progetto da terminale e lanciare il comando:
ng add @angular/materialDurante il processo, come prima cosa ti verrà chiesto se intendi procedere con l’installazione (Would you like to proceed?), confermare digitando “y” e invio. Successivamente dovrai decidere se impostare lo stile della tipografia Angular Material globalmente e se intendi utilizzare browser animation, il mio consiglio è di utilizzare entrambi. Come ultima cosa, il processo di installazione della libreria ti chiederà di scegliere i colori del tuo tema scegliendo uno tra i temi pre-configurati oppure se intendi utilizzare un tema “custom” per la tua applicazione. Se per il momento non intendi definire un tema, puoi lasciare la prima scelta selezionata e confermare, ricordandoti che puoi creare il tuo tema personalizzato in qualsiasi momento.
Una volta terminato il processo, avrai aggiunto correttamente Angular Material al tuo progetto.
Come aggiungere un componente Angular Material
Vediamo ora come aggiungere un nuovo componente della libreria Angular Material al tuo progetto Angular.
Quello che dovrai fare è recarti alla pagina dei componenti nel sito ufficiale della libreria, la trovi qui, e cercare tra le categorie elencate, o direttamente dalla lista presente sulla sinistra nella pagina, il componente che intendi aggiungere alla tua applicazione.
Una volta
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:
- Panoramica sulla CLI e comandi – https://angular.io/cli
- Iniziare con Angular – https://angular.io/start
- Documentazione Angular CLI – https://cli.angular.io/
1 Comment
ciao tutto chiaro, ma quando vado a creare il progetto non mi viene creato il file app.module.ts, cosa sto sbagliando secondo te??