• Angular v18 desde cero - 06 🌐 Routing en Angular 18: Domina el Enrutamiento Paso a Paso 🚀 - YT @jftics
• Angular v18 desde cero - 07 🌐 Routing en Angular 18: Domina Rutas Anidadas y Consulta de Parámetros - YT @jftics
• Angular Routing Tutorial

• angular.dev Route Loading Strategies

El archivo route está en “./src/app/app.routes.ts”

/<Proyecto-Nombre>/
  └─ /src/
      ├── /app/
      │    ├─ app.routes.ts 
      │    ...
      ...

El contenido básico es:

app.routes.ts

import { Routes } from '@angular/router';
 
export const routes: Routes = [];

• 46. Introduction to Angular Routing. Set up and load routes with RouterModule in angular. Youtube@LeelaWebDev (Leela Web Dev)

De la librería @angular/router en app.ts

app.ts

import { RouterOutlet } from '@angular/router'; // <-- RouterOutlet
 
@Component({
  selector: 'app-root',
 
  imports: [RouterOutlet], // <-- RouterOutlet
 
  templateUrl: './app.html',
  styleUrl: './app.css'  
})

creado el componente “pagina-a” la ruta para mostrarla se debería modificar el archivo “app.routes.ts”, no olvidar que la ruta /pag/ está

app.routes.ts

import { Routes } from '@angular/router';
import { PaginaA } from './pag/pagina-a/pagina-a'; // <-- Agregado, importa como objeto.
 
export const routes: Routes = [
// Agregado, path en "pag/página-a" a componente "PaginaA"
    {
        path:'pag/pagina-a',
        component: PaginaA
    }
];

con esto la dirección “pag/pagina-a” debe mostrar la página del componente.

inicio el servidor angular:

ng serve

y voy a la ruta: http://localhost:4200/pag/pagina-a

En la página “src/app/app.html”, borro el contenido por defecto y agrego los enlaces <a href=“”>

app.html

      <h1>Hello, {{ title() }}</h1>
<nav>
  <a href="">Pagina Inicio</a>
  <a href="pag/pagina-a">Página A</a>
</nav>
 
<router-outlet />

/<Proyecto-Nombre>/
  └─ /src/
      ├── /app/
      │    ├── /pag/
      │    │    ├── /pagina-a/
      │    │    │    │
      │    │    │    ...
      │    │    ...
      │    ...
      ...

• 47. Navigating Links in the Page using RouterLink in the angular. Youtube@LeelaWebDev (Leela Web Dev)

Con RouterOutlet llena el campo <router-outlet /> con la página del componente relacionado declarada en app.routes.ts, pero RouterLink evitar recargar toda la página.

En el archivo app.ts se debe agregar RouterLink del from @angular/router, luego de RouterOutlet:

app.ts

// antes: import { RouterOutlet } from '@angular/router'; 
import { RouterOutlet, RouterLink } from '@angular/router';
 
 
@Component({
  selector: 'app-root',
 
  // antes: imports: [RouterOutlet],
  imports: [RouterOutlet, RouterLink],
 
  templateUrl: './app.html',
  styleUrl: './app.css'
})

En versiones anteriores este código de import está en app.component.ts

Reemplazando el href y el routerLink (ojo el r en minúscula)

<!-- antes: <a href="pag/pagina-a">Página A</a> //-->
 
<a routerLink="pag/pagina-a">Página A</a>

Ejemplo en el que usa para redireccionar en el path “” a “login”

const routes: Routes = [
   {path='', redirectTo:'login', pathMatch:'full'},
   {path='login', component:LoginComponent}
]

• Angular Login and Signup using JSON-Server | Angular Routing | Angular Reactive Form, youtube@letsprogram30 (Let's Program) 4:46

• 48. Styling the Active Router Link using routerLinkActive and routerLinkActiveOptions in angular. Youtube@LeelaWebDev (Leela Web Dev)

Con RouterLinkActive, en el enlace cuya página o componente está activo, marca con un Clase para que puedas resaltarlo con CSS

En este ejemplo se le agregará la clase “activo” al link del componente activo.

app.html

   <a routerLink="pag/pag1" routerLinkActive="activo">Pag1</a>

Se tiene que agregar la funcionalidad en app.ts, en el @component:

app.ts

import { Component, signal } from '@angular/core';
import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router'; // <-- RouterLinkActive
 
@Component({
  selector: 'app-root',
  imports: [RouterOutlet, RouterLink, RouterLinkActive], // <-- RouterLinkActive
  templateUrl: './app.html',
  styleUrl: './app.css'
})

<style>
a{
   background-color:skyblue;
}
 
a.activo{
   background-color:red;
}
</style>
el enlace tendrá el estilo de "activo"

Con Router se puede ir programaticamente a un URL precargado como RouterLink

• 49. Navigate between pages using router programmatically in Typescript code in angular. Youtube@LeelaWebDev (Leela Web Dev)

creo el botón ir a pag3 el evento onDisparar(), en este ejemplo lo agrego en app.html

app.html

    <button (click)="onDisparar()">Ir a pag3</button>

Le agregué en app.ts pero es en el *.ts del componente, el evento “onDisparar()”, se debe agregar router con el constructor para poder ser llamado this.router.navigateByUrl(“/pag/pag3”)

app.ts

import { Component, signal } from '@angular/core';
import { RouterOutlet, RouterLink, RouterLinkActive, Router } from '@angular/router'; // <-- agregado Router 
 
@Component({
  selector: 'app-root',
  imports: [RouterOutlet, RouterLink, RouterLinkActive],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
  protected readonly title = signal('testang');
 
  constructor(private router: Router){} // <-- agregado para Router 
 
  onDisparar(){
    alert("hola")
    this.router.navigateByUrl("/pag/pag3") // <-- el URL
    //this.router.navigateByUrl(["/pag/pag3"]) //como array para meter variables?
  }
 
}