Creando rutas

2/25
Recursos
Transcripción

Todas las aplicaciones front-end van a necesitar de múltiples páginas, las cuales serán identificadas por una ruta. Veamos cómo puedes relacionar rutas y componentes en Angular.

Rutas y Componentes

Puedes enlazar componentes a las rutas para cuando ingreses a X ruta, se muestre Y componente.

1. Creando componentes

Comienza creando un par de componentes de prueba. Apóyate del CLI de Angular de la siguiente manera:

  • ng g c components/about
  • ng g c components/catalogo

2. Creando el routing

Al utilizar el comando ng new <project-name> Angular nos pregunta lo siguiente:

Would you like to add Angular routing? (y/N)

Si contestamos que sí, creará el siguiente archivo junto con el módulo principal de tu app.

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [];

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

Si contestaste que no, no te preocupes. Puedes crearlo manualmente e importarlo en el archivo app.module.ts

// app.module.ts
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  // ..
  imports: [
    AppRoutingModule
  ],
})
export class AppModule { }

3. Imports de componentes en el routing

A continuación, importa en este nuevo archivo los componentes, y crea una regla para crear una ruta para cada uno de ellos de la siguiente manera:

// app-routing.module.ts
import { AboutComponent } from './components/about/about.component';
import { CatalogoComponent } from './components/catalogo/catalogo.component';

const routes: Routes = [
  {
    path: 'about',
    component: AboutComponent
  },
  {
    path: 'catalogo',
    component: CatalogoComponent
  }
];

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

4. Directiva para el renderizado de páginas

Finalmente, tienes que importar la directiva <router-outlet> en el componente raíz de tu aplicación.

<!-- app.component.html -->
<router-outlet></router-outlet>

Angular utiliza esta directiva para renderizar el componente de la ruta actual donde el usuario se encuentre.

Ingresa a localhost:4200/catalogo o localhost:4200/about, para observar cada componente.


Contribución creada por: Kevin Fiorentino.

Aportes 15

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Hola! dejo el copy de los componentes a crear

ng g c pages/home
ng g c pages/notFound
ng g c pages/category
ng g c pages/mycart
ng g c pages/login
ng g c pages/register
ng g c pages/recovery
ng g c pages/profile

Por si depronto alguien quiere ejecutar y crear todos los componentes en un solo comando, aqui lo dejo

ng g c pages/home && ng g c pages/notFound && ng g c pages/category && ng g c pages/mycart && ng g c pages/login && ng g c pages/register && ng g c pages/recovery && ng g c pages/profile

Les recuerdo que pueden tener conflictos a la hora de pasar su proyecto de Angular si tienen la versión global de 13, Angular tienen información oficial de como pasar la versión de un proyecto a otra en este enlace

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './pages/home/home.component';
import { NotFoundComponent } from './pages/not-found/not-found.component';
import { CategoryComponent } from './pages/category/category.component';
import { MycartComponent } from './pages/mycart/mycart.component';
import { LoginComponent } from './pages/login/login.component';
import { RegisterComponent } from './pages/register/register.component';
import { RecoveryComponent } from './pages/recovery/recovery.component';

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
  },
  {
    path: 'category',
    component: CategoryComponent,
  },
  {
    path: 'mycart',
    component: MycartComponent,
  },
  {
    path: 'login',
    component: LoginComponent,
  },
  {
    path: 'register',
    component: RegisterComponent,
  },
  {
    path: 'recovery',
    component: RecoveryComponent,
  },
  {
    path: '**',
    component: NotFoundComponent,
  },
];

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

Por si les ocurre esto,

¡El proyecto no esta paginando los productos!

Cuando pasamos el offset en 0, el if lo toma como false por lo tanto no adjunta los params en la petición.

// SOLUCIÓN en products.service.ts, 
// colocar offset con un valor por defecto y modificar el if.
getAll(limit?: number, offset: number = 0) {
    let params = new HttpParams();
    if (limit) {
      params = params.set('limit', limit);
      params = params.set('offset', offset);
    }
    // ...
}

iba en la clase 19 y volví a esta porque con tanto tema se me olvidaba como era que funcionaba bien el router-outlet. Recomiendo mucho llevar apuntes escritos para este curso ❤️

Hola a todos por q no puedo hacer el ng g c pages/home, por favor ayudenme

Si recibes este problema para el linter en algunos archivos:

parsing error: Cannot read file ‘tsconfig.json’

Eso es porque el linter no puede encontrar este tsconfig.json

Haz esto dentro del fichero .eslintrc.json:

    "project": [
      "tsconfig.json"
    ],
cambia esa línea por la siguiente
    "project": [
      "**/tsconfig.json"
    ],

con el path: path: ‘**’,
hacen que cualquir ruta que no exista renderiza el componente NotFoundComponent

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'category',
    component: CategoryComponent
  },
  {
    path: 'my-cart',
    component: MycartComponent
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'register',
    component: RegisterComponent
  },
  {
    path: 'recovery',
    component: RecoveryComponent
  },
  {
    path: 'profile',
    component: ProfileComponent
  },
  {
    path: '**',
    component: NotFoundComponent
  },
];

Buenas noches,

Comparto reglas:

const routes: Routes = [
  // reglas
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'category',
    component: CategoryComponent
  },
  {
    path: 'cart',
    component: MycartComponent
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'register',
    component: RegisterComponent
  },
  {
    path: 'recovery',
    component: RecoveryComponent
  },
  {
    path: 'profile',
    component: ProfileComponent
  },
  {
    path: 'notFound',
    component: NotFoundComponent
  }
];

Hola, para correr la generación de las paginas en un solo comando lo hacer de la siguiente manera:

ng g c pages/home;
ng g c pages/notFound;
ng g c pages/category;
ng g c pages/mycart;
ng g c pages/login;
ng g c pages/register;
ng g c pages/recovery;
ng g c pages/profile;

Así ejecuta un comando tras de otro

Para crear una ruta, se deben seguir los siguientes pasos: Generar las páginas en la carpeta pages utilizando el siguiente comando en PowerShell: powershell Copy code # Generamos las páginas en la carpeta pages ng g c pages/home En el archivo app.component.html, se debe agregar el router-outlet, que es el componente que nos permitirá manejar las rutas en el proyecto: html Copy code <router-outlet></router-outlet> Las páginas generadas se almacenarán en app.module.ts. A partir de ahí, podemos copiar la ruta desde

Para crear las pages una a una

ng g c pages/home && ng g c pages/notFound && ng g c pages/category && ng g c pages/mycart && ng g c pages/login && ng g c pages/register && ng g c pages/recovery && ng g c pages/profile

Hola les dejo el script de creacion de componentes en una sola linea

ng g c pages/home && ng g c pages/notFound  && ng g c pages/category  && ng g c pages/mycart  && ng g c pages/login  && ng g c pages/register  && ng g c pages/recovery  && ng g c pages/profile

Por si alguien quiere crear todos los componentes con un solo comando solo copien el siguiente.

ng g c pages/home && ng g c pages/notFound && ng g c pages/category && ng g c pages/mycart && ng g c pages/login && ng g c pages/register && ng g c pages/recovery && ng g c pages/profile && clear && echo "Tus componentes fueron creados!!"