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. Vai 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 che corrisponde 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 visualizza la versione installata di npm — un segno che è stato installato correttamente ed è pronto all'uso.

Installazione di Angular CLI

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

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

Una volta completata l'installazione, 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 sito web;

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.