$http con Karma y Angular
$http con Karma y Angular
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!

Vamos a ver un rápido ejemplo sobre Angular Material Design, en angularjs lo tenemos en forma de módulo (ngMaterial) y nos proporciona una serie de directivas y servicios para que nuestras aplicaciones sean mucho más usables de cara al usuario final, aparte de esto, decir que se adapta a diferentes dispositivos y diferentes tamaños de pantalla sin problemas y completamente configurable.

También tiene temas que podemos utilizar y cambiar con una sencilla configuración.

Al igual que Polymer, Angular Material es mantenido por el equipo de angularjs, nosotros para este ejemplo vamos a utilizar el ejemplo de la documentación para crear un toolbar y un autocomplete.

Instalar Angular Material

Lo primero que debemos hacer es instalar todas las dependencias, nosotros vamos a hacerlo con bower con el siguiente comando.


Cómo podemos ver, también hemos añadido angular-aria y angular-animate, esto es así porque Angular Material los necesita para poder trabajar.

Ahora que ya tenemos todos los componentes listos para utilizar, crea un archivo index.html y añade el siguiente código, simplemente añadimos las dependencias.


Eso es todo lo que necesitamos para empezar a utilizar Angular Material en nuestra app, así que vamos a crear nuestro archivo app.js y añadimos todo el código necesario.


Lo más significativo para nosotros es ver cómo inyectamos el módulo ngMaterial y cómo establecemos la configuración de nuestro tema, en este caso hemos escogido dark, pero puedes utilizar el que quieras, aquí tienes más información.

Ahora queda lo más importante, y es el html que nos proporcionan las directivas y clases de Angular Material, así que añade lo siguiente dentro del tag body del index.html.


Si ahora escribimos por ejemplo a en el campo de texto veremos como los resultados aparecen debajo, pero lo impresionante de esto es la interfaz de usuario, directivas y servicios que nos ofrece Angular Material y lo sencillo que es utilizarlo, en breve seguiremos viendo más cosas.

Si te interesa Angular Material te recomiendo leer su documentación llena de ejemplos y muy completa.