No tienes acceso a esta clase

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

Creando el CMS Module

13/25
Recursos

Es momento de poner manos a la obra con todo lo aprendido hasta aqu铆. An铆mate a crear una aplicaci贸n con algunos m贸dulos y p谩ginas hijas para explorar c贸mo se desarrolla profesionalmente las aplicaciones con Angular.

Ejercicio para crear un CMS Module

Te recomiendo lo siguiente: si ya tienes una aplicaci贸n, reestruct煤rala de forma modular con todas sus p谩ginas y crea un segundo m贸dulo llamado CMS. Un CMS (Content Management System) no es m谩s que un administrador privado para los usuarios de la aplicaci贸n para que puedan cargar contenido.

Cada m贸dulo puede tener su propio <header>, <footer> o su propio layout adem谩s de las p谩ginas pertinentes al mismo.

T贸mate tu tiempo para analizar y reforzar los conocimientos hasta aqu铆 y continuemos.


Contribuci贸n creada por: Kevin Fiorentino.

Aportes 9

Preguntas 2

Ordenar por:

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

o inicia sesi贸n.

Layout

<div>
  <header>
    <h3>Title</h3>
  </header>
  <nav>
    <ul>
      <li><a routerLink="grid">Grid Page</a></li>
      <li><a routerLink="tasks">Tasks Page</a></li>
    </ul>
  </nav>
  <main>
    <router-outlet></router-outlet>
  </main>
</div>

layout.scss

div {
  display: grid;
  height: 100vh;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
      "header header header"
      "nav content content";
  header {
    grid-area: header;
    background-color: #3E51B5;
    color: white;
    padding: 1em;
    box-shadow: 1px 2px 4px 0 rgb(21 99 157 / 16%);
    border-bottom: 1px solid rgba(21,99,157,0.16);
  }
  nav {
    grid-area: nav;
    border-right: 1px solid rgba(21,99,157,0.16);
    background-color: #fff;
    a {
      margin: 0;
      padding: 0;
      padding: 1em;
      cursor: pointer;
      position: relative;
      display: block;
      text-decoration: none;
      color: #000;
    }
  }
  main {
    grid-area: content;
    background-color: #f3f8fb;
    padding: 1em;
  }
}```

Creando el m贸dulo CMS y los componentes

ng g m cms --routing
ng g c cms/pages/tasks
ng g c cms/pages/grid
ng g c cms/components/layout

Estilos del layout

div {
  display: grid;
  height: 100vh;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
      "header header header"
      "nav content content";
  header {
    grid-area: header;
    background-color: #3E51B5;
    color: white;
    padding: 1em;
    box-shadow: 1px 2px 4px 0 rgb(21 99 157 / 16%);
    border-bottom: 1px solid rgba(21,99,157,0.16);
  }
  nav {
    grid-area: nav;
    border-right: 1px solid rgba(21,99,157,0.16);
    background-color: #fff;
    a {
      margin: 0;
      padding: 0;
      padding: 1em;
      cursor: pointer;
      position: relative;
      display: block;
      text-decoration: none;
      color: #000;
    }
  }
  main {
    grid-area: content;
    background-color: #f3f8fb;
    padding: 1em;
  }
}

Al tratarse de dos m贸dulos que crecer谩n mucho en el tiempo, el Website y el CMS, y que cada uno tiene diferentes prop贸sitos, uno para administradores y otro para usuarios normales. Personalmente recomiendo en un proyecto real separar ambos m贸dulos en dos proyectos distintos. La p谩gina web, por un lado, y otro repositorio para el Backoffice.

Me gusto la clase, de esta forma puedo manejar mejor mis rutas 馃捇.

Me sirvio para entender mejor: el router-outlet de app.component.html, puede renderizar 3 posibles contenidos

  1. el layoutComponent
  2. el modulo del cms
  3. el componente not-found.
    a su vez el router-outlet del layout.html puede renderizar los contenidos que se encuentran en el children del app-routing.module.

para entenderlo mejor, se pueden fijar en el navbar, este solo va a salir en los componentes o contendios renderizados por el layout, es decir las rutas hijas del LayuoutComponent que estan en app-routing.module, por tal motivo al obtener el componente not-found, ya no tenemos navbar, ya que este componente (el not-found) no esta dentro de las rutas hijas del LayoutComponent. exelente clase, me despejo muchas dudas aun despues de haber trabajado un a帽o en angular.

Para generaciones flojas del fututo aqu铆 tenemos esto jaja

ng g m cms --routing && ng g c cms/pages/tasks && ng g c cms/pages/grid && ng g c cms/components/layout

Aqui los comandos

$ ng g m cms --routing
$ ng g c cms/pages/tasks
$ ng g c cms/pages/grid
$ ng g c cms/components/layout

Me est谩 saliendo este error

Error: src/app/cms/components/layout/layout.component.html:12:5 - error NG8001: 鈥榬outer-outlet鈥 is not a known element:

  1. If 鈥榬outer-outlet鈥 is an Angular component, then verify that it is part of this module.
  2. If 鈥榬outer-outlet鈥 is a Web Component then add 鈥楥USTOM_ELEMENTS_SCHEMA鈥 to the 鈥楡NgModule.schemas鈥 of this component to suppress this message.