Angular 2 - Routing

Il routing aiuta a indirizzare gli utenti a pagine diverse in base all'opzione che scelgono nella pagina principale. Quindi, in base all'opzione che scelgono, il componente angolare richiesto verrà reso all'utente.

Vediamo i passaggi necessari per vedere come possiamo implementare il routing in un'applicazione Angular 2.

Step 1 - Aggiungi il tag di riferimento di base nel file index.html.

<!DOCTYPE html>
<html>
   <head>
      <base href = "/">
      <title>Angular QuickStart</title>
      <meta charset = "UTF-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      
      <base href = "/">
      <link rel = "stylesheet" href = "styles.css">

      <!-- Polyfill(s) for older browsers -->
      <script src = "node_modules/core-js/client/shim.min.js"></script>
      <script src = "node_modules/zone.js/dist/zone.js"></script>
      <script src = "node_modules/systemjs/dist/system.src.js"></script>
      <script src = "systemjs.config.js"></script>

      <script>
         System.import('main.js').catch(function(err){ console.error(err); });
      </script>
   </head>

   <body>
      <my-app></my-app>
   </body>
</html>

Step 2- Crea due percorsi per l'applicazione. Per questo, crea 2 file chiamatiInventory.component.ts e product.component.ts

Step 3 - Inserisci il seguente codice nel file product.component.ts.

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

@Component ({
   selector: 'my-app',
   template: 'Products',
})
export   class   Appproduct  {
}

Step 4 - Inserisci il seguente codice nel file Inventory.component.ts.

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

@Component ({
   selector: 'my-app',
   template: 'Inventory',
})
export class AppInventory  {
}

Entrambi i componenti non fanno nulla di speciale, si limitano a rendere le parole chiave in base al componente. Pertanto, per il componente Inventario, mostrerà all'utente la parola chiave Inventario. E per il componente prodotti, mostrerà la parola chiave del prodotto all'utente.

Step 5 - Nel file app.module.ts, aggiungi il codice seguente -

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { Appproduct } from './product.component';
import { AppInventory } from './Inventory.component';
import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
   { path: 'Product', component: Appproduct },
   { path: 'Inventory', component: AppInventory },
];

@NgModule ({
   imports: [ BrowserModule,
   RouterModule.forRoot(appRoutes)],
   declarations: [ AppComponent,Appproduct,AppInventory],
   bootstrap: [ AppComponent ]
})
export class AppModule { }

I seguenti punti devono essere annotati sul programma di cui sopra:

  • Gli appRoutes contengono 2 route, una è il componente Appproduct e l'altra è il componente AppInventory.

  • Assicurati di dichiarare entrambi i componenti.

  • RouterModule.forRoot garantisce di aggiungere le rotte all'applicazione.

Step 6 - Nel file app.component.ts, aggiungi il seguente codice.

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

@Component ({
   selector: 'my-app',
   template: `
   <ul>
      <li><a [routerLink] = "['/Product']">Product</a></li>
      <li><a [routerLink] = "['/Inventory']">Inventory</a></li>
   </ul>
   <router-outlet></router-outlet>`
})
export class AppComponent  { }

Il seguente punto deve essere notato sul programma di cui sopra:

  • <router-outlet> </router-outlet> è il segnaposto per il rendering del componente in base all'opzione scelta dall'utente.

Ora salva tutto il codice ed esegui l'applicazione usando npm. Vai al browser, vedrai il seguente output.

Ora se fai clic sul collegamento Inventario, otterrai il seguente output.

Aggiunta di un percorso di errore

In Routing, si può anche aggiungere un percorso di errore. Ciò può accadere se l'utente accede a una pagina che non esiste nell'applicazione.

Vediamo come possiamo implementarlo.

Step 1 - Aggiungi un componente PageNotFound come NotFound.component.ts come mostrato di seguito -

Step 2 - Aggiungi il seguente codice al nuovo file.

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

@Component ({  
   selector: 'my-app',  
   template: 'Not Found', 
})  
export class PageNotFoundComponent {  
}

Step 3 - Aggiungi il codice seguente al file app.module.ts.

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { Appproduct } from './product.component' 
import { AppInventory } from  './Inventory.component' 
import { PageNotFoundComponent } from  './NotFound.component' 
import { RouterModule, Routes } from '@angular/router';  

const appRoutes: Routes = [ 
   { path: 'Product', component: Appproduct }, 
   { path: 'Inventory', component: AppInventory }, 
   { path: '**', component: PageNotFoundComponent } 
];  

@NgModule ({ 
   imports: [ BrowserModule, 
   RouterModule.forRoot(appRoutes)], 
   declarations: [ AppComponent,Appproduct,AppInventory,PageNotFoundComponent], 
   bootstrap: [ AppComponent ] 
}) 

export class AppModule {
}

Il seguente punto deve essere notato sul programma di cui sopra:

  • Ora abbiamo una route aggiuntiva chiamata path: '**', component: PageNotFoundComponent. Quindi, ** è per qualsiasi rotta che non si adatta alla rotta predefinita. Verranno indirizzati al componente PageNotFoundComponent.

Ora salva tutto il codice ed esegui l'applicazione usando npm. Vai al tuo browser e vedrai il seguente output. Ora, quando vai su un collegamento sbagliato, otterrai il seguente output.