Pagine, routing e layout

Definisci la struttura con i file e usa il router Angular per metadati, guard e resolver.

Convenzioni dei file

I componenti delle pagine esportano una classe come default. Lo starter configura provideRouter con withComponentInputBinding(): parametri e dati risolti possono arrivare agli input del componente.

Le cartelle tra parentesi organizzano il codice senza aggiungere un segmento all'URL. Le rotte statiche precedono quelle dinamiche. Il generatore rifiuta percorsi equivalenti o parametri duplicati.

Aggiungi un layout

Crea questo file nello starter. Il layout avvolge la pagina /greet/world e resta attivo durante la navigazione tra i suoi figli.

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  imports: [RouterOutlet],
  template: '<section aria-label="Greetings"><h2>Greetings</h2><router-outlet /></section>',
})
export default class GreetingLayout {}

Un layout deve contenere RouterOutlet per mostrare la pagina figlia. Puoi annidare altri layout.ts; layout.route.ts configura i metadati del layout.

Metadati della pagina

Il file adiacente greet/[name].route.ts esporta i metadati Angular. Il percorso, il componente e la gerarchia sono generati: non definirli nei metadati. Usa title, resolve, providers, canActivate e runGuardsAndResolvers per il comportamento della rotta.

Usa RouterLink per la navigazione interna. Non modificare src/app/fastang.routes.ts: viene rigenerato. npm run generate aggiorna esplicitamente il manifest; il dev server rileva aggiunte e rimozioni di file di rotta.

Stato per richiesta

Non conservare dati di richieste o utenti in variabili di modulo. Per i provider mutabili di rotta usa una factory, per esempio useFactory: () => ({ count: 0 }). FastAng ricrea gli oggetti delle route per ogni rendering SSR.

Continua con caricamento dati e rendering. Per il comportamento standard consulta il router Angular.