Angular in 10 steps - 2 of 10

02 - Installazione e configurazione

Benvenuto nel secondo capitolo della nostra guida di Angular!

Prima di iniziare a scrivere codice, dobbiamo preparare il nostro ambiente di sviluppo. Non ti preoccupare: seguiremo ogni passaggio insieme, sia che tu abbia un Mac che un PC Windows.

Alla fine di questo capitolo avrai tutto l'occorrente per sviluppare con Angular come un professionista: Node.js, Angular CLI, VS Code configurato e Git pronto all'uso.

📋 Cosa installeremo

Ecco gli strumenti che ci servono e perché sono fondamentali:

🟢 Node.js - Il motore di tutto

Node.js è un ambiente di runtime che permette di eseguire JavaScript anche fuori dal browser. Normalmente JavaScript gira solo nelle pagine web, ma Node.js lo porta sul tuo computer permettendoti di:

• Usare strumenti di sviluppo scritti in JavaScript (come Angular CLI)
• Eseguire script di build e automazione
• Installare pacchetti e librerie

Perché ne abbiamo bisogno per Angular? Angular CLI (lo strumento per creare progetti) è scritto in JavaScript e ha bisogno di Node.js per funzionare. Inoltre useremo Node.js per il server di sviluppo locale.

📦 npm - Il magazzino dei pacchetti

npm (Node Package Manager) è il "negozio" dove si trovano milioni di pacchetti JavaScript pronti all'uso. Pensa a npm come all'App Store per sviluppatori: invece di scaricare app, scarichi librerie di codice che altri hanno scritto e condiviso.

Cosa faremo con npm?

• Installare Angular CLI
• Aggiungere librerie al nostro progetto (icone, componenti UI, utilità)
• Gestire le dipendenze automaticamente

🌿 Git - La macchina del tempo per il codice

Git è un sistema di controllo versione: ti permette di tenere traccia di ogni modifica al tuo codice nel tempo.

Cosa puoi fare con Git?

• Salvare "snapshot" del tuo progetto
• Tornare indietro a versioni precedenti se qualcosa si rompe
• Lavorare in team senza sovraporre il lavoro di altri
• Sperimentare nuove funzionalità in "rami" separati

🛠 Gli altri strumenti

• Angular CLI: lo strumento ufficiale per creare e gestire progetti Angular
• VS Code: l'editor di codice (con le estensioni giuste)

🍎 Installazione su macOS

1. Installare Node.js

Opzione A: Download diretto (consigliata per principianti)

1. Vai su nodejs.org
2. Scarica la versione LTS (Long Term Support) - quella raccomandata
3. Apri il file .pkg scaricato e segui l'installazione guidata
4. Riavvia il terminale

Opzione B: Con Homebrew (se lo usi già)

1# Installa Homebrew se non ce l'hai
2/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
3
4# Installa Node.js
5brew install node

Verifica l'installazione, apri il terminale e digita:

node --version
npm --version

Dovresti vedere qualcosa tipo:

v20.15.0
10.7.0

2. Installare Angular CLI

Nel terminale, esegui:

npm install -g @angular/cli

Il flag -g installa Angular CLI globalmente, così lo puoi usare da qualsiasi cartella. Verifica l'installazione:

ng version

Dovresti vedere le informazioni sulla versione di Angular CLI.

3. Installare VS Code

1. Vai su code.visualstudio.com
2. Scarica la versione per macOS
3. Apri il file .zip e trascina l'app nella cartella Applicazioni
4. Avvia VS Code

4. Installare Git

Opzione A: Download diretto

1. Vai su git-scm.com
2. Scarica la versione per macOS
3. Segui l'installazione guidata

Opzione B: Con Homebrew

brew install git

Verifica l'installazione:

git --version

🪟 Installazione su Windows

1. Installare Node.js

1. Vai su nodejs.org
2. Scarica la versione LTS per Windows
3. Esegui il file .msi e segui l'installazione guidata
4. ✅ Importante: Durante l'installazione, assicurati che sia selezionata l'opzione "Add to PATH"

Verifica l'installazione, apri il Prompt dei comandi (cmd) o PowerShell e digita:

node --version
npm --version

2. Installare Angular CLI

Nel prompt dei comandi:

npm install -g @angular/cli

Possibili problemi su Windows
Se ricevi errori di permessi, prova:

# Apri PowerShell come amministratore
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
npm install -g @angular/cli

Verifica l'installazione

ng version