Material Design en Angular JS Blog
Material design es una especificación que nos permite diseñar interfaces usables, su enfoque principal es la facilidad de uso y naturalidad de las interfaces.
Te recomiendo revisar la especificación, sobre todo si te dedicas a trabajar en el front-end de una app, aunque no seas diseñador de interfaces es bueno conocer estos principios.
Ahora bien, si eres desarrollador luego de ver las especificaciones, seguramente querrás hacer pruebas, por suerte existe un proyecto que implementa esta especificación en Angular JS!
Para instalar y comenzar a realizar pruebas podemos usar bower para descargar las librerías y dependencias, o bien podemos usar los CDNs disponibles. En tu html tienes que incluir los siguientes archivos.
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.6/angular-material.min.css"> <!-- Angular Material Dependencies --> <script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script> <!-- Angular Material Javascript now available via Google CDN; version 0.6 used here --> <script src="//ajax.googleapis.com/ajax/libs/angular_material/0.6/angular-material.min.js"></script>
Solo estamos incluyendo angular y las dependencias necesarias. Lo siguiente es inicializar la aplicación de Angular y crear un controlador.
angular.module('Material', [
'ngMaterial'
] )
.controller("MainController", function($scope){
$scope.contacts = [
{name:'Carl McFly',phone:'(382) 109 78 28', avatar:'https://s3.amazonaws.com/quizzpot/images/avatars/avatar-1.png'},
{name:'Sara Janick',phone:'(382) 109 78 28', avatar:'https://s3.amazonaws.com/quizzpot/images/avatars/avatar-2.png'},
{name:'John Doe',phone:'(382) 109 78 28', avatar:'https://s3.amazonaws.com/quizzpot/images/avatars/avatar-3.png'},
{name:'Peter Stone',phone:'(382) 109 78 28', avatar:'https://s3.amazonaws.com/quizzpot/images/avatars/avatar-4.png'},
{name:'John Doe',phone:'(382) 109 78 28', avatar:'https://s3.amazonaws.com/quizzpot/images/avatars/avatar-5.png'},
{name:'Mary Dulles',phone:'(382) 109 78 28', avatar:'https://s3.amazonaws.com/quizzpot/images/avatars/avatar-6.png'},
{name:'John Doe',phone:'(382) 109 78 28', avatar:'https://s3.amazonaws.com/quizzpot/images/avatars/avatar-7.png'},
{name:'Patrick Chan',phone:'(382) 109 78 28', avatar:'https://s3.amazonaws.com/quizzpot/images/avatars/avatar-8.png'},
{name:'John Doe',phone:'(382) 109 78 28', avatar:'https://s3.amazonaws.com/quizzpot/images/avatars/avatar-9.png'}
];
} );
Aquí solamente estoy crear una app llamada Material, que requiere el módulo ngMaterial. Luego creo un controlador que tiene un arreglo de contactos, estos los desplegaremos en un listado usando las directivas de material design.
Lo siguiente sería definir la app y el controller en el html de la siguiente manera.
<!DOCTYPE html> <html ng-app="Material"> <head> //... </head> <body ng-controller="MainController"> </body> </html>
Con eso ya podremos usar las directivas y comenzar a realizar pruebas con material design.
Ahora dentro del body del html vamos a definir un toolbar usando la siguiente directiva.
<md-toolbar>
<h2 class="md-toolbar-tools">
<span>Contacts</span>
</h2>
</md-toolbar>
Esto nos mostrará un toolbar de color azul en la parte superior de la pantalla. La directiva md-toolbar es la responsable de realizar esto.
Ahora vamos a definir el listado de contactos usando otra directiva.
<md-content>
<md-list>
<md-item ng-repeat="item in contacts">
<md-item-content>
<div class="md-tile-left">
<img ng-src="{{item.avatar}}" class="avatar" alt="{{item.name}}">
</div>
<div class="md-tile-content">
<h3>{{item.name}}</h3>
<h4>{{item.phone}}</h4>
</div>
</md-item-content>
</md-item>
</md-content>
Usando el md-list creamos un listado, dentro de cada elemento mostramos el avatar , nombre y teléfono de cada contacto. Con esto es suficiente para tener una app bastante sencilla pero con un buen look and feel.
Aplicación con Material Design
He preparado un pequeño ejemplo de esta app en jsbin para que revises el código.
Conclusiones
Material Design nos provee de los conceptos necesarios para desarrollar aplicaciones usables y ngMaterial nos brinda las directivas necesarias para comenzar a trabajar ya mismo.
Por el momento esta bien seguir haciendo pruebas, al día de hoy la especificación sigue en desarrollo así como las directivas y ejemplos. Mi recomendación es darle un vistazo y si eres valiente la uses en algún proyecto personal o pequeño para experimentar.
Happy Coding!
Instructor del curso
2Comentarios
Hola , como podría hacer que refresque la data de los contactos y me devuelva los nuevos agregados y cuando me encuentre al ultimo esta me devuelva a la primera vista. cuales directivas podria usar... gracias
Para agregar un nuevo contacto tendrías que agregarlo al arreglo "$scope.contacts" en el controller, podrías crear un formulario usando una ventana modal o algo así. Saludos!