Una aplicación Angular está compuesta por un conjunto de módulos. Siempre hay un módulo principal, por defecto creado por el angular-cli; este módulo principal importa (en el decorador de @NgModule atributo imports) los módulos funcionales de la aplicación (Feature Modules) y eventualmente otros módulos utilitarios como los de enrutamiento.
Un módulo funcional es un conjunto cohesivo de funcionalidades relacionadas con algún concepto de la aplicación. Cuáles son los módulos funcionales es una decisión de diseño.
En nuestro curso, para tomar esta decisión vamos a partir del modelo conceptual de la aplicación el cuál ha sido la guía para las demás decisiones de diseño. Cada elemento en el modelo representa un concepto del mundo del problema que luego se traduce en una serie de funcionalidades que se deben ofrecer con respecto a ese concepto.
Diagrama conceptual
En el caso de nuestra aplicación ejemplo sobre los libros, llamada Bookly, , tenemos que siguiente modelo conceptual:
Figura 1: Diagrama Conceptual de Bookly
Las funcionalidades que se han identificado para, por ejemplo, el concepto Book son: crear un libro, editar la información de un libro , obtener todos los libros disponibles, filtrar un conjunto de libros, buscar un libro, etc. Todas estas funcionalidades son cohesivas con respecto al concepto de libro.
Entonces, en la aplicación Angular, al menos cada concepto del modelo conceptual será un módulo funcional de la aplicación. Decimos "al menos" porque puede suceder que necesitemos módulos adicionales para manejar relaciones entre conceptos o que no necesitemos un módulo, en el caso de cpcentos dependientes de un concepto padre (por ejemplo, Reviews podría ir dentro del módulo Book).
Diseño Global
Teniendo lo anterior en cuenta, el diseño global de la aplicación Angular para Bookly, está compuesto de tres módulos funcionales: BookModule, AuthorModule y EditorialModule. Note que no hay un módulo para reviews, pensando que ese concepto es totalmente dependiente de book y que las funcionalidades de reviews serán implementadas como componentes del módulo BookModule.
Figura 2: Módulos funcionales de Bookly
Cada módulo funcional agrupa funcionalidades de uno de los conceptos o recursos de la aplicación. Las funcionalidades específicas de un módulo se van a traducir en componentes. De esta forma tenemos que, por ejemplo, el módulo BookModule, tendrá las funcionalidades:
- Listar en la pantalla todos los libros disponibles en la librería
- Desplegar el detalle de un libro
- Crear un libro
- Editar la información del libro
- borrar un libro
- Crear un review para un libro
- Desplegar los reviews de un libro
- Borrar un review de un libro
etc.
Cada funcionalidad, en principio, se implementa como un componente del módulo. Cada módulo comparte con sus componentes al menos dos cosas:
- el modelo: las clases del modelo de datos, esto es, la información del libro y de los reviews,
- el servicio: el servicio que define los métodos para acceder al back y utiliza el HttpClient.
Veamos el diagrama de clases para el módulo BookModule y dos de sus componentes: BookListarComponent y BookDetailComponent.
En la parte izquierda de la figura está el modelo de datos de los libros. Note que la clase Book hace referencia a una clase Editorial (el libro sabe cuál es su editorial) y a Author, el libro sabe quienes son sus autores. Las clases pertenecen, respectivamente, al módulo EditorialModule y AuthorModule.
Los dos componentes tienen asociaciones al modelo Book, el de listar porque debe conocer cuál es la colección de libros que va a desplegar en la página y el de detalle porque debe saber cuál es el libro
También podemos ver que ambos componentes utilizan el servicio BookService.
Figura 3: Componentes módulo BookModule
Componente EditorialListComponent
Componente EditorialListComponent y EditorialDetailComponent
