Rutas

Al ser angular un framework para realizar Singles Page Application (SPA) es decir que en una pagina unica que renderiza el contenido dependiendo de la logica del usuario, modifica el DOM virtual y por ende no se recarga. Normanete en este tipo de tecnologias el corazon son las rutas que son las encargadas de renderizar el contenido dependiendo de la URL sin salir del HTML unico.

En angular contamos con el archivo de rutas nombrado comunmente como app-routing.module.ts y tambien debe estar importando en el archivo del modulo, aunque su utlizacion es muy parecida a los modulos pues hace parte de el pero para separar responsabilidad se realiza en un archivo aparte que se encargue de administrar las rutas.

Para utilizar el archivo de rutas se utiliza NgModule como declaracion principar, pero se acompaña de dos métodos del paquete @angular/router que son Routes, RoutesModule.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { LayoutComponent } from './layout/layout.component';

const routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Se crea un array de objetos llamado routes de tipo Routes, aqui se va a administrar las rutas. Para este caso el path(ruta) esta como ''quiere decir que se cargara el componente asignado en la ruta index.

Se importa utilizando el Routermodule con la funcion forRoot que recibe las rutas asignadas y se encarga de administrar la navegación

Se exporta por que es necesario que el modulo principal app.module.ts los importe para incorporarlo en la aplicación.

Para que las rutas sean insertadas en es importante que en el template del componente se incluya la etiqueta <router-outlet></router-outlet>esto queire decir que queremos importar la rendericacion de las rutas en este componente en la posicion donde lo asignemos.

Dentro de las rutas podemos utilizar templates de renderizacion "Layout" dependiendo del tipo de pagina esto funciona para roles diferentes dependiendo el usuario y nos ayuda a reutilizar codigo e insertar componentes de panera paralela en nuestros proyectos, por ejemplo header.

children es un atributo de tipo array donde le enviamos hijos que se rendaricen dentro de este componente, el componente padre debe tener tambien <router-outlet></router-outlet> que es donde se renderizaran los componentes hijos.

const routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
		**children**: [
			{
			path: '',
			**redirectTo**: '/home',
			pathMarch: full,
			},
			{
        path: 'home',
        loadChildren: Homecomponents,
      },
		]
  }

<aside> 💡 Solo se van a renderizar los componentes con la estructura de layout que esten dentro de los objetos children

</aside>

<aside> 💡 El redirectTo no puede ser utilizado en un router con hijos.

</aside>

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

Para el caso de redirectTo nos a redireccionar en el caso del ejemplo de la http://ejemplo.com/ redirecciona a http://ejemplo.com/home que corresponde a un componente asiganado con el path 'home'

<aside> 💡 No se utiliza el componente inicial como layout pues en este proyecto no todas las paginas tendran los mismo componentes como estructura si fuera diferente podria utilizar el templeate del modulo padre como Layout (teniendo en cuenta que se renderizara en todos los componentes siempre.

</aside>

Ejemplo archivo del modulo.app.ts con el archivo de routas.

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

import { BannerComponent } from'./components/banner/banner.component';
import { HomeComponent } from'./home.component';

import { HomeRoutingModule } from'./home-routing.module';

@NgModule({
  declarations: [
    BannerComponent,
    HomeComponent
  ],
  imports: [
    HomeRoutingModule
  ]
})
export class HomeModule {

Url con parametros

Dentro de angular podemos enviar parametros en las url para identificar que deseamos renderizar, como son id o palabras claves, para esto debemos:

  1. Enviar el valor mendiante la routerLink se encierra en [] por que se entan enviando datos entre componentes, el parametro se vuelve array por que recibe la url y el parametro identidicado con :
<a [routerLink]="['/products'/:id]">
	ver producto 
</a>
  1. Asignar la url que recibe el parametro con el mismo nombre :id en este caso, esto se realiza en el archivo de rutas, anfular sabe que los : son identificadores para identificar los parametros
{
	path: 'products/:id',
  component: ProductDetailComponent,
}
  1. En el componente que recibe la url con el parametro se debe:
    1. capturar el parametro que viene por la url inyectando la propiedad ActivatedRoute del @angular/router
    2. utilizamos el metodo params de ActivatedRoute que es route.
    3. Utilizamos el ngOnInit por que estamos realizando la suscripcion a un evento que debemos escuchar al momento de iniciar el componente
    4. Nos suscribimos a esta accion y utilizamos el atributo params para asignarle el valor.
    5. se lo asignamos a una constante que vamos a utilizar como envio en un metodo para hacer la consulta.
import { ActivatedRoute, **Params** } 
from '@angular/router';

export class ProductDetailComponent 
implements OnInit {
constructor(
    private route: ActivatedRoute){
}
 ngOnInit(): void {   
 this.route.**params**.subscribe(
			(**params**: Params) => {
      const id = params.id;
      this.getProduct(id);
    });
 }
}

<aside> 💡 El NgOnInit debe ser implementado y se puede utilizar para hacer solicitud de datos.

</aside>