Creando rutas

2/25
Recursos

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 17

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

Hola! la Fake API de este curso es: https://damp-spire-59848.herokuapp.com/docs 馃槑

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

Chicos valioso aporte鈥
Recuerden que la nueva API para seguir el curso es:

https://damp-spire-59848.herokuapp.com/docs 

& tenemos una alterna muy buena tambi茅n en caso de que no te sirve la otra:

https://api.escuelajs.co/docs/

#Nuncaparesdeaprender

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 鈥榯sconfig.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!!"