Configurazione del Routing in Angular
Per far funzionare tutto, è necessario indicare ad Angular quale URL mostra quale componente. Questo processo si chiama routing. Iniziamo!
Il File Principale di Routing
Quando crei un'app Angular utilizzando la CLI, puoi abilitare il routing fin dall'inizio — basta rispondere "Sì" quando viene chiesto del routing. Angular creerà quindi i file necessari per te (cosa che abbiamo già fatto quando abbiamo creato l'app). Uno di questi file è app.routes.ts.
Se per qualche motivo non hai questo file, non preoccuparti — puoi crearlo tu stesso nella cartella principale del tuo progetto. Dovrebbe apparire così:
routes.ts
Questo file indica ad Angular quali percorsi sono presenti nell'applicazione e quali componenti mostrare per ciascun percorso.
Inoltre, assicurati che i tuoi percorsi siano collegati in app.config.ts come segue:
config.ts
Senza la riga provideRouter(routes), Angular non riconoscerà i tuoi percorsi, anche se sono definiti in app.routes.ts.
Configurazione delle rotte
Ora aggiungiamo le rotte per la nostra app Task Tracker. Apri app.routes.ts e scrivi il seguente codice:
routes.ts
Questa è semplicemente una matrice di rotte che esportiamo. Ogni rotta è un oggetto con queste impostazioni:
-
path— il percorso URL; -
component— il componente da visualizzare quando si naviga verso quel percorso.
Nel nostro caso, abbiamo due percorsi:
La pagina principale che mostra l'elenco delle attività.
routes.ts
Quando un utente visita l'URL root (localhost:4200/), Angular visualizzerà il TaskListComponent.
Pagina dei dettagli dell'attività che mostra le informazioni su una singola attività:
routes.ts
Qui, :id è un parametro dinamico. Angular interpreta che :id può assumere qualsiasi valore (come /task/1, /task/42, ecc.). Questo valore viene automaticamente passato a TaskDetailsComponent, e può essere utilizzato per recuperare i dati relativi a quello specifico task.
Quindi, quando un utente accede a localhost:4200/task/1, Angular mostrerà TaskDetailsComponent con i dettagli per task №1.
Al momento, nulla funzionerà ancora perché abbiamo solo definito le rotte, ma non le abbiamo ancora collegate completamente ai nostri componenti. Vediamo come fare nel prossimo capitolo!
Grazie per i tuoi commenti!
Chieda ad AI
Chieda ad AI
Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione
Awesome!
Completion rate improved to 3.13Configurazione del Routing in Angular
Scorri per mostrare il menu
Per far funzionare tutto, è necessario indicare ad Angular quale URL mostra quale componente. Questo processo si chiama routing. Iniziamo!
Il File Principale di Routing
Quando crei un'app Angular utilizzando la CLI, puoi abilitare il routing fin dall'inizio — basta rispondere "Sì" quando viene chiesto del routing. Angular creerà quindi i file necessari per te (cosa che abbiamo già fatto quando abbiamo creato l'app). Uno di questi file è app.routes.ts.
Se per qualche motivo non hai questo file, non preoccuparti — puoi crearlo tu stesso nella cartella principale del tuo progetto. Dovrebbe apparire così:
routes.ts
Questo file indica ad Angular quali percorsi sono presenti nell'applicazione e quali componenti mostrare per ciascun percorso.
Inoltre, assicurati che i tuoi percorsi siano collegati in app.config.ts come segue:
config.ts
Senza la riga provideRouter(routes), Angular non riconoscerà i tuoi percorsi, anche se sono definiti in app.routes.ts.
Configurazione delle rotte
Ora aggiungiamo le rotte per la nostra app Task Tracker. Apri app.routes.ts e scrivi il seguente codice:
routes.ts
Questa è semplicemente una matrice di rotte che esportiamo. Ogni rotta è un oggetto con queste impostazioni:
-
path— il percorso URL; -
component— il componente da visualizzare quando si naviga verso quel percorso.
Nel nostro caso, abbiamo due percorsi:
La pagina principale che mostra l'elenco delle attività.
routes.ts
Quando un utente visita l'URL root (localhost:4200/), Angular visualizzerà il TaskListComponent.
Pagina dei dettagli dell'attività che mostra le informazioni su una singola attività:
routes.ts
Qui, :id è un parametro dinamico. Angular interpreta che :id può assumere qualsiasi valore (come /task/1, /task/42, ecc.). Questo valore viene automaticamente passato a TaskDetailsComponent, e può essere utilizzato per recuperare i dati relativi a quello specifico task.
Quindi, quando un utente accede a localhost:4200/task/1, Angular mostrerà TaskDetailsComponent con i dettagli per task №1.
Al momento, nulla funzionerà ancora perché abbiamo solo definito le rotte, ma non le abbiamo ancora collegate completamente ai nostri componenti. Vediamo come fare nel prossimo capitolo!
Grazie per i tuoi commenti!
