Spiegazione della struttura del progetto

Un workspace Angular ha una struttura prevedibile. Conoscere i file e le cartelle principali aiuta a orientarsi in qualsiasi progetto.

La cartella src/ contiene il codice sorgente dell'applicazione: il punto di ingresso, il codice dell'app e gli asset globali come index.html e styles.

src/main.ts è il punto di ingresso dell'applicazione. Avvia il componente radice con bootstrapApplication.

src/index.html è l'unica pagina HTML. Il suo body contiene il selettore del componente radice, nel quale Angular esegue il rendering dell'app.

src/app/ contiene i componenti, i servizi, le route e la configurazione. Un nuovo progetto include app.component, app.config.ts e app.routes.ts.

Il componente radice comprende solitamente una classe .ts, un template .html e un foglio di stile .css (o .scss), oltre a un file di test .spec.ts.

app.config.ts esporta un ApplicationConfig con l'array providers usato durante l'avvio, ad esempio per il router e il client HTTP.

app.routes.ts esporta l'array delle definizioni delle route usato da provideRouter.

Alla radice del workspace, angular.json configura la CLI: target di build, percorsi di output, asset, stili e opzioni di avvio per ogni progetto.

package.json elenca le dipendenze e gli script npm. I file tsconfig.json configurano il compilatore TypeScript per l'app e per i test.

I file statici (immagini, font, favicon) si trovano in una cartella public o assets e vengono copiati nell'output della build secondo la configurazione di angular.json.

Ha esplorato il workspace: src/ per il codice sorgente, main.ts come punto di ingresso, index.html come pagina host, app/ per componenti e configurazione e angular.json per la configurazione della CLI. Prossimo argomento: generare codice con la CLI.