File nella cartella app

Prima di approfondire il componente principale, esaminiamo i file presenti nella cartella app e il loro ruolo nell'applicazione.

Quando si crea un nuovo progetto Angular, tutto ha inizio nella cartella app. Qui sono archiviati i file principali che definiscono la struttura dell'applicazione. In questa sezione, esploreremo il contenuto di questa cartella e analizzeremo il componente principale, che funge da punto di ingresso all'interfaccia utente.

Componente principale

Ora analizziamo più da vicino il componente principale, AppComponent. Questo componente viene creato automaticamente quando si esegue il comando ng new e rappresenta il componente radice dell'applicazione.

In Angular, i componenti vengono creati utilizzando i decoratori. Un decoratore è una funzione speciale che aggiunge funzionalità extra a una classe.

All'interno del decoratore @Component, vengono specificate le impostazioni principali che determinano l'aspetto e il comportamento del componente. Analizziamole nel dettaglio:

Elementi chiave nel file app.component.ts:

• Selector (selector) – definisce come verrà nominato il componente nell'HTML. In questo caso, può essere utilizzato come <app-root></app-root>;

• Imports (imports) – elenco delle dipendenze necessarie al funzionamento del componente. In questo esempio, viene utilizzato RouterOutlet, che gestisce la visualizzazione dei contenuti in base alla rotta;

• Template (templateUrl) – percorso del file HTML (app.component.html) che contiene il template del componente;

• Styles (styleUrls) – percorso del file CSS (app.component.css) che definisce l'aspetto del componente.

Come viene utilizzato il componente principale

Il processo inizia nel file index.html situato nella cartella src. Non contiene contenuti tipici, solo una struttura di base con un tag speciale:

Questo tag <app-root> corrisponde al selector in app.component.ts. Quando Angular si inizializza, trova questo tag e lo sostituisce con il contenuto di app.component.html.

Conclusione

Il componente principale è il cuore dell'applicazione. Si carica per primo e gestisce il template principale. Tutto ciò che vediamo sullo schermo passa attraverso di esso. Il tag <app-root> in index.html è il punto di ingresso attraverso cui Angular "entra" nella pagina.