Tribalyte Technologies Tribalyte Technologies
  • Inicio
  • Misión y visión
  • Nuestros expertos
  • Nuestras soluciones
  • Casos de éxito
  • Blog
  • Contáctanos
  • Únete al equipo
Tribalyte Technologies Tribalyte Technologies
  • Inicio
  • Misión y visión
  • Nuestros expertos
  • Nuestras soluciones
  • Casos de éxito
  • Blog
  • Contáctanos
  • Únete al equipo
Feb 27

Aplicación completa usando Angular Material

  • febrero 27, 2020
  • José Carlos Fatjó
  • No Comments
  • Consejos tecnológicos, Desarrollo de aplicaciones, Desarrollo de software

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.

image5

image2
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.

Index

  • 1 Modelo de datos
  • 2 Servicios
      • 2.0.1 NotesService y CategoriesService
      • 2.0.2 Datos simulados (Mock data)
  • 3 Components
      • 3.0.1 HeaderComponent
      • 3.0.2 MenuComponent
      • 3.0.3 NoteContentComponent y NoteFormComponent
      • 3.0.4 CategoryContentComponent y CategoryFormComponent
      • 3.0.5 CategoryDialogComponent
  • 4 Páginas
      • 4.0.1 HomeComponent
      • 4.0.2 NoteCreateComponent y NoteEditComponent
      • 4.0.3 CategoryCreateComponent
  • 5 Desarrollo

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.

image14

 

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.

image3

Datos simulados (Mock data)

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.

Components

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.

image10

NoteContentComponent y NoteFormComponent

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.

image12

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.

image13

CategoryDialogComponent

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.

image16

image4

 

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.

image5

image6

NoteCreateComponent y NoteEditComponent

Contienen el formulario de notas.

image15

CategoryCreateComponent

Incluye el formulario de categorías.

image1

Desarrollo

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.

image9

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

image11

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.

image7


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!

Artículos Relacionados:

  • youmedic videos medicina operaciones cirugíaLanzamiento Youmedic
  • imagen 1Introducción a Vaadin Flow
  • 1Menores y tecnología
  • ¿Qué es Errai?¿Qué es Errai?
  • carbon (4)Por qué Elixir importa y cómo puede mejorar tu código en el Backend
  • Facebook
  • Twitter
  • LinkedIn
  • E-Mail

About The Author

Soy Ingeniero Informático de la UPM, experto en el desarrollo de software a medida y de aplicaciones web, móviles y nativas. Tengo conocimientos full-stack, pero lo que más me apasiona es la parte front-end.

Leave a reply Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

ELIGE UNA CATEGORÍA

  • Blockchain
  • Consejos tecnológicos
  • Desarrollo de aplicaciones
  • Desarrollo de software
  • General
  • Sistema embebido
  • Tecnologías
  • Uncategorized

Una compañía dedicada al desarrollo de apps, software y soluciones embebidas para empresas.

SOCIOS

Contacto

Glorieta de Quevedo 8 6º2
28015 Madrid (ESPAÑA)
Phone: +34 919 049 820 E-Mail: contact@tribalyte.com Web: www.tribalyte.com
Sello PYME INNOVADORA 21/01/2025
PYME INNOVADORA
Válido hasta el 21 de enero de 2025
escudo de MEIC 21/01/2025

AYUDA

  • Política de privacidad
  • Política de calidad
  • Política de seguridad
  • Términos de uso

CERTIFICACIONES

⠀⠀⠀⠀⠀⠀⠀⠀⠀

SUBVENCIONES

Tribalyte Technologies S.L. ha    conseguido la ayuda C007/20-ED de Red.es para el impulso y la promoción de actividades de I+i y para el fomento de la inversión empresarial para desarrollar el proyecto iPatia. Así mismo, valoramos muy positivamente la contribución del FEDER, principal fondo de la política de cohesión europea, por lo que supone de impulso a nuestro trabajo y en consecuencia al crecimiento económico y la creación de empleo de esta región y de España en su conjunto.
Esta página web utiliza cookies para mejorar su experiencia de usuario y para recabar estadísticas anónimas de uso. Aceptar Más información