Per creare un'applicazione Angular è fondamentale configurare correttamente l'ambiente di sviluppo. Questo primo passo richiede un po' di tempo, ma garantisce un'esperienza di sviluppo fluida e priva di problemi.
In questa guida, ti mostreremo come impostare gli strumenti essenziali per il development delle tue applicazioni Angular. Ti illustreremo i passaggi necessari per configurare Node, npm (Node Package Manager) e altri componenti fondamentali.
Grazie alla configurazione corretta dell'ambiente di sviluppo, potrete concentrarvi sullo sviluppo delle funzionalità della vostra applicazione senza preoccuparvi di problemi tecnici.
In questa guida, useremo come riferimento una macchina con sistema operativo Ubuntu 22.04, ma i passaggi sono simili anche per altri sistemi operativi. Quindi, non importa quale sistema operativo usiate, potrete seguire questa guida per configurare facilmente il vostro ambiente di sviluppo e creare applicazioni Angular incredibili!
Installazione di Node.js e npm
Node.js è un ambiente di esecuzione JavaScript basato sull'engine JavaScript V8 di Google, che permette di eseguire codice JavaScript al di fuori del browser. Questo strumento è essenziale per lavorare con Angular, in quanto fornisce un runtime JavaScript che il framework può utilizzare per eseguire il proprio codice. Angular è un framework JavaScript basato su TypeScript che consente di creare applicazioni Web a livello di front-end.
Per installare Node.js su Ubuntu 22.04, eseguire i seguenti comandi dal terminale. In primo luogo, aggiornare le informazioni sui pacchetti disponibili tramite il comando:
sudo apt update
Successivamente, installare Node.js e le sue dipendenze con il comando:
sudo apt install nodejs
Per verificare la versione installata di Node.js, eseguire il comando:
node -v
È importante notare che il pacchetto incluso nei repository di Ubuntu potrebbe essere datato e non contenere la versione più recente di Node.js. In tal caso, è possibile installare una versione più recente di Node.js utilizzando un repository PPA. La documentazione ufficiale per l'installazione di Node.js su Ubuntu è disponibile sul sito web Node.js all'indirizzo https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions.
Dopo aver completato la procedura, sulla nostra macchina sarà installata sia la versione di Node.js sia npm, il node package manager, che ci permetterà di installare le dipendenze necessarie per la nostra applicazione Angular.
Installazione di Angular CLI
Angular CLI è uno strumento di interfaccia della riga di comando che consente di creare, configurare, gestire e mantenere facilmente un'applicazione Angular. Utilizzando Angular CLI è possibile creare nuove applicazioni, creare componenti, visualizzare le dipendenze dell'applicazione e testare l'applicazione in modo rapido e semplice. Inoltre, Angular CLI può essere utilizzato per generare codice e configurazioni di progetti standardizzati, consentendo di risparmiare tempo e sforzi.
Per installare Angular CLI su Ubuntu, è sufficiente utilizzare il comando
sudo npm install -g @angular/cli
Una volta completata l'installazione, sarà possibile utilizzare Angular CLI per creare, configurare, gestire e mantenere rapidamente e semplicemente un'applicazione Angular. Per verificare se Angular CLI è stato installato correttamente, è sufficiente utilizzare il comando
ng version
Se Angular CLI è stato installato correttamente, questo comando restituirà la versione corrente di Angular CLI.
Creazione di un nuovo progetto Angular utilizzando Angular CLI
Per creare un nuovo progetto Angular utilizzando Angular CLI, eseguire il seguente comando nel terminale o prompt dei comandi, nella directory desiderata:
ng new nome-progetto
Questo creerà una nuova directory con il nome del progetto, inizializzerà un nuovo progetto Angular e installerà tutte le dipendenze necessarie.
Configurazione di un editor di codice per lo sviluppo di Angular
Per configurare Visual Studio Code per lo sviluppo con Angular su Ubuntu 22.04, è necessario eseguire alcuni passaggi. Prima di tutto, sarà necessario (ovviamente) installare Visual Studio Code sul proprio sistema. Per fare ciò, si può visitare il sito web ufficiale e scaricare l'installer, quindi seguire le istruzioni per l'installazione su Ubuntu.
Successivamente, è importante installare l'estensione Angular Essentials di Visual Studio Code. Questa estensione fornisce tutti i componenti necessari per sviluppare con Angular, tra cui il supporto per il completamento automatico del codice e la diagnostica. L'estensione può essere facilmente installata direttamente da Visual Studio Code, facendo clic su "Estensioni" nel menu laterale e cercando "Angular Essentials".
Dopo aver installato l'estensione, chiudiamo l'editor e con la riga di comando portiamoci all'interno del progetto che abbiamo creato nel capito precedente:
cd my-project
Abbiamo fatto questo passaggio per aprire l'editor e caricare il progetto da riga di comando. Infatti, basterà digitare il seguente comando:
code .
Questo comando aprirà il progetto in Visual Studio Code, pronto per lo sviluppo.
In questo modo, Visual Studio Code sarà configurato per lo sviluppo con Angular su Ubuntu 22.04.