Crie aplicativos Web ultramodernos com material angular

Na Conferência Google I/O em 2014, o Google anunciou o Material Design, sua nova linguagem de design. Desde então, eles converteram muitos de seus aplicativos populares para aderir a essa nova especificação em um esforço para fornecer uma experiência consistente. Agora eles estão tentando convencê-lo a seguir também.

O que é design de materiais?

Após uma visita às especificações oficiais do Material Design, você terá imediatamente uma sensação de minimalismo ultramoderno. Formas básicas e cores planas são o tema aqui. Passar pela documentação é uma experiência e tanto. Eu recomendo dar uma olhada por si mesmo, mas vou resumir aqui.

Meta

O objetivo é criar uma linguagem visual que sintetize princípios clássicos do bom design com a inovação e possibilidade da tecnologia e da ciência. Também desenvolver um único sistema subjacente que permita uma experiência unificada em várias plataformas e tamanhos de dispositivos.

Princípios

O Material Design é baseado em três princípios.

O material é a metáfora

Inspirado no estudo do papel e da tinta, o material vive no espaço 3D e é fundamentado na realidade tátil. Dá a ilusão de espaço usando sombras realistas. O material de papel deve obedecer às leis da física (ou seja, dois pedaços de papel não podem atravessar um ao outro), mas pode substituir o mundo físico (ou seja, um papel pode crescer ou encolher).

Negrito, Gráfico, Intencional

Escolhas deliberadas de cores, imagens de ponta a ponta, tipografia em grande escala e espaço em branco intencional criam uma interface gráfica arrojada que mergulha o usuário na experiência. O Botão de Ação Flutuante, ou FAB, é um excelente exemplo desse princípio. Você notou aquele pequeno círculo com o símbolo 'mais' flutuando em seu aplicativo Google Inbox? O Material Design deixa bem claro que este é um botão importante.

O movimento fornece significado

O movimento é significativo e apropriado, servindo para focar a atenção e manter a continuidade. O feedback é sutil, mas claro. As transições são eficientes, mas coerentes. O ponto principal aqui é animar apenas quando tem um propósito e não exagerar.

Como o AngularJS se encaixa no design de materiais?

AngularJS, o “Superheroic JavaScript MVW Framework” do Google, aborda muitos dos desafios encontrados no desenvolvimento de aplicativos de página única (SPA). Ele fornece a estrutura necessária para criar aplicativos Web modernos que se conectam a APIs e nunca precisam que a página seja atualizada.

AngularJS: uma nova abordagem

Angular é o que o HTML teria sido, se tivesse sido projetado para aplicativos. HTML é uma ótima linguagem declarativa para documentos estáticos, mas a criação de aplicativos dinâmicos nem tanto.

Criar aplicativos dinâmicos com HTML sempre foi um exercício de enganar o navegador para fazer coisas que ele não deveria fazer. Existem algumas abordagens para fazer isso.

1. Biblioteca - uma coleção de funções. (jQuery)
2. Framework - o código preenche dinamicamente elementos estáticos quando necessário. (Durandal, Brasa)

Angular adota uma abordagem diferente para resolver esse problema. Em vez de lutar com o HTML fornecido, ele cria novas construções HTML. Angular ensina ao navegador a nova sintaxe HTML por meio de uma construção chamada 'diretivas'. O Angular vem com um conjunto dessas diretivas embutidas, mas também permite que você crie diretivas personalizadas, permitindo que você escreva seus próprios elementos HTML.

Não seria legal se o Google criasse um conjunto de diretrizes baseadas nos princípios do Material Design?

Apresentando o material angular

O Google está desenvolvendo ativamente o Angular Material, uma implementação do Material Design no AngularJS. O Angular Material fornece um conjunto de componentes de interface do usuário reutilizáveis ​​com base no sistema Material Design. O Material Angular é composto por várias peças. Possui uma biblioteca CSS para tipografia e outros elementos, fornece uma abordagem JavaScript interessante para temas e seu layout responsivo usa uma grade flexível. Mas o recurso mais atraente do Angular Material é sua incrível coleção de diretivas.

Começando

Eu criei um projeto de código aberto para ajudar a alavancar seu próximo projeto Angular Material. O objetivo deste projeto é dar um exemplo de tudo que a Angular Material tem a oferecer, tudo sob o mesmo teto. Navegação, paginação, temas e toda a coleção de diretivas estão prontas, tudo o que você precisa fazer é alimentar seus dados e vinculá-los ao HTML.

Dê uma olhada na demonstração aqui ou faça um fork do código no GitHub.

Diretivas

As diretivas são um recurso central do Angular. Angular vem com várias diretivas que você usa o tempo todo, como ng-model ou ng-repeat. Eles são uma peça muito importante do Angular que faz o framework funcionar como deveria.

Como usar uma diretiva de material angular

O Angular Material estende essa biblioteca de diretivas com um conjunto de diretivas inspiradas no Material Design. As diretivas Angular Material são tags HTML que começam com 'md'; abreviação de Material Design. Eles não poderiam ser muito mais fáceis de usar. Por exemplo, vamos dar uma olhada no bom e velho botão.

Um botão HTML padrão pode ser algo assim.

 <button>Click Me</button>

Um botão Angular Material se parece com isso.

 <md-button>Click Me</md-button>

E isso é tudo o que é necessário para fazer um botão Material. Agora, existem várias outras opções disponíveis para esta diretiva, como tematizá-la e retirá-la da superfície para implicar importância.

 <md-button class="md-raised md-primary md-hue-1">Click Me</md-button>

Serviços

Os serviços também são essenciais para a funcionalidade do Angular. Eles são usados ​​para compartilhar código em todo o aplicativo. Um serviço central comum como $http é usado e reutilizado para chamadas de dados em aplicativos Angular.

Os serviços angulares são:

1. Instanciado lentamente – Angular apenas instancia um serviço quando um componente do aplicativo depende dele.
2. Singletons – Cada componente dependente de um serviço obtém uma referência à única instância gerada pela fábrica de serviços.

Como usar um serviço de material angular

O Angular Material vem empacotado com alguns serviços que fornecem algumas funcionalidades extras ao aplicativo. Eles também contribuem para o desempenho de algumas das diretrizes. Um ótimo exemplo de serviço é o 'brinde'.

Um brinde é uma pequena notificação que desliza da parte superior da tela e desaparece após alguns segundos. Usar este serviço é fácil.

Em JavaScript,

 $mdToast.show( $mdToast.simple('Simple Toast!') .position('left bottom') .hideDelay(3000) );

Este exemplo mostra um brinde simples que aparece no canto inferior esquerdo da tela e recua após 3 segundos.

Alguns serviços podem ser personalizados com modelos personalizados. Nesse caso, o serviço $mdToast pode usar um modelo HTML personalizado usando a diretiva md-toast.

Tema

O Material Design é uma linguagem visual onde os temas transmitem significado por meio de cores, tons e contraste. Esses temas são expressos em todos os componentes de todo o aplicativo para fornecer uma sensação mais unificada.

De acordo com as diretrizes do Material Design, você deve “limitar sua seleção de cores escolhendo três tons de cores da paleta primária e uma cor de destaque da paleta secundária”. O Angular Material simplifica seguir esta diretriz usando JavaScript para configurar o tema. Mas primeiro, o que é uma paleta e uma tonalidade?

• Matiz: Um matiz é uma única cor em uma paleta.
• Paleta: Uma paleta é uma coleção de tons.

Por exemplo, uma paleta seria 'verde' e uma tonalidade é um tom específico de verde. O Angular Material vem embalado com todas as paletas válidas da especificação do Material Design. Você pode aprender mais sobre as paletas de cores válidas aqui.

Configurando o Tema

Tema seu projeto é um pedaço de bolo. No arquivo app.js, defina as paletas e os matizes desejados usando o serviço Theming Provider.

 angular.module('myApp', ['ngMaterial']) .config(function($mdThemingProvider) { $mdThemingProvider.theme('default') .primaryPalette('cyan', { 'default': '400', 'hue-1': '100', 'hue-2': '600', 'hue-3': 'A100' }) .accentPalette('amber') .warnPalette('red') .backgroundPalette('grey'); });

Usando o tema

Para aplicar o tema aos componentes, defina a classe do elemento para a paleta e o matiz desejados.

 <md-button class="md-primary">Click me</md-button> <md-button class="md-primary md-hue-1">Click me</md-button> <md-button class="md-primary md-hue-2">Click me</md-button> <md-button class="md-accent">or maybe me</md-button> <md-button class="md-warn">Careful</md-button>

Esquema

O Flexbox é a mais recente e melhor adição ao design responsivo e o Angular Material vem com ele. Se você estiver familiarizado com o sistema de grade do Bootstrap, poderá entender rapidamente. Na verdade, o Bootstrap está mudando para o Flexbox em sua próxima versão. Ele tem o layout familiar de linhas e colunas com o qual você se acostumou, mas com muito mais. Aprenda como usar o Flexbox com este tutorial ou estude a documentação oficial.

As 9 melhores diretivas de materiais angulares

Existem muitas diretivas Angular Material para listá-las todas, então gostaria de compartilhar com vocês minhas favoritas.

9. Progresso Linear

Muitas vezes, em SPAs, as páginas precisam de tempo para carregar dados do servidor. Se o aplicativo mostrar uma página em branco durante esse período, os usuários podem pensar que o aplicativo está quebrado e sair. Informe aos usuários que os dados estão sendo carregados com a diretiva Progress Linear. Os usuários saberão esperar quando virem uma barra de progresso animada indicando que algo está acontecendo. Como alternativa, use a diretiva Progress Circular para um indicador de rodada.

8. Selecionador de Data

A diretiva Date Picker torna a escolha de uma data uma experiência limpa e simples para o usuário e um verdadeiro one-liner para escrever. Basta usar md-datepicker e, opcionalmente, limitar o intervalo com md-min-date e md-max-date e pronto.

7. Autocompletar

O preenchimento automático fornece uma experiência de usuário agradável, ajudando o usuário a escolher uma opção. É o que torna o mecanismo de busca do Google o melhor. A diretiva Autocomplete adiciona essa funcionalidade ao seu aplicativo completando as palavras de um usuário enquanto ele digita. Mas a melhor parte dessa diretiva é a personalização. Ao preencher seu autocomplete com md-item-template você pode dar mais significado às sugestões. Por exemplo, se um usuário estivesse pesquisando nomes em uma empresa, o preenchimento automático poderia mostrar os nomes correspondentes com sua imagem e função na empresa, proporcionando uma experiência de usuário mais robusta.

6. Folha Inferior

A folha inferior é um pequeno menu que desliza da parte inferior da tela, cobrindo o conteúdo e focando. Originalmente destinado a ser usado exclusivamente para dispositivos móveis, a folha inferior vem ganhando popularidade em telas maiores. Para usá-lo, crie um modelo com md-bottom-sheet contendo um md-grid ou um md-list para um layout de grade ou layout de lista, respectivamente. Em seguida, chame-o com o serviço Bottom Sheet, $mdBottomSheet.show().

5. Entrada

Os formulários de entrada são chatos e têm sido desde o início da internet. Mas eles não precisam ser! Dê um toque especial às suas entradas com a diretiva Input. Envolva sua tag de entrada com md-input-container e veja-a ganhar vida. Observe como seu espaço reservado é animado em um rótulo flutuante. Valide facilmente sua entrada com mudanças de cor instantâneas, mas sutis, e mensagens de aviso. A diretiva de entrada pega um elemento que se espera ser chato e oferece uma surpresa agradável.

4. Torrada

A experiência do usuário mais agravante é não saber o que o aplicativo está fazendo. Facilitamos esse agravamento com torradeiras ou pequenas notificações discretas. Antigamente, quando enviávamos uma solicitação ao servidor, esperávamos nessa página até que a resposta voltasse antes que pudéssemos seguir em frente. A atenção do usuário caiu drasticamente desde então. Nos SPAs de hoje, clicamos em um botão e esperamos avançar imediatamente, lidando com a resposta do servidor quando ela chegar. A diretiva Toast torna isso fácil. Uma torradeira é invocada simplesmente usando o Toast Service, $mdToast.show(), e definindo o texto, duração e em qual canto aparecer. Faça sua própria torradeira personalizada com md-toast.

3. Lista de grade

Suas listas não têm entusiasmo? As listas de grade são uma alternativa às exibições de lista padrão. Uma lista de grade é melhor para apresentar imagens e é otimizada para compreensão visual. Ele funciona colocando ladrilhos de tamanhos diferentes em uma grade, dando uma sensação dispersa e eclética. O tamanho e o layout do bloco respondem ao tamanho da tela. Esta diretiva certamente dará ao seu aplicativo uma aparência empolgante e divertida.

2. Quadro branco

O conceito de espaço é o núcleo do Material Design e sua metáfora de papel. Duas folhas de papel na mesma posição z (ou profundidade), formam uma costura e devem se mover juntas. Duas folhas de papel sobrepostas, com diferentes posições z, formam um degrau. Eles se movem independentemente um do outro. Para seguir o projeto, devemos ser capazes de deslocar os elementos ao longo do eixo z. O Angular Material fornece uma maneira simples de fazer isso. Usando a diretiva Whiteframe, defina a classe como md-whiteframe-z{x}, onde x são as unidades de profundidade acima do plano de fundo. Quanto maior o número, maior a sombra projetada pelo papel.

1. Navegação lateral

Criar um menu de navegação lateral nunca foi tão fácil. A diretiva Sidenav coloca um menu de navegação à esquerda ou à direita da tela. Tendo em mente o celular, ele desliza para dentro e para fora conforme o esperado ou programaticamente com um clique de botão. Uma boa adição é o recurso de abertura de bloqueio. A navegação lateral pode ser configurada para ser bloqueada quando a tela atingir um determinado tamanho. Ao definir o parâmetro md-is-locked-open=”$mdMedia('gt-sm')” o menu ficará escondido no telefone, mas bloqueado aberto no tablet e maior.

Conclusão

O Google está convertendo seus aplicativos mais populares para o Material Design. Agora eles estão liderando o desenvolvimento do Angular Material, uma implementação do Material Design escrita em AngularJS. O Material Design usa uma metáfora de papel, intenções ousadas e movimento significativo. AngularJS organiza aplicativos de página única. O Angular Material aplica os princípios do Material Design aos aplicativos AngularJS.

O Material Design está aqui e o Angular Material é uma maneira fantástica de aplicar a especificação do Material design aos seus aplicativos de página única. Se você deseja criar seu próprio aplicativo Angular Material, não perca seu tempo começando do zero. Em vez disso, comece com um aplicativo totalmente funcional com demonstrações das diretivas, temas já configurados e navegação e roteamento prontos para uso. Dê uma olhada na demonstração aqui ou faça um fork do código no GitHub. Claro, você também pode aprender tudo sobre o Angular Material visitando a documentação oficial.

O que você acha das minhas escolhas para as melhores diretivas de materiais angulares? Será que acertei? Quais são seus favoritos?