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 paquete. 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
- : Especifica la ruta de la ruta
- : Especifica la estrategia de coincidencia (es decir, prefijo o completa )
- : Especifica el componente que se asigna a una ruta
- : 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 etiqueta en angular es una directiva exportada por y 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 directiva para crear enlaces. Esto reemplaza el atributo en la etiqueta de anclaje. También proporciona la opció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.

3. Creando una aplicación Angular
Ejecute el comando 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 comando en la consola npm para crear un módulo de producto con dos variables miembro. Agregue el siguiente código al archivo.
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 comando en la consola npm para crear el componente de lista de productos. Agregue el siguiente código al archivo.
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 archivo 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 comando en la consola npm para crear el componente de lista de productos. Agregue el siguiente código al archivo.
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 archivo 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 comando en la consola npm para crear un módulo de enrutamiento . Agregue el siguiente código al archivo.
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 archivo.
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,
|