Angular Material

Material Design

O Angular Material é uma biblioteca de componentes da interface para desenvolvedores Angular JS. Os componentes Material ajudam na construção de páginas e aplicativos atraentes, consistentes e funcionais, ao mesmo tempo em que aderem aos princípios modernos de design da Web, como portabilidade do navegador, independência do dispositivo e declaração elegante. Ajuda na criação de sites mais rápidos, bonitos e responsivos. É um produto inspirado no Google Material Design.

Executando o Angular Material Online

Para poder testar os exemplos listados neste exemplo, salve os exemplos em um arquivo texto com extensão “.html” e abra em um navegador.

O primeiro teste pode ser verificado com o código abaixo:


<html lang="pt">
   <head>
      <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <script type="text/javascript">
         angular.module('exemplo1', ['ngMaterial']);
      </script>
   </head>
   <body ng-app="exemplo1" ng-cloak>
      <md-toolbar class="md-warn">
         <div class="md-toolbar-tools">
            <h2 class="md-flex">Exemplo 1</h2>
         </div>
      </md-toolbar>
      <md-content flex layout-padding>
         <p>Lorem ipsum nam molestie hac vel justo eget, nostra lectus ligula ante vivamus fringilla fames mollis, nostra aptent tempor congue vehicula pharetra. mauris integer scelerisque lectus ut aliquam fusce lobortis litora per magna curae, posuere magna facilisis lorem felis viverra rutrum vel odio. donec sit ultrices magna sollicitudin cras donec morbi vestibulum et, pharetra nibh curabitur gravida nisl phasellus sollicitudin posuere vivamus metus, rutrum pharetra a amet faucibus mollis nullam odio. dui ut curae scelerisque molestie dolor gravida metus amet maecenas sem, rhoncus eu rutrum etiam leo aliquam facilisis nunc enim, in dictumst ut sagittis aenean tempor dapibus congue et.</p>
         <p>Ante cursus vehicula mollis faucibus metus hendrerit potenti imperdiet, aliquam neque sodales luctus integer non scelerisque quam, senectus egestas facilisis risus amet nostra netus. tincidunt condimentum curabitur congue consequat porta ligula posuere phasellus vehicula, inceptos varius sit at lectus elementum aptent interdum. fringilla arcu quisque pretium sit pulvinar a himenaeos nibh praesent class lacinia quam fames consectetur lectus enim felis orci, ullamcorper a nunc libero platea curae ornare sit aliquet mattis consectetur elementum primis erat curabitur elit tempus. tincidunt ac litora sodales cursus praesent nisi taciti nam, senectus viverra magna pretium feugiat proin libero sapien nullam, mattis bibendum platea ornare eros pharetra massa.</p>
         <p>Inceptos pulvinar nostra neque vestibulum ultricies curabitur eget, elit fusce sociosqu mi mauris quisque, enim eros nulla sodales curabitur sodales. litora auctor fames vehicula primis elit tortor porttitor ut, hendrerit duis tellus arcu vestibulum ipsum orci, semper ultricies senectus suspendisse dictum neque etiam. duis lobortis lacinia quisque gravida fusce ad dictumst tristique adipiscing scelerisque, bibendum fusce vitae class elementum ac fringilla nisi orci fringilla, accumsan dapibus per vivamus nostra iaculis at nunc posuere. gravida quisque turpis curabitur semper quis feugiat faucibus euismod commodo curabitur velit congue, dolor quisque mi netus morbi aliquam potenti curae laoreet libero donec, curabitur ipsum fermentum bibendum ornare vivamus suscipit molestie donec posuere velit.</p>
      </md-content>
   </body>
</html>

Principais Características

  • Design responsivo embutido.
  • CSS padrão com baixo footprint.
  • Componentes como botões, caixas de seleção e campos de texto.
  • Recursos especializados como: cartões, barra de ferramentas, discagem rápida, navegação lateral, alertas, etc.
  • Cross-browser, e pode ser usado para criar componentes da web reutilizáveis.

Design Responsivo

Com um design responsivo, o Angular Material se adápta de acordo com o tamanho do dispositivo. As classes são criadas de forma que o site possa caber em qualquer tamanho de tela.

Os sites criados usando o Angular Material são totalmente compatíveis com PC, tablets e dispositivos móveis.

Extensível

O Material tem um design muito minimalista e plano. Ele foi projetado considerando o fato de que é muito mais fácil adicionar novas regras CSS do que sobrescrever as regras CSS existentes.

Opções de Uso

Existem duas maneiras de usar o Angular Material:

  • Instalação Local – Pode-se fazer o download das bibliotecas do Material usando npm, jspm ou bower em sua máquina local e incluí-las em seu código HTML;
  • Versão Baseada na CDN – Pode-se incluir os arquivos angular-material.min.css e js do Material no código HTML diretamente da Content Delivery Network (CDN).

Instalação Local

Usando o npm deve-se utilizar os seguintes comandos para a instalação:

angular-animate@latest
angular-aria@latest
angular-messages@latest
angular@latest
angular-material@latest

O npm baixará os arquivos na pasta node_modules > angular-material. Veja o código HTML listado acima.

Versão Baseada na CDN

Pode-se incluir os arquivos “angular-material.css” e “angular-material.js” no código HTML diretamente da CDN (Content Delivery Network). Por exemplo, no exemplo abaixo, usando a CDN do Google que fornece conteúdo para a versão mais recente:

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>

Conclusão

Angular Material fornece uma base sólida para construir e aprender princípios de Material Design. A implementação do Angular permite a fácil reutilização do código dentro de um aplicativo. Isso leva a uma aplicação mais limpo e mais estável, que é algo valorizado. Mas ainda está a quem do Bootstrap que apresenta par componentes e recursos além de ser uma plataforma mais conhecida.

Nossa recomendação é para pequenos projetos que não demandem recursos avançados.

*** A OctalMind é uma empresa especializada no desenvolvimento de sistemas de alta tecnologia.