Angular 2 - Enrutamiento

El enrutamiento ayuda a dirigir a los usuarios a diferentes páginas según la opción que elijan en la página principal. Por lo tanto, según la opción que elijan, el componente angular requerido se mostrará al usuario.

Veamos los pasos necesarios para ver cómo podemos implementar el enrutamiento en una aplicación Angular 2.

Step 1 - Agregue la etiqueta de referencia base en el archivo 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 dos rutas para la aplicación. Para ello, cree 2 archivos llamadosInventory.component.ts y product.component.ts

Step 3 - Coloque el siguiente código en el archivo product.component.ts.

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

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

Step 4 - Coloque el siguiente código en el archivo Inventory.component.ts.

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

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

Ambos componentes no hacen nada elegante, solo representan las palabras clave según el componente. Entonces, para el componente Inventario, mostrará la palabra clave Inventario al usuario. Y para el componente de productos, mostrará la palabra clave del producto al usuario.

Step 5 - En el archivo app.module.ts, agregue el siguiente código -

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 { }

Los siguientes puntos deben tenerse en cuenta sobre el programa anterior:

Las appRoutes contienen 2 rutas, una es el componente Appproduct y la otra es el componente AppInventory.
Asegúrese de declarar ambos componentes.
RouterModule.forRoot asegura agregar las rutas a la aplicación.

Step 6 - En el archivo app.component.ts, agregue el siguiente código.

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  { }

Debe tenerse en cuenta el siguiente punto sobre el programa anterior:

<router-outlet> </router-outlet> es el marcador de posición para representar el componente según la opción que elija el usuario.

Ahora, guarde todo el código y ejecute la aplicación usando npm. Vaya al navegador, verá el siguiente resultado.

Ahora, si hace clic en el enlace Inventario, obtendrá el siguiente resultado.

Agregar una ruta de error

En Enrutamiento, también se puede agregar una ruta de error. Esto puede suceder si el usuario accede a una página que no existe en la aplicación.

Veamos cómo podemos implementar esto.

Step 1 - Agregue un componente PageNotFound como NotFound.component.ts como se muestra a continuación -

Step 2 - Agregue el siguiente código al nuevo archivo.

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

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

Step 3 - Agregue el siguiente código al archivo 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 {
}

Debe tenerse en cuenta el siguiente punto sobre el programa anterior:

Ahora tenemos una ruta adicional llamada ruta: '**', componente: PageNotFoundComponent. Por lo tanto, ** es para cualquier ruta que no se ajuste a la ruta predeterminada. Serán dirigidos al componente PageNotFoundComponent.

Ahora, guarde todo el código y ejecute la aplicación usando npm. Vaya a su navegador y verá el siguiente resultado. Ahora, cuando vaya a cualquier enlace incorrecto, obtendrá el siguiente resultado.

↰ Previous page Next page ↱