En este artículo vamos a hacer una review de un proyecto que sin duda resultará muy atractivo para todos los desarrolladores de AngularJS. Se trata de Angular Material, un módulo para AngularJS que nos permite implementar diseños basados en Material Design.

Básicamente lo que nos ofrece no es solo una hoja de estilos, capaz de aplicar la apariencia definida en Material Design, sino toda una serie de componentes que enriquecerán mucho el catálogo de interfaces de usuario disponibles al implementar una web.

Para quien ya viene trabajando desde hace tiempo con AngularJS, podemos hacer un paralelismo con otra librería interesante, llamada AngularUI, que nos ofrece una cantidad enorme de componentes como selectores de fecha, regillas, deslizadores, etc. En este caso Angular Material sería un competidor. Podríamos usarlos juntos, pero cada uno tiene una base de CSS y un look & feel diferente, por lo que quizás no sea tan buena idea.

Angular Material está realizado por Google y puedes acceder al sitio web en la URL: https://material.angularjs.org

Te recomendamos echar un vistazo a los demos, donde encontrarás selectores de fecha, cajas de diálogo, regillas, tarjetas, botones, iconos, barras de tareas, etc.

Angular Material es una excelente opción para programadores, que no tienen habitualmente habilidades de diseño. Usando las directivas que nos ofrece podremos producir aplicaciones que son estéticamente brillantes, junto con una serie de componentes adicionales al propio HTML con un look & feel muy trabajado.Los podremos producir prácticamente sin necesidad de escribir nada de CSS, consiguiendo diseños muy atractivos, aprovechando, pero sin necesidad de dominar, características modernas de CSS como por ejemplo Flexbox.

El único "pero" podríamos decir que es que las aplicaciones se pueden parecer unas a las otras. Para una "home page" de una empresa quizás no es la mejor opción, porque generalmente se deseará una estética diferenciada, pero en el caso de aplicaciones de gestión y aplicaciones web en general es algo interesante, porque nos asegura que los usuarios se sentirán familiarizados con la aplicación. Además, las opciones de personalización también dependerán de nosotros y de cómo queramos modificar el diseño y crear nuestras propias interfaces y componentes, puesto que usar Material Design no implica que estemos restringidos a las directivas que nos dan ya listas.

Qué es Material Design

Material Design es un conjunto de especificaciones sobre un estilo de diseño muy popular. Si tienes un teléfono Android, o accedes a servicios de Google como G+, Inbox, etc. ya sabrás lo que es, aunque quizás no le has dado todavía nombre.

Básicamente lo que nos dicen es cómo podemos diseñar interfaces de usuario, cuáles son las cosas que se deben y no se deben hacer, qué tipos de componentes de interfaces se pueden usar, etc. Como en este artículo no discutimos Material Design os dejamos simplemente un enlace para que consultéis las propias guías de Google de Material Design.

Comenzar con Angular Material

Cuando queremos implementar Material Design en una aplicación AngularJS debemos empezar por descargar los paquetes necesarios para funcionar. Esto lo haremos con nuestro gestor de paquetes de preferencia, ya sea Bower, npm o jspm. Para instalar la última versión estable ejecutaremos los comandos:

Bower:

bower install angular-material

npm:

npm install angular-material

jspm:

jspm install angular-material

A continuación debemos incluir el código de Angular Material en nuestro proyecto, para lo que realizarás los pasos:

1. Instalación del CSS

Observarás que en los archivos que se descargan hay un código CSS llamado angular-material.css. Ese lo tienes que incluir en la cabecera de tu página, con la correspondiente etiqueta:



<link rel="stylesheet" href="/ruta_a/angular-material/angular-material.css">




Nota: Ojo, que la ruta al archivo dependerá de qué gestor de dependencias estés usando en tu proyecto.



2. Instalación de los scripts Javascript

Angular Material se instala mediante un script llamado angular-material.js, pero antes debemos de instalar también sus dependencias, que son dos módulos de AngularJS que deben ser incluidos también como scripts aparte. Quizás los conozcas ya, son "angular-aria" y "angular-animate", el primero se ocupa de temas de accesibilidad y el segundo se usa para conseguir efectos de animación.

Si estás trabajando a la vieja usanza, colocando las etiquetas SCRIPT para incluir los js necesarios para tu aplicación, tendrás que incluirlos después de incluir el propio script de AngularJS.



<script src="/ruta_a/angular/angular.js"></script> 
<script src="/ruta_a/angular-aria/angular-aria.js"></script> 
<script src="/ruta_a/angular-animate/angular-animate.js"></script> 
<script src="/ruta_a/angular-material/angular-material.js"></script>




Nota: De nuevo, las rutas dependerán de si lo has instalado con Bower, npm o jspm.



3. Declarar las dependencias en el inicio de tu aplicación

El último paso sería indicar en tu aplicación, cuando estás generando tu módulo principal, que vas a usar Angular Material. Seguramente estés familiarizado también con este paso:



angular.module( 'YourApp', [ 'ngMaterial' ] )



Como puedes observar, de las dependencias de Angular Material no te tienes que preocupar, puesto que el módulo ngMaterial ya se encarga de incluirlas, simplemente te tienes que asegurar que los archivos js con el código estén disponibles.

Usar Angular Material

Una vez cargado el CSS y el Javascript necesario para usar Angular Material tenemos a nuestra disposición una serie enorme de elementos para producir de una manera cómoda diseños basados en Material Design.

Ahora se trata simplemente de estudiar la documentación y revisar todas y cada una de las utilidades que nos ofrece, componentes, clases, y directivas en general. El lenguaje de etiquetas HTML nuevas que implementan (lo que llamamos componentes), atributos que se pueden aplicar a etiquetas existentes y sus valores es muy rico y quizás cuando estamos empezando pueda resultar un poco farragoso, pero poco a poco es factible familiarizarse con todos estos elementos e incorporarlos a los proyectos.

En la propia página de Material Design se ofrecen generalmente demos de uso de los componentes, donde podemos ver el código para implementarlos. Esas implementaciones sugeridas las podemos alterar y personalizar, agregando nuevos elementos. Generalmente es una buena opción copiar el código de un componente y personalizarlo ya para nuestro caso.

Por ejemplo, un botón se consigue:

<md-button>Texto</md-button>

Pero también podría venir con un icono:

<md-button class="md-fab md-primary" aria-label="Use Android">
    <md-icon md-svg-src="img/icons/android.svg"></md-icon>
</md-button>

Hay componentes además que también nos soportan comportamientos, como es el caso de las cajas de diálogo. En este caso habrá también que documentarse para ver cómo se pueden producir no solo con las etiquetas necesarias para incluirlas en el HTML de la página, sino también con el Javascript necesario para ponerlas en funcionamiento o los eventos que produzcan cuando el usuario interaccione con los componentes.

En si el proyecto es muy amplio, pero merece la pena el esfuerzo de estudiarlo. Entender y dominar sus componentes llevará su tiempo, pero a la larga nos ahorrará mucho trabajo del lado del diseño y nos asegura un nivel de calidad estético y una usabilidad elevada en nuestras aplicaciones.

Acabamos esta review agradeciendo a Alberto Basalo sus clases en el Curso de Front Edge de EscuelaIT, donde hemos podido realizar una aplicación AngularJS con Angular Material, lo que sin duda facilita enormemente comenzar a usar esta librería y suavizar enormemente la curva de aprendizaje.