Aplicación completa usando Angular Material

Hace un tiempo hicimos una breve introducción a Angular Material. En ella vimos cómo utilizar el CLI de Angular, generamos una aplicación Angular y, por último, añadimos y probamos algunos componentes de Angular Material.

En esta ocasión vamos a ver cómo es el desarrollo de una aplicación Angular, utilizando Angular Material para el diseño de la interfaz gráfica. Esta aplicación será un libro de notas, las cuales tendrán un título, un contenido, una categoría y las fechas de creación y última actualización. Por otro lado, las categorías tendrán únicamente un nombre.

Para el desarrollo de la aplicación se ha utilizado el editor online Stackblitz, el cual nos ofrece un entorno completamente configurado y nos permite desarrollar desde cualquier dispositivo con un navegador compatible. De igual manera podemos compartir el proyecto de muchas formas distintas, como se puede ver al final de esta entrada.

A partir de aquí se supone que ya tenemos todas las dependencias de Angular Material instaladas y que vamos a hacer uso del CLI de Angular para generar los distintos elementos.

Modelo de datos

Como se ha indicado anteriormente, se trata de una aplicación de notas, perteneciendo cada una a una categoría. Por lo tanto, tendremos dos modelos de datos: Note y Category. De estos modelos se han extraído las propiedades editables por el usuario en dos nuevos modelos NoteFields y CategoryFields, los cuales veremos para qué nos conviene tenerlos a parte.

Servicios

Al igual que en los modelos de datos, contaremos con dos servicios para manejar las notas y las categorías: NotesService y CategoriesService. Dado que no disponemos de un back-end o base de datos, utilizaremos datos simulados (mock data): mock-values.ts.

NotesService y CategoriesService

En ambos servicios implementamos las funciones CRUD (Create, Read, Update, Delete) necesarias.

En los datos simulados se han definido 2 categorías y 3 notas. Además, en caso de no añadir ninguna categoría a las notas, se le asignará la categoría por defecto de Unclassified.

Componentes

En general vamos tenemos varios componentes: HeaderComponent, MenuComponent, NoteContentComponent y NoteFormComponent, CategoryContentComponent y CategoryFormComponent y CategoryDialogComponent.

HeaderComponent

Es el encabezado de la aplicación. Lo vamos a reutilizar en las pantallas de Home y en las de creación y edición de notas y categorías.

MenuComponent

Incluye el contenido del sidenav de la aplicación. Está siempre visible en pantallas de escritorio (con un ancho mayor que 992px) y desplegable en tablet o móvil.

Son dos componentes que van anidados, es decir, NoteFormComponent se incluye en NoteContentComponent. Forman el contenido de las pantallas de creación y edición de notas.

CategoryContentComponent y CategoryFormComponent

Al igual que en el caso de las notas, estos componentes se utilizarán en la pantalla de creación de categorías.

Es un cuadro de diálogo para seleccionar la categoría a la que le queremos que pertenezca la nota que estamos creando o editando.

Páginas

Como hemos podido ver, hay tres páginas: HomeComponent, NoteCreateComponent y NoteEditComponent, y CategoryCreateComponent.

HomeComponent

Aquí se muestran las notas creadas con información relevante, como el título, parte del contenido, la categoría a la que pertenece y la fecha de última actualización. Además, esta es la única página desde la que se puede acceder al menú lateral o sidenav.

NoteCreateComponent y NoteEditComponent

Contienen el formulario de notas.

Para el desarrollo de la aplicación se ha utilizado como base el tema de Angular Material deeppurple-amber, aunque se ha creado un fichero theme.scss para poder acceder a los colores desde cualquier componente de la aplicación.

Para incluir los componentes de Angular Material, se ha creado el fichero material.module.ts, el cual se ha importado en app.module.ts.

El componente que más ha costado customizar ha sido MatSidenav. Ya que ofrece diferentes opciones para mostrar o no el menú lateral o sidenav, así como para posicionarlo donde mejor se considere.

El resultado obtenido ha sido una aplicación completamente funcional, con una intefaz minimalista y llamativa. Además, los componentes de Angular Material proporcionan animaciones y estilos muy uniformes basados en un mismo tema.

A continuación, os dejo un enlace al proyecto de Stackblitz, donde podéis ver todo el código e incluso crear un fork del mismo para continuar editándolo.

Esto ha sido todo por el momento, espero continuar con una nueva entrada más adelante, incluyendo nuevas funcionalidades y probando nuevos componentes de Angular Material.

¡Hasta pronto!