Iniziare con Angular: Installare l'Ultima Versione da Zero

Se sei nuovo ad Angular e vuoi iniziare con l’ultima versione, sei nel posto giusto! Questa guida ti accompagnerà passo dopo passo nell’installazione di Angular da zero.

Cosa Ti Servirà

1. Node.js (include npm): Node Package Manager (npm) è necessario per installare Angular e le sue dipendenze.
2. Un editor di codice: Visual Studio Code è popolare e gratuito, ma sentiti libero di usare qualsiasi editor preferisci.

Step 1: Installa Node.js e npm

Angular richiede Node.js e npm. Ecco come ottenerli:

1. Vai sul sito di Node.js: https://nodejs.org/
2. Scarica e installa Node.js: Scegli la versione “LTS” (consigliata per la maggior parte degli utenti).
3. Verifica l’installazione: Apri un terminale (Command Prompt su Windows, Terminal su macOS o Linux) e digita:
   node -v
   Se Node.js è installato, mostrerà un numero di versione.
   Poi, controlla npm:
   npm -v
   Dovresti vedere un numero di versione se npm è installato.

Suggerimento: npm è incluso in Node.js, quindi installando Node.js avrai automaticamente anche npm.

Step 2: Installa Angular CLI

Angular CLI (Command Line Interface) è uno strumento per gestire progetti Angular, creare nuove applicazioni e avviarle.

1. Apri il tuo terminale.
2. Esegui il seguente comando per installare Angular CLI globalmente:
   npm install -g @angular/cli

Nota: L’opzione -g installa Angular CLI globalmente, il che significa che potrai usarlo da qualsiasi posizione sul tuo computer. Probabilmente avrai bisogno dei permessi “sudo” per farlo.

3. Verifica l’installazione:
   ng version
   Questo comando mostrerà la versione di Angular CLI se è installato correttamente.

Step 3: Crea un Nuovo Progetto Angular

Ora che Angular CLI è configurato, creiamo un nuovo progetto Angular.

1. Scegli una posizione nel tuo terminale dove vuoi creare il progetto.
2. Esegui il seguente comando:
   ng new my-first-angular-app
3. Segui le istruzioni:
   • Angular ti chiederà se vuoi aggiungere il routing. Digita y (per “sì”) se vuoi usare il routing (puoi aggiungerlo anche più tardi se non sei sicuro).
   • Poi, seleziona CSS come formato preferito per i fogli di stile (puoi scegliere un’altra opzione, ma CSS è il più comune).

Angular genererà un nuovo progetto con i file e le cartelle necessari.

Step 4: Entra nella Cartella del Progetto e Avvia il Server di Sviluppo

1. Entra nella cartella del tuo nuovo progetto:
   cd my-first-angular-app
2. Avvia il server di sviluppo di Angular:
   ng serve
   oppure
   npm start
   Questi comandi compilano l’applicazione e avviano un server locale.
3. Apri il browser e vai a http://localhost:4200.
   Dovresti vedere la pagina di benvenuto predefinita di Angular.

Suggerimento: Il server di sviluppo di Angular ricarica automaticamente la pagina quando apporti modifiche al codice.

Step 5: Esplora la Struttura del Progetto

Ecco alcuni file e cartelle importanti da conoscere:

• src/app: Questa cartella contiene tutto il codice della tua applicazione.
• src/app/app.component.ts: Questo file contiene il componente principale dell’applicazione.
• src/app/app.module.ts: Questo file dichiara quali componenti fanno parte della tua app.
• angular.json: Questo file di configurazione indica ad Angular come costruire e servire il tuo progetto.

Prossimi Passi

Ora che hai installato Angular con successo, puoi iniziare a costruire componenti, servizi e altre funzionalità che rendono Angular un framework potente per creare applicazioni web dinamiche. Ecco alcune idee per ciò che puoi imparare dopo:

• Componenti: Capisci come funzionano i componenti di Angular.
• Routing: Configura la navigazione tra diverse parti della tua app.
• Servizi e Dependency Injection: Impara come gestire i dati nella tua applicazione.

Buon coding! Ricorda, la pratica è fondamentale, e non esitare a chiedere aiuto se hai domande mentre impari.