Agregando módulos de terceros a una aplicación AngularJs

Vamos a ver como agregar un módulo que no fue creado por nosotros a nuestra aplicación. El módulo que elegí es el de angular material, que es una implementación de material design creada específicamente para angular.

Este módulo tiene varias funcionalidades, pero ésta vez nos vamos a enfocar en su directiva Card.

Instalando Angular Material

Primero debemos descargar los archivos necesiarios para éste módulo, en este caso necesitamos 1 css y 3 javascript. Sí, 3 archivos javascript ya que este módulo tiene a su vez dependencias de otros dos que son angular animate para realizar animaciones y angular aria que es para mejorar la accesibilidad, usabilidad normalmente enfocado a personas que tienen algún tipo de habilidad especial (o conocido como personas con discapacidad).

Lo normal para instalar dependencias es usar npm, bower o cualquiera de estas tecnologías, pero ya que eso desviaría mucho el tema solo voy a usar el cdn de google que nos da acceso a todos los archivos que necesitamos.

El css necesario para material design es:

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.css">  

Mientras que los archivos javascript que necesitamos son los siguientes:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.min.js"></script>  
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-aria.min.js"></script>  
<script src="//ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.js"></script>  

Ahora modificaremos el diseño de nuestro listado de super héroes usando la directiva Card de angular-material.
Primero debemos agregar una directiva md-content que le dice angular material que tendremos un container con datos desplazables, o sea que se necesite hacer scroll, lo sé, la traducción no es muy buena.

<md-content>  
    <md-card>
        <!-- content here -->
    </md-card>
</md-content>  

La directiva md-card acepta una imagen directamente después del inicio de la misma. Es aquí dónde usaremos la imagen de los superheroes.

<md-content>  
    <md-card data-ng-repeat="hero in vm.heroes">
        <img data-ng-src="{{hero.image}}" />
    </md-card>
</md-content>  

No hay mucho que explicar solo estamos agregando la referencia a la imagen usando el tag de toda la vida img.
Luego viene el contenido del card, que en este caso será el nombre del superhéroe y dos botones que los usaremos para mostrar información adicional del un determinado superhéroe.

<md-content>  
    <md-card data-ng-repeat="hero in vm.heroes">
        <img data-ng-src="{{hero.image}}" />
        <md-card-content>
            <h2 class="md-title">{{hero.name}}</h2>
            <p>{{hero.description}}</p>
        </md-card-content>
        <div class="md-actions" layout="row" layout-align="end center">
            <md-button>Comics</md-button>
            <md-button>Series</md-button>
        </div>
    </md-card>
</md-content>  

Acá vemos otra directiva md-card-content que es usada para encapsular el contenido separando la imagen con un padding. En este caso el contenido que vamos a poner es el nombre del superhéroe y una descripción.
Por último tenemos dos botones que por ahora no hacen nada pero servirán en un futuro para ver en qué comics y series aparecen estos superhéroes.

Si ejecutamos esto, probablemente no va a funcionar, y es porque falta un pequeño detalle, tenemos que decirle a nuestra aplicación que estamos usando directivas de angular material.
Para esto tenemos que agregar a angular material como dependencia de nuestra aplicación.

angular  
    .module('marvelApp', ['ngMaterial'])
    .run(initializeApp);

Simplemente indicamos el nombre del módulo ngMaterial dentro del array de dependencias y listo. Ya tenemos un listado de superhéroes usando un diseño basado en material design.
Puedes encontrar el código completo en mi cuenta de github en el siguiente link

https://github.com/eperedo/marvel-app/tree/step-03

Si quieres ver como aplicar más directivas de éste módulo en tus aplicaciones, recuerda que en abakio estamos preparando un curso de angularjs en el que vamos a explicar en detalles este y otros temas. Aprovecha el descuento por los primeros días.