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
Manejo de rutas
Qué aprenderás sobre Angular Router y programación modular
Creando rutas
Creando el Home
Página de categorías
Evitando doble subscribe
RouterLink y RouterActive
Ruta 404
Detalle de cada producto
Parametros URL
Módulos
LazyLoading y CodeSplitting
Programación Modular
Vistas anidadas
Creando el CMS Module
Creando en Website Module
Creando un Shared Module
Precarga de módulos
Precarga de módulos
All Modules y Custom Strategy
QuickLink Strategy
Guardianes
Conoce a los Guardianes
Implementando redirects
Estado de login
Guard para Admin
CanDeactivate
Deployment
Netlify Deployment
Despedida
Despedida
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.
Puedes enlazar componentes a las rutas para cuando ingreses a X ruta, se muestre Y componente.
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
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 { }
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 { }
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
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,
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!!"
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?