Creación de Rutas, pasar parámetro por URL y rutas hijas en Angular
Las aplicaciones Angular son aplicaciones SPA, Single Page Applications, en las cuales están formadas por componentes. Donde cada componente es una página de la aplicación.
Entonces, cómo es que se relacionan dichos componentes para poder navegar por toda la aplicación?
Sencillo es gracias a un fichero en el cual se establecen las rutas de internas de la aplicación donde se podrá navegar. Este fichero se localiza dentro del proyecto el src/app.
Existen dos formas distintas para la creación de dicho fichero:
- Durante la creación del proyecto de angular con el comando ng new nos preguntará el nombre del proyecto, posteriormente si queremos un archivo de rutas y que tipo de fichero de estilo implementarás. O también escribiendo el siguiente comando: ng new proyecto – -routing , tomará como referencia que si queremos el fichero de rutas
- La segunda forma es irnos a la ruta del proyecto src/app. Situados ahí creamos el fichero nos creamos un fichero es crear el fichero app.routing.ts manualmente.
Configuración del fichero app.routing.ts
En el caso de que creáramos el fichero routing, este fichero tendrá ya por defecto las importaciones necesarias y ciertas variables creadas.
Pero para nuestro caso que no tenemos ni idea de como crean las rutas en Angular configuraremos el fichero app.routing manualmente. Lo primero que tenemos que hacer es importar Routes y RouterModule de Angular router:
import { Routes, RouterModule } from '@angular/router';
Además, importa ModuleWithProviders de Angular core:
import { ModuleWithProviders} from "@angular/core";
Ahora creamos una variable constante de tipo Routes, que guardará la lista de todas las rutas de web. Ejemplo:
const routes: Routes = [ {} ];
Dicho eso, para crear una ruta debemos poner todos los datos de las rutas entre llaves {}, en donde se pondrán las propiedades de la ruta. A continuación, pondremos las que utilizaremos en este ejemplo:
- Path: es la ruta que queremos configurar.
- Component: componente asociado a esa ruta. Para que funcione tiene que importar el componente en la parte de arriba.
- PathMatch: esta propiedad es opcional, significa que toda la url tiene que coincidir (no solo cierta parte).
Sin embargo, existen más propiedades. En el caso de que quieras saber sobre su uso de estas propiedades. Recomiendo ir a la documentación de angular sobre las rutas.
Así es como quedaría una ruta en angular:
{ path:"losangeles",component:LosangelesComponent}
En el supuesto caso de que el usuario introdujera la url manual y se equivoque con la ruta, se dirija a una página que no existe debería saltarle el error 404. ¿Cómo nosotros nos encargamos de que se muestre la página con dicho error?
Creando un path para específico para ese error. Ejemplo:
{path:'**',component:Error404Component}
Con los asteriscos le decimos que cualquier url que no sea la que este registrada en la aplicación que se dirija al componente Error404. Importante, debe ser la última ruta en en el array de otro caso las rutas no funcionarán correctamente.
Posteriormente, exportamos una constante appRoutingProvider que será de tipo array any y la inicializamos con un array.
export const appRoutingProviders: any[]=[];
Para finalizar con la configuración del fichero, creamos otra constante la cual será tipo ModuleWithProvider que recibirá un tipo any. Haremos uso del módulo RouterModule, el cual previamente se ha importado. Y usamos un método que es .forRoot() , se usa para definir que las rutas sean a partir de la raíz de la web / . Pasando por parametro a dicho métodos appRoutes.
export const routing: ModuleWithProviders<any>=
RouterModule.forRoot(appRoutes);
Para que sea funcional tenemos que irnos a app.module.ts . Importamos el routing y appRoutingProviders del fichero app.routing.ts. El routing debemos de ponerlo dentro de @NgModule en los imports, para que navegue por las rutas previamente creadas. Mientras que el appRoutinPoviders debemos colocarlo en providers, porque le decimos cual será el proveedor de rutas.
Para terminar en app.component.html colocamos la etiqueta:
<router-outlet></router-outlet>Ya que es un componente que bien con el RouterModule y actúa como un contenedor dinámico, incrustando el componente adecuado para cada ruta.
Parámetros por URL
Para enviar parámetros en la url que poner el el path de la ruta el nombre del parámetro que se enviará. Ejemplo:
{path:"parametro/:num",component:ParametroComponent},
Ya con esto tenemos que ir al Componente que recibirá dicho parámetro e importar varios módulos de angular/router que serían los módulos Params y ActivatedRoute.
import {ActivatedRoute,Params} from "@angular/router"
En el constructor de la clase de componente hacemos una inyección de dependencia, para poder recuperar todos los objetos que nos envían por la url.
constructor(private _activeRouter: ActivatedRoute) {}
Para terminar de capturar los parámetros tenemos que ir al método ngOnInit y mediante el ActivatedRoute nos subscribimos para recuperar el parámetro.
ngOnInit(): void {
this._activatedRoute.params.subscribe((params: Params) => { this.numero = params.num;
});
}
Mediante la variable params recuperaríamos el parámetro enviado. Sería params y nombre del parámetro. He de recordar que todo parametro pasado por la url se convertirá a tipo texto, por lo que en caso de ser un número que vayamos a usar hay que parseala.
Rutas Hijas
Os preguntareis, ¿qué una ruta hija?
Existe una ruta padre la cual tiene una o varias rutas que desciendan de esta. Se entenderá mejor con el ejemplo más adelante.
Para crear rutas hijas, primero se debe ir a la ruta a la cual queramos que sea el padre y dentro de ella creamos las rutas hijas. En la ruta padre, agregamos la propiedad childen que será semejante al Routes que engloba todas las rutas, pero solo albergará las rutas hijas.
const appRoutes: Routes=[
{path:"padre",component:PadreComponent, children:[
{path:"homePadre",component:HomepadreComponent},{path:"hija",component:Hija1Component, pathMatch:'full'},{path:"hijas",component:Hija2Component},
]}
];
La única diferencia es que todo lo que este en la ruta padre ,es decir en html, lo tomará como un contenedor fijo y las rutas rutas hijas serán los contenedores dinámicos.
Ahora viene algo bastante interesante es que tenemos que poner la etiqueta <router-outlet></ router-outlet> de nuevo en el html del padre para poder hacer y mostrar los componentes de las rutas de las hijas. Si no está dicha etiqueta no mostrará nada de las rutas hijas.
Autor: Alejandro Navaroli Sallés
Curso: Desarrollo Web Full Stack
Centro: Tajamar
Año académico: 2020-2021
GitHub: https://github.com/AlexxDan/post_rutas_angular.git
Url de Referencia
Documentación Angular sobre routes: https://angular.io/guide/router
Academia Binaria: https://academia-binaria.com/paginas-y-rutas-angular-spa/
Coding Potions: https://codingpotions.com/angular-componentes-routing
Domini Code:https://www.youtube.com/watch?v=jYcAO49PaCI