No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Vistas anidadas

12/25
Recursos

Trabajar con Angular en una aplicaci贸n modularizada da la posibilidad de que, cada m贸dulo, tenga a su vez N cantidad de p谩ginas hijas. Veamos c贸mo es posible estructurar un proyecto para este prop贸sito.

Proceso para modularizar una aplicaci贸n

El CLI de Angular te ayudar谩 a crear r谩pidamente un nuevo m贸dulo. Para esto, utiliza el comando ng generate module <module-name> --routing, o en su forma corta ng g m <module-name> --routing.

Presta atenci贸n al flag --routing que le indica a Angular que tiene que crear, adem谩s del m贸dulo, el archivo base para agregarle rutas a este nuevo m贸dulo.

1. Crear m贸dulos necesarios

Comienza creando algunos m贸dulos para tu aplicaci贸n. Por ejemplo, separaremos la app en un m贸dulo para todo el sitio p煤blico y otro para el administrador.

  • ng generate module modules/website --routing
  • ng generate module modules/cms --routing

2. Preparaci贸n del routing

A continuaci贸n, prepara tu app-routing.module.ts para Lazy Loading y CodeSplitting importando los m贸dulos de la siguiente manera:

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

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./modules/website/website.module').then(m => m.WebsiteModule)
  },
  {
    path: 'cms',
    loadChildren: () => import('./modules/cms/cms.module').then(m => m.CmsModule)
  },
  {
    path: '**',
    component: NotFoundComponent
  }
];

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

Observa que, a excepci贸n del m贸dulo 404, solo estamos importando los m贸dulos de una manera especial. Con loadChildren, cada m贸dulo ser谩 enviado bajo demanda, ya que ahora se cargan de manera as铆ncrona.

3. Renderizar m贸dulos

El componente principal de tu aplicaci贸n ser谩 el encargado de renderizar cada m贸dulo. Para esto, aseg煤rate de que solo posea el <router-outlet>, porque es todo lo que necesitas para lograrlo.

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>',
  styleUrls: ['./app.component.scss']
})
export class AppComponent { }

Incluso puedes borrar el archivo app.components.html y colocar el <router-outlet> dentro de la propiedad template en el decorador @Component() para simplificar tu c贸digo.

4. Componentes base

Cada uno de t煤 m贸dulos, tambi茅n deber谩 tener un componente base al cual denominaremos Layout.

  • ng g c modules/website/layout
  • ng g c modules/cms/layout

Para el caso del layout del m贸dulo website, agr茅gale su propio <router-outlet> adem谩s del componente para la barra de navegaci贸n.

<!-- modules/website/layout/layout.component.html -->
<app-nav-bar></app-nav-bar>
<router-outlet></router-outlet>

Mientras que el layout del m贸dulo CMS, solo necesitar谩 del <router-outlet>, ya que, de momento, no posee <header> o <footer> exclusivo.

<!-- modules/cms/layout/layout.component.html -->
<router-outlet></router-outlet>

5. Routing de cada m贸dulo

Finalmente, cada <router-outlet> de cada m贸dulo renderizar谩 los componentes que posea dichos m贸dulos. Para esto, prepara el routing de cada m贸dulo de la siguiente manera.

// modules/website/website-routing.module.ts
const routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      {
        path: '',
        redirectTo: '/home',
        pathMatch: 'full'
      },
      {
        path: 'home',
        component: HomeComponent
      },
      {
        path: 'about',
        component: AboutComponent
      },
      {
        path: 'catalogo',
        component: CatalogoComponent
      },
      {
        path: 'catalogo/:categoryId',
        component: CatalogoComponent
      },
    ]
  }
];

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

Presta atenci贸n a la propiedad children que construye las nuevas reglas para las rutas.

De esta manera, puedes tener un <router-outlet> dentro de otro <router-outlet> para renderizar p谩ginas hijas de cada m贸dulo y tener un layout personalizado por nada uno de ellos. Adem谩s de estar optimizado el rendimiento de tu aplicaci贸n gracias al Lazy Loading y CodeSplitting.


Contribuci贸n creada por: Kevin Fiorentino.

Aportes 6

Preguntas 4

Ordenar por:

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

o inicia sesi贸n.

Al principio puede ser un poco complicado hacer los cambios o confuso.
Pero creeanme, si hicieron los dos cursos anteriores a este, sera mucho mas facil entender todo esto que hizo el profe.
Les recominedo estas notas que me ayudaron a comprender estos cursos:
https://medium.com/notasdeangular

En s铆ntesis, un <router-outlet> puede tener dentro otro <router-outlet> para renderizar componentes hijos y de esta manera personalizar el <header> o <footer> de nuestra aplicaci贸n.
Esto se hizo as铆 porque en la pr贸xima clase se crear谩 un m贸dulo CMS desde donde los usuarios administradores puedes cargar productos, categor铆as, etc.
El Website p煤blico y el CMS privado, son los dos m贸dulos de la aplicaci贸n, cada uno tiene un <header> distinto y es necesario esta reestructuraci贸n.

para organizaci贸n e carpetas recomiendo este video https://www.youtube.com/watch?v=ugn6fM5Rc-E

  • Se crea un nuevo directorio que va a albergar el m贸dulo con sus componentes, servicios, pipes y directivas.

  • Se actualiza el router. En este caso se define una ruta asociada al componente principal del m贸dulo, as铆 como una serie de rutas hijas.

    ...
    const routes: Routes = [
      {
        path: '',
        component: LayoutComponent,
        children: [
          {
            path: '',
            redirectTo: 'home',
            pathMatch: 'full'
          },
          {
            path: 'home',
            component: HomeComponent
          },
          {
            path: 'category/:id',
            component: CategoryComponent
          },
          {
            path: 'product/:id',
            component: ProductDetailComponent
          },
          {
            path: 'cart',
            component: CartComponent
          },
          {
            path: 'login',
            component: LoginComponent
          },
          {
            path: 'register',
            component: RegisterComponent
          },
          {
            path: 'password-recovery',
            component: RecoveryComponent
          },
          {
            path: 'profile',
            component: ProfileComponent
          }
        ]
      },
      {
        path: '**',
        component: NotFoundComponent
      }
    ];
    
  • El componente LayoutComponent va a contener la estructura del website manteniendo siempre la navegaci贸n y modificando lo que se renderiza en el <router-outlet> seg煤n la ruta en la que este.

    <app-nav></app-nav>
    <router-outlet></router-outlet>
    
  • De esta forma se pueden crear vistas anidadas que rendericen componentes diferentes. Por ejemplo se podr铆a tener por un lado el website con sus vitas y aparte otro m贸dulo dedicado al panel de administraci贸n con componentes y servicios diferentes a los del website

Me demore un poco, pero lo logr茅. Continuemos 鈥

$ ng g c website/components/layout