Ora che tutti gli strumenti necessari, inclusi Node.js, VS Code e Angular CLI, sono stati installati, è il momento di creare il tuo primo progetto e vedere come Angular CLI semplifica il processo di sviluppo.

Che cos'è Angular CLI?

Consente di:

• Creare rapidamente nuovi progetti con una struttura predefinita;

• Generare componenti, servizi e altri elementi del progetto;

• Avviare un server di sviluppo per test e debug;

• Compilare l'applicazione per la distribuzione in produzione.

Con Angular CLI, non è necessario configurare manualmente file e dipendenze—tutto viene impostato automaticamente.

Configurazione dell'ambiente di lavoro

Prima di creare un nuovo progetto, scegli una posizione comoda sul tuo computer dove desideri salvare i tuoi progetti Angular.

Se non disponi di una cartella dedicata ai progetti, creane una utilizzando il seguente comando:

Questo comando crea una nuova cartella chiamata projects nella posizione specificata.

Successivamente, accedere alla cartella appena creata eseguendo:

Questo comando apre la cartella projects, consentendo di lavorare al suo interno.

Creazione di un progetto Angular con CLI

Per creare un nuovo progetto Angular, eseguire il seguente comando all'interno della propria cartella di progetto:

• ng new - il comando per creare un nuovo progetto Angular;

• angular-app - il nome del progetto (puoi utilizzare qualsiasi nome preferisci).

Dopo aver eseguito il comando, la CLI di Angular ti presenterà alcune domande di configurazione:

• Vuoi aggiungere il routing di Angular? - questo argomento verrà trattato più avanti, quindi per ora seleziona Yes;

• Quale formato di foglio di stile desideri utilizzare? - questo determina il tipo di fogli di stile per il tuo progetto. Si consiglia di scegliere CSS, ma puoi selezionare l'opzione che preferisci.

Una volta confermate queste opzioni, la CLI di Angular inizierà a installare le dipendenze. Questo processo può richiedere alcuni minuti poiché vengono scaricati e installati tutti i pacchetti necessari.

Al termine della configurazione, verrà visualizzato un messaggio di successo che indica che il progetto è stato creato correttamente.

Ora puoi aprire il progetto in VS Code, che abbiamo installato in precedenza.

Nel prossimo capitolo, esaminerai in dettaglio la struttura delle cartelle e dei file generata da Angular CLI per comprendere come è organizzato un progetto Angular e dove si trovano le parti chiave della tua applicazione.