Cómo usar el diseño de materiales en Angular 6

Angular ha evolucionado a lo largo de los años, y con cada lanzamiento se han agregado continuamente nuevas funciones interesantes. Una de las mejoras es el diseño de materiales, que incluye nuevos componentes. Este tutorial analizará el material de Angular y cómo incorporarlo a los proyectos de Angular 6.

¿Qué es el diseño de materiales?

Material Design es un lenguaje de diseño para aplicaciones web y móviles que fue desarrollado por Google en 2014. Material Design permite a los desarrolladores personalizar fácilmente su interfaz de usuario mientras mantiene una interfaz de aplicación atractiva que a los usuarios les gusta. Con Material Design, obtiene un formato bien organizado, así como la flexibilidad para expresar su marca y estilo.

Para ver un ejemplo de Material Design, consulte Houzz, una aplicación de diseño para el hogar que ganó los premios Google Play en 2016. Esta aplicación utiliza Material Design para integrar sus muchas funciones en el espacio limitado de los dispositivos móviles. Esto proporciona una buena experiencia de usuario al permitirles ver y navegar por la aplicación sin sentirse abrumados. Realmente es una de las mejores aplicaciones de diseño de materiales que existen.

Este artículo no trata sobre el diseño de hardware, por lo que no entraremos en todos los detalles. Si quieres saber más, hay un gran tutorial de diseño de materiales en el blog de Envato.

Introducción al material angular

El material angular consta de una serie de componentes angulares preconstruidos. A diferencia de Bootstrap, que le brinda componentes que puede diseñar como desee, Angular Material se esfuerza por brindar una experiencia de usuario mejorada y consistente. Al mismo tiempo, te da la capacidad de controlar el comportamiento de los diferentes componentes.

Al igual que Angular, Angular Material ha evolucionado mucho desde su lanzamiento inicial, con grandes mejoras y correcciones de errores.

Cómo agregar material angular a su proyecto

Para agregar material angular a un proyecto, usaremos el ng add comando que se usa para agregar nueva funcionalidad a proyectos angulares. Este comando es una nueva característica en Angular 6, y es tan simple como:

Este comando agregará la biblioteca a un proyecto existente e introducirá el tema CSS en angular.json. También agregará scripts en index.html y actualizar el AppModule.

Otra característica de Angular 6 es ng update, que actualiza las dependencias de npm cuando se lanza una nueva versión. También actualiza su código RxJS y el código de Material Design para aprovechar las nuevas API.

Dependencias y componentes

El material angular consta de varios componentes de diseño que se clasifican en las siguientes categorías:

  • Controles de formulario
  • Botones e indicadores
  • Navegación y diseño
  • Popups y modales
  • Tabla de datos
En relación :  Las 5 mejores aplicaciones de comparación de precios: cómo encontrar ofertas y ahorrar dinero

Puede generar los componentes de inicio utilizando el ng update orden. Algunos de los esquemas disponibles a través de este comando son:

  • Navegación
  • Salpicadero
  • Mesa

Estos diagramas se pueden instalar fácilmente con el ng generate comando de la siguiente manera:

  • ng generate @angular/material:material-table --name : genera un componente que muestra datos con una tabla de datos
  • ng generate @angular/material:material-nav --name : genera un componente con navegación lateral y una barra de herramientas
  • ng generate @angular/material:material-dashboard --name : genera un componente que contiene una lista de mapas de cuadrícula dinámica.

Crear aplicación de hardware angular 6

Para comenzar, necesitará Angular CLI. Si no ha instalado Angular CLI, simplemente instálelo ejecutando el siguiente comando.

A continuación, necesitaremos inicializar un nuevo proyecto Angular. Para hacer esto, ejecute el siguiente comando, donde Material-ng es el nombre de nuestro proyecto Angular.

Este comando crea varios archivos de plantilla Angular para su proyecto e instala las dependencias de inicio necesarias.

Vaya al directorio de su proyecto y agregue material angular a su proyecto.

A continuación, agregaremos algunos componentes que son comunes a muchas aplicaciones, como la navegación.

Agregar una barra de navegación

Para agregar una barra de navegación, simplemente emita:

Este comando agrega navegación lateral plegable y un componente de cajón. Debería obtener el siguiente resultado, que tiene cuatro archivos generados para nosotros, a saber mon-nav.component.css, my-nav.component.html, my-nav.component.spec.ts, y my-nav.component.ts.

Abierto my-nav.component.html y debería ver todo el HTML para la navegación que se generó para nosotros.

De forma predeterminada, un proyecto angular inicial servirá como página predeterminada, ¡pero queremos poder ver la magia de Material Design! Para utilizar nuestro componente de navegación de Material Design generado, abra app.component.html y reemplace todo el código con:

Ahora, cuando ejecute la aplicación, verá la barra de navegación.

También debe tener en cuenta que el componente de navegación que agregamos se ha importado al módulo principal como se muestra:

Dentro my-nav.component.html, también hagamos algunos cambios en las listas del menú:

Ahora puede iniciar el servidor de desarrollo ejecutando:

El resultado debería verse así:

Diseño angular de la aplicación Material Design

Como puede ver, Angular Material proporciona una manera fácil de poner en funcionamiento su aplicación. ¡Con solo unos pocos comandos y unas pocas líneas de código, pudimos integrar el diseño de material en nuestra aplicación Angular!

Visita nuestro Repositorio de GitHub para el código fuente completo de esta aplicación de muestra.

Conclusión

Espero que este tutorial te haya ayudado a comprender cómo usar el poder de Material Design en tu aplicación para una interfaz de usuario de primer nivel. Para obtener más información sobre el diseño de materiales en Angular 6, consulte el sitio web oficial docs que contienen plantillas listas para usar. Es un gran lugar para aprender más sobre Angular. ¡También puede consultar nuestros tutoriales y cursos de Angular aquí en Envato Tuts +!

Moyens Staff
El personal de Moyens I/O lo ha motivado, brindándole consejos sobre tecnología, desarrollo personal, estilo de vida y estrategias que lo ayudarán.