Utilizziamo i cookie per analisi, contenuti personalizzati e pubblicità.

Queste informazioni possono essere condivise con i nostri partner per fornire i servizi necessari.

Approfondisci

AccettoRifiuto

Dall'archivio articoli > Angular

Gestire il routing con Angular

di Stefano MostardaStefano Mostarda, in Angular,

Angular è il framework targato google per creare Single Page Application (SPA d'ora in poi). Come in ogni framework per creare SPA, anche Angular prevede un sistema di routing che associa una risorsa a un percorso. Nel caso di Angular, il sistema di routing associa un percorso a un component (potete trovare approfondimenti sui component nei precedenti articoli su questo sito). Ovviamente questa non è la sola funzionalità di un sistema di routing, in quanto possiamo anche creare link (sia statici che dinamici tramite binding), possiamo passare parametri obbligatori e/o opzionali e li possiamo recuperare da codice, possiamo eseguire codice prima di navigare verso un component e prima di navigare via da un component e molto altro ancora.

In questo articolo ci occuperemo di queste funzionalità in modo da poterle maneggiare pienamente nelle nostre applicazioni.

Struttura dell'applicazione

La struttura dell'applicazione che creeremo durante quest'articolo è molto semplice. Abbiamo un component principale (AppComponent) che svolge i seguenti compiti:

  • specifica il layout dell'applicazione;
  • contiene i link per navigare tra i component;
  • definisce l'area all'interno della quale dobbiamo renderizzare il component verso cui si naviga

I component che verranno renderizzati all'interno di quello principale sono tre:

  • ListComponent: mostra una lista di persone;
  • DetailComponent: mostra il dettaglio della persona selezionata;
  • AboutComponent: mostra una pagina di about.

Il component principale contiene i link ai component ListComponent e AboutComponent, mentre a DetailComponent ci si arriva solo da ListComponent.

L'applicazione verrà creata utilizzando angular-cli tramite i seguenti comandi:

  • ng new demo: crea l'applicazione con già il modulo principale e il component principale.
  • ng g component ListComponent: crea il ListComponent;
  • ng g component AboutComponent: crea l'AboutComponent;
  • ng g component DetailComponent: crea il DetailComponent.

Una volta creato, la struttura del progetto sarà quella mostrata nella figura 1.

Ora che abbiamo visto come strutturare la nostra applicazione, passiamo a vedere come configurare il sistema di routing.

Configurare il routing

Per configurare il sistema di routing dobbiamo innanzitutto importare il RouterModule nell'AppModule. Questo significa che dobbiamo prima importare la definizione della classe RouterModule e successivamente aggiungerla alla proprietà imports del decorator NgModule. Una volta fatto questo, dobbiamo creare una lista di url e specificare a quale component ogni url corrisponde. Una volta creata questa lista dobbiamo darla in pasto al sistema di routing invocando il metodo statico forRoot della classe RouterModule.

La lista è un'istanza dell'oggetto Routes che corrisponde a un array di oggetti di tipo Route. Un oggetto Route contiene diverse proprietà, ma le principali sono le seguenti:

  • path: specifica il percorso che stiamo configurando;
  • component: specifica il component a cui path si riferisce;
  • data: specifica parametri che possiamo passare al component;
  • redirectTo: specifica il path a cui redirigere;
  • resolve: specifica una classe che può eseguire codice prima che il component venga caricato. i dati caricati da questa classe sono passati poi al component;
  • pathMatch: specifica il match sul path (da utilizzare in coppia con redirectTo)
  • canActivate: specifica una classe che implementa la logica di accesso al component e può consentirne o negarne l'accesso;
  • canDeactivate: specifica una classe che implementa la logica di uscita dal component e può consentirne o negarne l'uscita.

Il seguente frammento di codice mostra come mettere in atto quello che abbiamo appena visto.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { ListComponent } from './list/list.component';
import { AboutComponent } from './about/about.component';
import { DetailComponent } from './detail/detail.component';

const routes: Routes = [
  { path: '', redirectTo: 'list', pathMatch: 'full' },
  { path: 'list', component: ListComponent },
  { path: 'about', component: AboutComponent },
  { path: 'detail/:id', component: DetailComponent },
  { path: '**', component: ListComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    ListComponent,
    AboutComponent,
    DetailComponent,
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Oltre ad aver configurato i path verso i vari component, abbia creato altri due url. Il primo url è vuoto e indica al sistema di routing di fare una redirect a un altro url quando l'url è vuoto. Il secondo url contiene due asterischi e specifica quale component caricare quando viene specificato un url inesistente.

L'ultimo step per vedere la nostra applicazione partire e navigare tra le pagine è quello di modificare il template del component AppComponent per creare i link e specificare l'area di rendering del component attivo.

3 pagine in totale: 1 2 3
Contenuti dell'articolo

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

Top Ten Articoli

Articoli via e-mail

Iscriviti alla nostra newsletter nuoviarticoli per ricevere via e-mail le notifiche!

In primo piano

.NET Conference Italia 2023 - Milano e Online

Le novità di .NET 7 e C# 11

Le novità in ASP.NET Core e Blazor con .NET 7

Le novità di Entity Framework (Core) 7

I più letti di oggi

In evidenza

Misc