Ora che tutti gli strumenti necessari, inclusi Node.js, VS Code e Angular CLI, sono stati installati, è il momento di creare il 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, scegliere una posizione comoda sul computer dove archiviare i propri progetti Angular.

Se non si dispone di una cartella dedicata ai progetti, crearne una utilizzando il seguente comando:

Questo comando crea una nuova cartella denominata 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 cartella del progetto:

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

• angular-app - il nome del progetto (è possibile utilizzare qualsiasi nome si preferisca).

Dopo aver eseguito il comando, Angular CLI proporrà alcune domande di configurazione:

• Desideri aggiungere il routing di Angular? - questo argomento verrà trattato successivamente, quindi per ora selezionare Yes;

• Quale formato di foglio di stile desideri utilizzare? - questa scelta determina il tipo di fogli di stile per il progetto. Si consiglia di scegliere CSS, ma è possibile selezionare l'opzione più adatta alle proprie esigenze.

Una volta confermate queste opzioni, Angular CLI inizierà l'installazione delle 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, verrà esaminata 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 principali dell'applicazione.