Cursos Empresas Blog Live Conf Eventos Precios

0:009:46

Recursos

Resumen

Toda aplicación requiere de una barra de navegación, de un menú o enlaces para redireccionar a través de sus rutas.

Redirección de ruta en Angular

No es buena práctica realizar una redirección a otra ruta utilizando un simple href, ya que el mismo genera que se recargue toda la página y vuelva a renderizarse los componentes. Angular posee una alternativa para evitar el redireccionamiento utilizando la directiva routerLink.

Comienza creando enlaces con el elemento HTML <a>, pero en lugar de utilizar href, utiliza routerLink.

<!-- components/nav-bar/nav-bar.components.html -->
<div class="header-right hidde-menu">
    <a routerLink="/home">Home</a>
    <a routerLink="/catalogo">Catalogo</a>
    <a routerLink="/about">About</a>
</div>

Es así de simple, si las rutas son correctas y están creadas en el archivo app-routing.module.ts, Angular renderizará a través del <router-outlet></router-outlet> el componente correspondiente a la ruta sin recargar la página.

Parámetros dinámicos en las rutas

También es posible hacer un binding en el routerLink para crear rutas con parámetros dinámicos. Para esto, rodea esta directiva de [] y pásale como input un array. Angular se encargará de construir las rutas con cada elemento del mismo.

<!-- modules/website/components/nav-bar/nav-bar.components.html -->
<div class="header-right hidde-menu">
    <a [routerLink]="['/catalogo', 'electronica']">Electrónica</a>
    <a [routerLink]="['/catalogo', 12]">Categoría 12</a>
    <a [routerLink]="['/catalogo', '13ABC']">Categoría 13ABC</a>
</div>

El ejemplo anterior dará como resultado las rutas /catalogo/electronica, /catalogo/12 y /catalogo/13ABC. Cada ruta con su propio parámetro dinámico que podrás capturar posteriormente en el controlador de tu componente.

Cómo identificar ruta activada

Para mejorar la experiencia del usuario utilizando la aplicación, es buena práctica resaltar con algún estilo CSS particular la ruta activada en el momento. Angular hace esto por nosotros gracias a la directiva routerLinkActive.

<div class="header-right hidde-menu">
    <a routerLink="/home" routerLinkActive="active">Home</a>
    <a routerLink="/catalogo" routerLinkActive="active">Catalogo</a>
    <a routerLink="/about" routerLinkActive="active">About</a>
</div>

Cuando Angular identifique que la misma ruta del enlace está activa, le agregará la clase active. Ya luego es tarea de darle estilos a esta clase para que luzca diferente con respecto a las rutas desactivadas.

Contribución creada por: Kevin Fiorentino.

Navegación Dinámica en Angular: Uso de Router Link y Router Active

Curso de Angular Router: Lazy Loading y Programación Modular

Clase 6 / 25

Ver clases

Navegación Dinámica en Angular: Uso de Router Link y Router Active

Curso de Angular Router: Lazy Loading y Programación Modular

Clase 6 de 25

Clase 6 / 25

Navegación Dinámica en Angular: Uso de Router Link y Router Active

Curso de Angular Router: Lazy Loading y Programación Modular

Clase 6 / 25

Ver clases

 <div class="header-right hidde-menu"> <a routerLink="/home">Home</a> <a routerLink="/catalogo">Catalogo</a> <a routerLink="/about">About</a> </div>

 <div class="header-right hidde-menu"> <a [routerLink]="['/catalogo', 'electronica']">Electrónica</a> <a [routerLink]="['/catalogo', 12]">Categoría 12</a> <a [routerLink]="['/catalogo', '13ABC']">Categoría 13ABC</a> </div>

<div class="header-right hidde-menu"> <a routerLink="/home" routerLinkActive="active">Home</a> <a routerLink="/catalogo" routerLinkActive="active">Catalogo</a> <a routerLink="/about" routerLinkActive="active">About</a> </div>

Comentarios

Alejandro Mejia Escobar#3097787

Les comparto el código de categories.services.ts para aquellos que vienen trabajando el proyecto desde antes y no clonaron el repositorio en este curso.

No es necesario crear un modelo para Categorías, recuerden que ya habíamos generado uno dentro del modelo de Productos

import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';
import { Category } from '../interfaces/product.model';

@Injectable({
  providedIn: 'root'
})
export class CategoriesService {

  private apiUrl = `${environment.API_URL}/api/categories`;

  constructor(
    private http: HttpClient
  ) { }

  getAll(limit?: number, offset?: number){
    let params = new HttpParams();
    if (limit && offset){
      params = params.set('limit', limit),
      params = params.set('offset', offset)
    }
    return this.http.get<Category[]>(this.apiUrl, {params})
  }
}

Antonio Luis Fernandez Dromundo#3276677

Les comparto la documentacion oficial para ampliar los conceptos que Nico nos da en esta clase y en general en el curso: https://docs.angular.lat/guide/router

Carlos Gabriel Tovar Pena#4126336

A mi me ha sucedido un acontecimiento de lo mas extraño, y es que cada vez que cambiaba entre las categorias, en vez de inicializar el offset a 0 este incrementaba y el array de productos seguia siendo el mismo, por ende, en vez de sustituir los productos de cada categoria venian concatenados con los productos de la categoria anterior. Es como si en vez de reiniciar los atributos del componente cada vez que cambiaba de categoria, se arrastrara de un modo que no entiendo para nada sus valores actuales.

import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';
import { Category } from '../interfaces/product.model';

@Injectable({
  providedIn: 'root'
})
export class CategoriesService {

  private apiUrl = `${environment.API_URL}/api/categories`;

  constructor(
    private http: HttpClient
  ) { }

  getAll(limit?: number, offset?: number){
    let params = new HttpParams();
    if (limit && offset){
      params = params.set('limit', limit),
      params = params.set('offset', offset)
    }
    return this.http.get<Category[]>(this.apiUrl, {params})
  }
}

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { switchMap } from 'rxjs/operators';
import { Product } from 'src/app/models/product.model';
import { ProductsService } from 'src/app/services/products.service';

@Component({
  selector: 'app-category',
  templateUrl: './category.component.html',
  styleUrls: ['./category.component.scss']
})
export class CategoryComponent implements OnInit {
  products: Product[] = [];
  limit = 10;
  offset = 0;
  categoryId: string | null = null;

  constructor(
    private route: ActivatedRoute,
    private productsService:ProductsService
  ) { }

  ngOnInit(): void {
    this.route.paramMap.pipe(
      switchMap(params => {
        this.categoryId = params.get('id');
        this.limit = 10;
        this.offset = 0;
        this.products = [];
        if (this.categoryId) {
          return this.productsService.getByCategory(this.categoryId, this.limit, this.offset);
        }
        return [];
      })
    )
    .subscribe(data => {
      this.products = this.products.concat(data);
      this.offset += this.limit;
    });
  }

  onLoadMore() {
    if (this.categoryId) {
      this.productsService.getByCategory(this.categoryId, this.limit, this.offset)
        .subscribe(data => {
          this.products = this.products.concat(data);
          this.offset += this.limit;
        });
    }
  }
}

Comentarios

Alejandro Mejia Escobar#3097787

Les comparto el código de categories.services.ts para aquellos que vienen trabajando el proyecto desde antes y no clonaron el repositorio en este curso.

No es necesario crear un modelo para Categorías, recuerden que ya habíamos generado uno dentro del modelo de Productos

import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';
import { Category } from '../interfaces/product.model';

@Injectable({
  providedIn: 'root'
})
export class CategoriesService {

  private apiUrl = `${environment.API_URL}/api/categories`;

  constructor(
    private http: HttpClient
  ) { }

  getAll(limit?: number, offset?: number){
    let params = new HttpParams();
    if (limit && offset){
      params = params.set('limit', limit),
      params = params.set('offset', offset)
    }
    return this.http.get<Category[]>(this.apiUrl, {params})
  }
}

Antonio Luis Fernandez Dromundo#3276677

Les comparto la documentacion oficial para ampliar los conceptos que Nico nos da en esta clase y en general en el curso: https://docs.angular.lat/guide/router

Carlos Gabriel Tovar Pena#4126336

import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';
import { Category } from '../interfaces/product.model';

@Injectable({
  providedIn: 'root'
})
export class CategoriesService {

  private apiUrl = `${environment.API_URL}/api/categories`;

  constructor(
    private http: HttpClient
  ) { }

  getAll(limit?: number, offset?: number){
    let params = new HttpParams();
    if (limit && offset){
      params = params.set('limit', limit),
      params = params.set('offset', offset)
    }
    return this.http.get<Category[]>(this.apiUrl, {params})
  }
}

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { switchMap } from 'rxjs/operators';
import { Product } from 'src/app/models/product.model';
import { ProductsService } from 'src/app/services/products.service';

@Component({
  selector: 'app-category',
  templateUrl: './category.component.html',
  styleUrls: ['./category.component.scss']
})
export class CategoryComponent implements OnInit {
  products: Product[] = [];
  limit = 10;
  offset = 0;
  categoryId: string | null = null;

  constructor(
    private route: ActivatedRoute,
    private productsService:ProductsService
  ) { }

  ngOnInit(): void {
    this.route.paramMap.pipe(
      switchMap(params => {
        this.categoryId = params.get('id');
        this.limit = 10;
        this.offset = 0;
        this.products = [];
        if (this.categoryId) {
          return this.productsService.getByCategory(this.categoryId, this.limit, this.offset);
        }
        return [];
      })
    )
    .subscribe(data => {
      this.products = this.products.concat(data);
      this.offset += this.limit;
    });
  }

  onLoadMore() {
    if (this.categoryId) {
      this.productsService.getByCategory(this.categoryId, this.limit, this.offset)
        .subscribe(data => {
          this.products = this.products.concat(data);
          this.offset += this.limit;
        });
    }
  }
}

Comentarios (10)10 comentarios

Alejandro Mejia Escobar

Hace 5 años

Antonio Luis Fernandez Dromundo

Jimmy Buriticá Londoño

Muy interesante todo lo que se puede hacer con las rutas en Angular, supongo que al final del curso ya habremos visto la mayoría de opciones.

Carlos Gabriel Tovar Pena

Hace 4 años

¿A alguien más le ha pasado?

Yo tuve que inicializar los valores de limit, offset y el arreglo de productos dentro del ngOnInit de mi componente de categoria.

Alex Lihuel Mujica

Lo que creo que ocurre es que Angular renderiza el componente cuando cambiás de categoría pero no lo vuelve a crear. Lo que podés hacer es reiniciar los valores dentro del switchMap como hiciste o implementar AfterViewInit que básicamente ese hook se ejecuta cada vez que se renderiza el componente

Avilio Fernando Amador Soto

Categoría electronics: 🙂

Categoría toys: ...😲

Santiago Velandia Gallo

Angular es genial, recuerdo que para hacer algo así tenía que hacer variables y funciones en javascript para saber en cual estaba posicionado

Jaime cervantes hidalgo

qué pasa si no quiero mostrar el id en la url ? en su lugar quisiera el nombre de la categoria

Daniel Avila Cardenas

Hace 3 años

Increible clase de Routerlink & RouterActive, Espectacular.

Hugo Bustamante

Con esta clase me surgió una duda con respecto a un caso. Si por ejemplo para una app que quiera renderizar solo información de diferentes ferreterías y quisiera mostrar la información en una sola pagina de solo una ferretería, tendría que crear por cada ferretería una pagina diferente y luego enrutarlas?. Agradezco mucho a quien me de una respuesta :D

Carlos Gómez

Para ello crearias solo un componente master y a este le setearias un unico valor para que pueda renderizar.

Darwing Steven Sánchez Londoño

Creo que utilizando el @input puedes recibir un objeto que tenga la información de la ferreteria, desde el componente padre puedes enviar esa información, bueno, no lo he probado pero posiblemente funcione. La otra forma es solamente enviando el id de la ferretería puede ser por parametro, como lo estamos haciendo, y luego desde el componente hacer lo mismo, la petición, en el servicio debes tener como un metodo de getById o algo así y te traes el todo objeto de la base de datos. Esa consulta en el componente te recomiendo hacerla en el ngOnInit para que carge antes del render.

Me corrigen porfavor si estoy equivocado.

Luis Márquez

ESTA CLASE ESTUVO GENIAL!

alberto ayala rodriguez

bastante nasty los estilos ❄

Kevin Bueno

no es un curso de css, amigo

Recursos

Resumen

Navegación Dinámica en Angular: Uso de Router Link y Router Active

Navegación Dinámica en Angular: Uso de Router Link y Router Active

Navegación Dinámica en Angular: Uso de Router Link y Router Active

Progreso del curso

Manejo de rutas

Módulos

Precarga de módulos

Guardianes

Deployment

Despedida

Navegación Dinámica en Angular: Uso de Router Link y Router Active

Navegación Dinámica en Angular: Uso de Router Link y Router Active

Recursos

Resumen

Redirección de ruta en Angular

Parámetros dinámicos en las rutas

Cómo identificar ruta activada

Comentarios

Recursos

Resumen

Redirección de ruta en Angular

Parámetros dinámicos en las rutas

Cómo identificar ruta activada

Comentarios