Nozioni di base su Angular: come aggiungere il routing

Passare da una pagina all'altra è un compito piuttosto fondamentale per una webapp. Fortunatamente, Angular ha un eccellente supporto per il routing.

Se stai creando un'applicazione Angular con più pagine, devi utilizzare il routing per spostarti tra di esse. Puoi farlo creando un elenco di percorsi con un percorso per ciascuna pagina nel modulo di routing.

È quindi possibile indirizzare ad altre pagine all'interno di un file HTML utilizzando un tag di ancoraggio. Puoi anche indirizzare ad altre pagine all'interno di un file TypeScript, utilizzando il metodo router.navigate().

Come creare una nuova pagina in un'applicazione Angular

Innanzitutto, crea una nuova applicazione Angular. Puoi anche usarne uno esistente. Se non hai familiarità con la creazione di una nuova app Angular, puoi apprenderla insieme ad altri concetti introduttivi utilizzati in Angular.

Crea un nuovo componente nella tua app Angular utilizzando il comando ng generate componente:
```
ng generate component home
```

Apri il file src/app/home/home.component.html e sostituisci il contenuto corrente con nuovo contenuto.

<div class="content">
  <h2> Home </h2>
  <p>
    I am a photographer that does wedding photography. Check out my projects!
  </p>
  <div class="card">
    <h4> John & Amy </h4>
    <p> Blue Mountains, Australia </p>
  </div>
  <div class="card">
    <h4> Ross & Rach </h4>
    <p> Hunter Valley Gardens, Australia </p>
  </div>
</div>

Compila il file src/app/home/home.component.css con lo stile per il contenuto HTML.

.content {
  line-height: 2rem;
  font-size: 1.2em;
}
 
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  width: 400px;
  padding: 16px;
  margin: 24px 0px;
  background-color: whitesmoke;
  font-family: sans-serif;
}

Crea un altro componente utilizzando il comando ng generate componente nel terminale. Utilizzerai il nuovo componente come una pagina Informazioni.
```
ng generate component about
```

Apri il file src/app/about/about.component.html e sostituisci il contenuto corrente con nuovo contenuto.

<div class="content">
 <h2> About Me </h2>
 <p>
   I'm John, and I love taking photos. I have been taking photos for over 25 years. Visit me on my social media:
 </p>
 <a href=""> Facebook </a> 
 <a href=""> LinkedIn </a> 
 <a href=""> Instagram </a> 
</div>

Compila il file src/app/about/about.component.css con lo stile per il contenuto HTML.
```
.content {
  line-height: 2rem;
  font-size: 1.2em;
}
```

Come navigare tra le due pagine

Puoi utilizzare il routing per navigare da una pagina all'altra. È possibile configurarlo in un file di routing. Questo esempio avrà un file di routing per l'intera app, situato in src/app/app-routing.module.ts.

Se la tua app non dispone già del file del modulo di routing dell'app, puoi generarne uno utilizzando il comando ng generate module. In una riga di comando o in un terminale, vai alla cartella principale dell'applicazione ed esegui il comando seguente:
```
ng generate module app-routing --module app --flat
```
Verrà creato un file app-routing.module.ts nella cartella src/app.
Nella parte superiore del file, aggiungi ulteriori importazioni per i componenti Home e Informazioni. Assicurati di importare anche RouterModule e CommonModule; alla fine, le tue dichiarazioni di importazione dovrebbero assomigliare a:
```
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component'; 
```
Sotto le importazioni, aggiungi un nuovo array di rotte per memorizzare i percorsi che utilizzerai durante il routing su ciascuna pagina.
```
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];
```

Sostituisci il blocco NgModule con il seguente, che aggiunge RouterModule all'array di importazione ed esportazione.

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})

Nel file src/app/app.component.html, rimuovi il contenuto corrente e aggiungi il tag router-outlet.
```
<div class="container">
  <router-outlet></router-outlet>
</div>
```

Come passare alla nuova pagina in un file HTML

Per accedere a una pagina all'interno di un file HTML, utilizzare il tag di ancoraggio. Nell'attributo href, aggiungi il percorso che hai specificato nell'array delle rotte.

Nel file src/app/app.component.html , aggiungi due tag di ancoraggio prima del div contenitore. Ciò ti consentirà di navigare tra le pagine Home e Informazioni.
```
<div class="navbar">
  <a class="link" href="">Home</a>
  <a class="link" href="/about">About</a>
</div>
```

Aggiungi uno stile al file src/app/app.component.css .

.container {
  margin: 48px 35%;
  font-family: "Arial", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
}
 
.navbar {
  background-color: darkslategray;
  padding: 30px 50px;
  display: flex;
  align-items: center;
  font-family: sans-serif;
}
 
.link:first-of-type {
  margin-right: 32px;
}
 
.link {
  color: white;
  text-decoration: none;
  font-size: 14pt;
  font-weight: bold;
}

Aggiungi uno stile al margine generale della pagina in src/styles.css.
```
body {
  margin: 0;
  padding: 0;
}
```
In un prompt dei comandi o in un terminale, vai alla cartella principale dell'applicazione Angular. Esegui l'applicazione utilizzando il comando ng serve e attendi che termini la compilazione.
```
ng serve
```
In un browser, digita l'URL dell'host locale nella barra degli URL per visualizzare la tua applicazione. Per impostazione predefinita, solitamente è http://localhost:4200/.
Il tuo sito web verrà caricato nella home page.
È possibile accedere alla pagina Informazioni facendo clic sul collegamento Informazioni nella barra di navigazione.

Come passare alla nuova pagina in un file TypeScript

Finora, questa demo utilizza collegamenti HTML standard per fornire la navigazione. Per navigare utilizzando il file TypeScript anziché il file HTML, puoi utilizzare router.navigate().

Nel file src/app/app.component.html rimuovi i tag di ancoraggio e sostituiscili con i tag dei pulsanti. Questi pulsanti avranno un evento clic che attiva una funzione chiamata clickButton(). Quando chiami la funzione clickButton(), aggiungi il percorso dell'instradamento dell'URL come argomento.
```
<button class="link" (click)="clickButton('')">Home</button>
<button class="link" (click)="clickButton('/about')">About</button>
```

Aggiungi uno stile ai pulsanti nel file src/app/app.component.css .

button {
  background-color: black;
  padding: 4px 8px;
  cursor: pointer;
}

Nella parte superiore del file src/app/app.component.ts , importa il router.
```
import { Router } from '@angular/router'; 
```
Aggiungi un nuovo costruttore all'interno della classe AppComponent e inserisci il router all'interno dei parametri.
```
constructor(private router: Router) {
}
```
Sotto il costruttore, crea una nuova funzione chiamata clickButton(), che passerà alla nuova pagina in base all'URL che passi.
```
clickButton(path: string) {
    this.router.navigate([path]);
} 
```
Esegui nuovamente il comando ng serve nel prompt dei comandi o nel terminale.
```
ng serve
```
Naviga nel tuo sito web in un browser. L'href è ora sostituito da due pulsanti.
Fai clic sul pulsante Informazioni. Verrà indirizzato alla pagina Informazioni.

Creazione di più pagine in un'applicazione Angular

Puoi instradare tra più pagine all'interno di un'applicazione Angular utilizzando il routing. Se disponi di componenti separati per ciascuna pagina, puoi configurare i percorsi per i tuoi percorsi all'interno del modulo di routing.

Per navigare verso un'altra pagina tramite un file HTML, utilizza un tag di ancoraggio con l'attributo href come percorso di instradamento verso quella pagina. Per navigare verso un'altra pagina tramite un file TypeScript, puoi utilizzare il metodo router.navigate().