Prima di iniziare lo sviluppo con Angular, è necessario configurare il proprio ambiente di lavoro. Questo richiede tre strumenti essenziali: Node.js, Angular CLI e VS Code.

Installazione di Node.js

1. Accedere al sito ufficiale di Node.js sito web;

2. Utilizzare la versione LTS (Long-Term Support) di Node.js invece dell'ultima release, poiché Angular potrebbe non essere ancora completamente compatibile con la versione più recente.

3. Selezionare il proprio sistema operativo—in questo esempio viene scelto macOS, ma selezionare quello corrispondente alla propria configurazione. Lasciare invariati gli altri parametri;

4. Scaricare il programma di installazione e seguire le istruzioni a schermo per completare l'installazione.

Una volta installato, aprire il terminale (o il prompt dei comandi) e verificare che Node.js sia installato:

Se tutto è configurato correttamente, questo comando mostrerà la versione di Node.js installata.

Successivamente, verificare che npm (Node Package Manager) sia installato:

Eseguire npm -v visualizzerà la versione installata di npm — un segno che è stato installato correttamente ed è pronto all'uso.

Installazione di Angular CLI

Per installare Angular CLI, prima apri il terminale (o il prompt dei comandi). Successivamente, esegui il seguente comando per installare Angular CLI globalmente:

Questo comando installa Angular CLI globalmente sul sistema, rendendolo disponibile per qualsiasi progetto Angular.

Una volta che l'installazione è completata, verificare la versione di Angular CLI eseguendo:

Questo visualizzerà le informazioni sulla versione di Angular CLI e delle altre dipendenze installate.

Installazione di VS Code

1. Accedere al sito ufficiale di VS Code;

2. Selezionare la versione per il proprio sistema operativo (Windows, macOS o Linux);

3. Scaricare il programma di installazione e seguire le istruzioni a schermo per completare l'installazione.

Una volta installato, aprire VS Code e configurare le estensioni necessarie:

1. Accedere alla sezione Estensioni (Ctrl + Shift + X su Windows o Cmd + Shift + X su macOS);

2. Installare l'estensione Angular Language Service per evidenziazione del codice e completamento automatico;

3. È possibile anche installare Angular Essentials per aggiungere supporto alla sintassi, completamento automatico e altri strumenti per facilitare lo sviluppo Angular in VS Code.