Configuración de rutas y refactorización de componentes en Angular

Clase 3 de 25 • Curso de Angular Router: Lazy Loading y Programación Modular

Contenido del curso

Manejo de rutas

Módulos

Precarga de módulos

Guardianes

Deployment

24
Despliegue de Aplicaciones Angular en Netlify paso a paso
08:30 min

Despedida

25
Routing avanzado en Angular: rutas, módulos y seguridad
01:19 min

Tomar examen

Resumen

Crear rutas y relacionarlas con componentes en Angular es una tarea trivial. Anímate a construir tu primera aplicación con rutas, crea una página de inicio y otra página para listar productos o hablar de ti.

Cómo optimizar rutas en Angular

Veamos algunos consejos para optimizar tus rutas. Ocurrirá en tu aplicación que el usuario no ingrese ninguna ruta. Siempre es buena práctica tener otra por defecto y puedes realizarlo de la siguiente manera:

// app-routing.module.ts
const routes: Routes = [
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  {
    path: 'catalogo',
    component: CatalogoComponent
  },
  {
    path: 'home',
    component: HomeComponent
  }
];

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

Observa la primera regla que tiene el path vacío y un redirectTo para redireccionar al componente "home" cuando no se ingresa ninguna ruta. Utiliza también la opción pathMatch para asegurar que la ruta sea exacta.

Código fuente del proyecto.

Contribución creada por: Kevin Fiorentino.

Neo TRAN

student•

Esta es mi solución al reto, en el componente products.component.ts he agregado una variable que me va a servir como Output con una función que será el que va a emitir el evento

@Output() onLoadMore: EventEmitter<string> = new EventEmitter<string>();

loadMore() {
    this.onLoadMore.emit();
}

Ya desde products.component.html cuando se le de click al button vamos a llamar a la función loadMore()

<button (click)="loadMore()">Load more</button>

Para finalizar desde home.component.html solo tenemos que leer dicho evento y mandar a llamar la lógica para cargar más del home.component.ts

<app-products [products]="products" (onLoadMore)="loadMore()"></app-products>

loadMore(): void {
    this.productsService.getAll(this.limit, this.offset)
      .subscribe(data => {
        this.products = this.products.concat(data.filter(product => product.images.length > 0));
        this.offset += this.limit;
      });
  }

Para finalizar en el servicio de products, no se hace una correcta asignación de los params, entonces si quieren que les funcione correctamente solo deben de cambiar en la función getAll lo siguiente:

let params = new HttpParams();
if (limit != undefined && offset != undefined) {
   params = params.set('limit', limit);
   params = params.set('offset', offset);
}

Jose Pumarejo

student•

Crack..!!

Jorge Luis Vilca Venegas222

student•

Buenisimo Bro!

Configuración de rutas y refactorización de componentes en Angular

Manejo de rutas

Angular Router y Programación Modular en eCommerce

Implementación de Routing en Angular: Creación de Componentes y Páginas