Bien. Ahora que ya sabemos como crear módulos y, dentro de esto, los componentes que necesitemos, vamos a emplear ese conocimiento para crear las distintas vistas de nuestra SPA con Angular.

Lo que haremos será crear varios componentes, colocados en distintos módulos y, dentro del módulo CommonsModule crearemos una barra de navegación para pasar de uno a otro, así como otros elementos comunes. Si bien en este artículo la barra de navegación no estará operativa aún (los enlaces no funcionarán), nos permitirá empezar a ver enrutamientos a partir del próximo artículo.

Por lo tanto, aquí vamos a crear los módulos y componentes que necesitaremos, y luego aprenderemos a hacerlos accesibles. Vamos a ello.

EL ESCENARIO

Vamos a pensar en una aplicación para gestión una pequeña empresa, donde tendremos, aparte de la página principal, las secciones de cientes, proveedores, almacén y facturación. Cada una de estas secciones, que serán módulos, tendrá sus propios componentes, que generarán las oportunas vistas.

Así pues, lo primero que haremos será crear los cuatro modulos. Para crear el módulo de clientes (lo llamaremos customers) teclearemos:

ng g m customers --routing true

y la consola nos responde con:

create src/app/customers/customers-routing.module.ts (252 bytes)
create src/app/customers/customers.module.ts (291 bytes)

Para crear el módulo de proveedores (lo llamaremos suppliers) teclearemos:

ng g m suppliers --routing true

y la consola nos responde con:

create src/app/suppliers/supliers-routing.module.ts (251 bytes)
create src/app/suppliers/supliers.module.ts (287 bytes)

Para crear el módulo de almacén (lo llamaremos storing) teclearemos:

ng g m storing --routing true

y la consola nos responde con:

create src/app/storing/storing-routing.module.ts (251 bytes)
create src/app/storing/storing.module.ts (287 bytes)

Para crear el módulo de facturación (lo llamaremos billings) teclearemos:

ng g m billings --routing true

y la consola nos responde con:

create src/app/billings/billings-routing.module.ts (251 bytes)
create src/app/billings/billings.module.ts (287 bytes)

LOS COMPONENTES DE LOS MÓDULOS

Dentro del módulo CustomersModule crearemos dos componentes. El primero, para ver la lista de clientes, y el segundo para ver los datos de un cliente:

ng g c customers/customersList --export
ng g c customers/customerData --export

Dentro del módulo SuppliersModule crearemos otros dos módulos. Uno para listar los proveedores y otro para hacer un pedido a un proveedor.

ng g c suppliers/suppliersList --export
ng g c suppliers/supplierRequest --export

Dentro del módulo StoringModule crearemos tres módulos. Uno para listar los artículos que tenemos en el almacén, otro para quitar artículos (por ejemplo, si se venden) y otro para meter artículos (por ejemplo, si nos llega un pedido de un proveedor).

ng g c storing/storingList --export
ng g c storing/storingIncoming --export
ng g c storing/storingOutgoing --export

Por último, en el módulo BillingModule crearemos dos módulos. Uno nos servirá para listar las facturas de los proveedores y otro para listar las facturas emitidas a nuestros clientes.

ng g c billing/FromSuppliers --export
ng g c billing/ToCustomers --export

Observa, en las respuestas que te salen en la terminal cuando tecleas cada comando, que Angular se da cuenta de la letra mayúscula que hay en los nombres para indicar que es un nombre formado por dos palabras, y separa ambas palabras, al crear los elementos, con un guión. Por ejemplo, cuando tecleamos ng g c customers/customersList la respuesta de la terminal es:

create src/app/customers/customers-list/customers-list.component.html (33 bytes)
create src/app/customers/customers-list/customers-list.component.spec.ts (678 bytes)
create src/app/customers/customers-list/customers-list.component.ts (300 bytes)
create src/app/customers/customers-list/customers-list.component.css (0 bytes)
update src/app/customers/customers.module.ts (397 bytes)

Este es el comportamiento normal de Angular, y debemos acostumbrarnos a él. Ya hemos hablado de ello en este artículo, pero no está de más recordarlo.

NOTA. Por supuesto, esta estructura de componentes no se ciñe a lo que sería una aplicación real de gestión, donde deberíamos preveer muchas más operaciones, y crear más componentes. Además, algunos de ellos deberían ser exportables, para poder pasarse o recibir datos entre distintos elementos, pero otros tal vez no. Esto es sólo un ejemplo muy simple. Ya crearemos una aplicación más completa y útil más adelante. El objetivo de esta estructura es meramente didáctico.

EN EL MÓDULO CommonsModule

En el módulo CommonsModule, que tenemos creado del artículo anterior, vamos a crear otros dos componentes: la barra de navegación, para saltar de una vista a otra, y una página de tipo 404 para el caso de que un usuario intente acceder a una vista que no exista en la aplicación.

LA VISTA 404

Empezaremos por aquí, porque es la parte más simple. En la terminal tecleamos lo siguiente:

ng g c commons/notfound

Se nos crea, dentro de src/app/commons/ un directorio llamado notfound con los cuatro archivos típicos: el .ts, el .html, el .spec.ts y el .css. Vamos a editar la vista (notfound.component.html), dejándolo así:

La vista de error 404, cómo ves, es muy simple. Sólo será un aviso, que programaremos si alguien intenta acceder a una vista que no existe.

LA BARRA DE NAVEGACIÓN

La barra de navegación, al igual que la cabecera del sitio, es un componente que debe estar disponible desde todas las vistas. Por lo tanto, lo crearemos en CommonsModule y lo haremos exportable, así:

ng g c commons/navbar --export

En el fichero de la vista de NavbarComponent (navbar.component.html) vamos a adaptar una barra de navegación de Bootstrap. El fichero nos queda así:

Como ves los enlaces aún no van a ninguna parte, y ni siquiera hemos previsto enlaces para todos los componentes. Ya lo iremos completando para ir aprendiendo lo que hacemos. De momento, la dejamos así.

INCORPORAR LA BARRA DE NAVEGACIÓN A LA VISTA DE INICIO

Bueno. Esto es fácil. Sólo tenemos que ir a la vista principal que es, como sabemos, app.component.html, y añadir una etiqueta que coincida con el selector de la lógica de la barra de navegación. Si abres navbar.component.ts encontrarás, en el decorador, la propiedad selector, así:

Por lo tanto, modificamos el app.component.html, así:

Observa la línea resaltada, donde se incluye, encima de la cabecera, la barra de navegación. Ten en cuenta una cosa. Al igual que la cabecera, la barra de navegación está en un módulo diferente. El AppComponent está en AppModule y la barra de navegación y la cabecera están en CommonsModule. Sin embargo, si recuerdas el artículo anterior, en app.module.ts importamos CommonsModule. Por lo tanto, todos los componentes de CommonsModule que sean exportables están disponibles en AppModule. En este ejemplo, en AppModule podemos acceder a HeaderComponent y a NavbarComponent, pero no, por ejemplo, a NotfoundComponent, ya que este no le hemos definido como exportable.

Soy consciente de que, al principio, es un poco embrollado ese tema de lo que es visible desde otro módulo y lo que no, de lo que se exporta y lo que no, de importar un módulo desde otro… Creeme, todos hemos pasado por esto. Sin embargo, si dedicas el esfuezo y tiempo necesario verás el esquema claramente, y entenderás la lógica.

LA PÁGINA DE INICIO

Vamos a crear, dentro del módulo commons, un componente que usaremos como página de inicio de la aplicación, así:

ng g c commons/home --export

En la vista (home.component.html) incluiremos el siguiente código:

Como ves, sólo sirve para que se vea que estamos en la página de inicio. Lo demás lo haremos con las demas vistas de los otros módulos, para que siempre se vea donde estamos. De hecho (quédate con esto en mente) la única vista que no muestra nada es app.component.html, es decir, la de AppComponent, que sólo la usaremos como estructura para integrar la barra de navegación y la cabecera, como ya tenemos.

CONCLUYENDO

Ahora mismo ya tenemos varios módulos creados, cada uno con varios componentes, y también algunos componentes más en CommonsModule. Si pones en marcha el servidor, verás que tu aplicación tiene ahora un aspecto similar al siguiente:

Como ves, aparte de la cabecera y la barra, no hay nada más en la vista de AppComponent, que es la que se carga por defecto. Los enlaces aún no funcionan, y no puedes acceder a las vistas de los componentes que hemos creado. Para eso, todavía tenemos que crear el sistema de enrutamiento. Poco a poco. No se hizo Roma en un día. Nos vemos en el siguiente artículo. La aplicación, en su estado actual, la tienes en este enlace.