La creazione di un progetto Angular è facilitato dalla procedura guidata messa a disposizione dagli stessi sviluppatori del Framework. Per poter sviluppare è indispensabile avere a disposizione il tool NPM.

La libreria Angular è installabile in un ambiente di sviluppo con il comando:

npm install -g @angular/cli

Successivamente è possibile lanciare la procedura guidata per la creazione di un progetto con il comando:

ng new nomeProgetto

all’interno della procedura guidata vengono richieste le informazioni base del progetto:

• “add Angular routing”: l’abilitazione al routing del framework Angular, di default non viene aggiunto ma conviene sempre aggiungerlo se si vuole creare applicazioni web complessi.
• “stylesheet format”: il formato dei fogli di stile, è possibile scegliere tra Css, sCss, Sass e Less

il processo di creazione del progetto installerà automaticamente anche tutte le dipendenze necessarie per questo motivo il processo può necessitare anche diversi minuti. Al termine del processo è possibile vedere che è stata creata una cartella con nome del progetto e all’interno presenti i file e le cartelle:

• angular.json: file di configurazione del progetto angular
• node_modules: cartella creata da NPM con tutte le librerie necessarie
• package.json: file di configurazione di NPM con la lista di tutte le dipendenze e la lista dei comandi
• package-lock.json: file di configurazioned i NPM
• README.md: file README (leggimi) in formato md
• src: cartella dei sorgenti del progetto
• tsconfig.app.json: file di configurazione per il compilatore
• tsconfig.json: file di configurazione per il compilatore

In tutti i progetti Angular, la cartella sorgente “src” ha una struttura ben precisa:

• app: cartella che contiene i file TypeScript
• assets: cartella che contiene i file statici dell’applicazione web
• index.html: file HTML principale, con l’indicazione del header e il richiamo al tag
  app-root che è il tag base di Angular
• main.js: file javascript dove è possibile definire
• styles.css: foglio di stile principale dell’applicazione web

All’inteno della cartella “app” sono presenti tutti i file TypeScript, i file principali creati nel progetto base sono:

• app-routing.module.ts: file di configurazione del routing del modulo “app-root”
• app.component.css: file Css del componente “app-root”
• app.component.html: file HTML del componente “app-root”
• app.component.ts: file TypeScript del componente “app-root” richiamato dalla pagina index
• app.module.ts: file di definizione del modulo “app-root” del progetto

Maggiori dettagli su questi file sono descritto nell’articolo che parla dei componenti Angular.

Per avviare un qualsiasi progetto base si deve eseguire il comando:

ng serve

e dalla console si può notare come l’applicazione web viene avviata sulla porta 4200 del sistema, la porta e i vari comandi si possono modificare e personalizzare nei vari file di configurazione del progetto.

La compilazione di un progetto può essere avviata con il comando base:

ng build

che va a generare una cartella dist con all’interno i file del progetto, tra cui il file index.html e i file js (javascript) generati dalla compilazione e compressione del codice TypeScript.