Bienvenidos lectores, en este tutorial, aprenderemos los conceptos básicos detrás del enrutamiento en angular.

1. Introducción

El enrutamiento en angular es una parte esencial del marco angular contenido en el @angular/routerpaquete. Eso,

  • Ayuda a los desarrolladores a crear aplicaciones de una sola página con varios estados y vistas utilizando rutas y componentes
  • Permite la navegación y el enrutamiento del lado del cliente entre varios componentes
  • Permite la carga diferida de módulos
  • Agregue protectores del enrutador para la protección del lado del cliente y permita o no permita el acceso a los componentes o módulos
  • Varias estrategias de coincidencia de ruta (es decir, prefijo y completa ) para decirle al enrutador cómo hacer coincidir una ruta específica con un componente
  • Fácil acceso a los parámetros de ruta y consult

1.1 Rutas y caminos en el enrutamiento angular

En angular, una ruta es un objeto que proporciona información sobre qué componente se asigna a una ruta específica. Una ruta es un fragmento de una URL que determina dónde se encuentra exactamente el recurso al que el usuario desea acceder. En angular, los desarrolladores pueden definir una ruta utilizando configuraciones de ruta o una instancia de la interfaz del enrutador . Cada ruta tiene las siguientes propiedades, es decir

  • path: Especifica la ruta de la ruta
  • pathMatch: Especifica la estrategia de coincidencia (es decir, prefijo o completa )
  • component: Especifica el componente que se asigna a una ruta
  • redirectTo: URL a la que se redirigirá a los usuarios si una ruta coincide

Por ejemplo,

1
{ path: 'products', component: ProductlistComponent }

1.1.1 Parámetros de ruta

En angular, las rutas dinámicas se utilizan en una aplicación web para pasar los datos o el estado de la aplicación entre diferentes componentes y páginas. Los desarrolladores definen un parámetro de ruta utilizando la sintaxis de dos puntos seguidos del nombre del parámetro. Por ejemplo,

1
{ path: 'product/:product_id', component: ProductdetailComponent }

Para acceder a los parámetros de ruta, los desarrolladores usan el servicio ActivatedRoute o los observables ParamMap comenzando con Angular 4.

1.2 Salida del enrutador

La router-outletetiqueta en angular es una directiva exportada por RouterModuley actúa como un marcador de posición para el enrutador donde necesita insertar los componentes coincidentes. Está representado por la siguiente sintaxis.

1
<router-outlet></router-outlet>

1.2.1 Directivas de navegación en enrutamiento angular

Angular Router proporciona la routerLinkdirectiva para crear enlaces. Esto reemplaza el hrefatributo en la etiqueta de anclaje. También proporciona la routerLinkActiveopción para marcar un enlace como activo . Por ejemplo,

1
<a [routerLink]='/product'>Products</a>

Recuerde siempre que un enrutador angular puede admitir más de una salida en la misma aplicación. La salida principal se denomina salida primaria y otras salidas se denominan salidas secundarias . Ahora abra el código de Visual Studio y veamos cómo implementar este tutorial en marcos angulares 6.

2. Ejemplo de enrutamiento de Angular 6

Aquí hay una guía sistemática para implementar este tutorial.

2.1 Herramientas utilizadas

Estamos usando Visual Studio Code y Node Terminal para compilar y ejecutar el código angular en un navegador.

2.2 Estructura del proyecto

En caso de que esté confundido acerca de dónde debe crear los archivos o carpetas correspondientes, revisemos la estructura del proyecto de la aplicación angular.

Enrutamiento Angular 6 - Estructura de la aplicación de enrutamiento
Fig.1: Estructura de la aplicación de enrutamiento angular

3. Creando una aplicación Angular

Ejecute el ng new angular-routing-examplecomando en la consola npm para crear un nuevo proyecto angular. Una vez que se crea el nuevo proyecto, siga los pasos a continuación.

3.1 Crear modelo de producto

Ejecute el ng g m mymodel/productcomando en la consola npm para crear un módulo de producto con dos variables miembro. Agregue el siguiente código al product.module.tsarchivo.

product.module.ts

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
 
@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
 
export class ProductModule {
 
  productid: Number;
  productname: String;
 
  constructor(id: number, name: string) {
    this.productid = id;
    this.productname = name;
  }
}

3.2 Creación de componentes de producto

Siga los pasos a continuación para crear los dos componentes de producto diferentes.

3.2.1 Componente de lista de productos

Ejecute el ng g c mycomponents/productlistcomando en la consola npm para crear el componente de lista de productos. Agregue el siguiente código al productlist.component.tsarchivo.

productlist.component.ts

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
 
// Importing the product model service
import { ProductModule } from '../../mymodel/product/product.module';
 
@Component({
  selector: 'app-productlist',
  templateUrl: './productlist.component.html',
  styleUrls: ['./productlist.component.css']
})
 
export class ProductlistComponent implements OnInit {
 
  public productsarray: ProductModule[];
 
  constructor(private _router: Router) {
    console.log('Product list component is initialized.');
  }
 
  // Initializing the products array at the component startup
  ngOnInit() {
    this.productsarray = [
      new ProductModule(1, 'Apple iPhone'),
      new ProductModule(2, 'Google Home Mini'),
      new ProductModule(3, 'Sony Walkman'),
      new ProductModule(4, 'Samsung Galaxy'),
      new ProductModule(5, 'Sony Playstation Portable'),
      new ProductModule(6, 'LG 4K HDR Television'),
      new ProductModule(7, 'Google Pixel 3 XL'),
      new ProductModule(8, 'Amazon Alexa')
    ];
  }
 
  // Method to get the selected product id to display details on the "product-detail" component
  getproductdetails(product: ProductModule) {
    this._router.navigate(['/product', product.productid]);
  }
}

Agregue el siguiente código al productlist.component.htmlarchivo de plantilla para mostrar la lista de productos al usuario.

productlist.component.html

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
<div class="container">
  <h3 class="text-danger">Product List</h3>
  <small class="text-muted">This component displays the product list.</small>
  <div> </div>
 
  <table class="table table-bordered">
    <thead>
      <tr class="text-center">
        <th scope="col">Product Id</th>
        <th scope="col">Product Name</th>
      </tr>
    </thead>
    <tbody>
      <tr class="text-center" *ngFor="let product of productsarray">
        <td><a style="text-decoration: none; cursor: pointer; color: blue;"
            (click)="getproductdetails(product);">{{product.productid}}</a></td>
        <td>{{product.productname}}</td>
      </tr>
    </tbody>
  </table>
</div>

3.2.2 Componente Detalles del producto

Ejecute el ng g c mycomponents/productdetailcomando en la consola npm para crear el componente de lista de productos. Agregue el siguiente código al productdetail.component.tsarchivo.

productdetail.component.ts

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
 
@Component({
  selector: 'app-productdetail',
  templateUrl: './productdetail.component.html',
  styleUrls: ['./productdetail.component.css']
})
 
export class ProductdetailComponent implements OnInit {
 
  selected_productid: Number;
 
  constructor(private _acroute: ActivatedRoute) {
    console.log('Product detail component is initialized.');
  }
 
  ngOnInit() {
    // Fetching the id and showing the selected product details on the "product-detail" component
    this._acroute.params.subscribe(
      param => this.selected_productid = param.product_id
    );
  }
}

Agregue el siguiente código al productdetail.component.htmlarchivo de plantilla para mostrar los detalles del producto seleccionado al usuario.

productdetail.component.html

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
<div class="container">
    <h3 class="text-danger">Product Detail</h3>
    <small class="text-muted">This component displays the details of the selected product.</small>
    <div> </div>
 
    <div id="productdetail">
        <h5>Selected product is= <span class="text-success">{{selected_productid}}</span></h5>
    </div>
    <div> </div>
 
    <div style="text-align: right;">
        <a routerLink="/products" class="text-muted" style="text-decoration: none;">Go To
            Products List</a>
    </div>
</div>

3.3 Creación de un módulo de enrutamiento

Ejecute el ng g m routingcomando en la consola npm para crear un módulo de enrutamiento . Agregue el siguiente código al routing.module.tsarchivo.

routing.module.ts

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
 
// My product-list and product-detail components
import { ProductlistComponent } from '../mycomponents/productlist/productlist.component';
import { ProductdetailComponent } from '../mycomponents/productdetail/productdetail.component';
 
// Configuring the routing paths
const routes: Routes = [
  { path: '', redirectTo: '/products', pathMatch: 'full' },
  { path: 'products', component: ProductlistComponent },
  { path: 'product/:product_id', component: ProductdetailComponent }
];
 
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
 
export class RoutingModule { }

3.4 Agregar datos al módulo de la aplicación

Agregue el siguiente código al módulo predeterminado de la aplicación angular

3.4.1 Módulo de aplicación

Agregue el siguiente código al app.module.tsarchivo.

app.module.ts

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';
 
// My application components
import { ProductlistComponent } from './mycomponents/productlist/productlist.component';
import { ProductdetailComponent } from './mycomponents/productdetail/productdetail.component';
 
// Injecting the routing module
import { RoutingModule } from './routing/routing.module';
 
@NgModule({
  declarations: [
    AppComponent,