Começando com o Angular Material  – Parte 1

Decidi começar essa série de posts sobre Angular pois ultimamente é o que mais estou estudando, e pirando também rs, estou viciado no angular confesso, e não podia deixar de escrever sobre o angular material pois ele realmente me surpreendeu com sua facilidade que junto a sua beleza o torna bem interessante. Vou escrever uma série com alguns posts baseados no que eu aprendi do angular material nesses tempos estudando na internet, espero que possa ajudar uma galera que queria muito conhecer porém não sabia por onde começar ou tem dificuldade de achar algo em português.

por Júlio Carneiro 08/08/2016 Comentários

Decidi começar essa série de posts sobre Angular pois ultimamente é o que mais estou estudando, e pirando também rs, estou viciado no angular confesso, e não podia deixar de escrever sobre o angular material pois ele realmente me surpreendeu com sua facilidade que junto a sua beleza o torna bem interessante.

Vou escrever uma série com alguns posts baseados no que eu aprendi do angular material nesses tempos estudando na internet, espero que possa ajudar uma galera que queria muito conhecer porém não sabia por onde começar ou tem dificuldade de achar algo em português.

Lembrando que esta série exige um certo conhecimento de AngularJS para ser compreendida ok?

Parte 1 — Baixar e instalar

Vamos começar criando uma nova pasta e começando um projeto npm dentro dela, veja:

cd Desktop
mkdir project
cd project
npm init

Vão aparecer algumas opções do projeto npm pra preencher, preencha conforme queira ou pule apertando “enter”.

Agora vamos instalar o angular, o angular material e as dependências do material:

npm install angular angular-material angular-animate angular-aria --save

Legal, instalamos as dependências que precisamos para começar nosso projeto, agora precisamos linkar com nosso arquivo html certo? Então vamos começar linkando 5 arquivos de dependências, um de css que deverá ser linkado no , e outros 4 scripts que linkamos antes da tag de fechamento do body, vejamos:

<html ng-app="app">
<head>
    <link rel="stylesheet" href="node_modules/angular-material/angular-material.css">
</head>
<body>
    <div></div>
    <script src="node_modules/angular/angular.min.js"></script>
    <script src="node_modules/angular-animate/angular-animate.min.js"></script>
    <script src="node_modules/angular-aria/angular-aria.min.js"></script>
    <script src="node_modules/angular-material/angular-material.min.js"></script>
</body>
</html>

Feito isso precisamos chamar o módulo e incluir a dependência do angular-material, veja:

<script>
    angular.module('app', ['ngMaterial'])
        .run(function(){
        console.log('Funcionando!')
    });
</script>

Vejam que eu chamei nosso ng-app na tag , isto é muito importante em nosso passo a passo pois vamos chamar o nosso módulo por ela, então como chamei na tag ele vai se estender por toda a página procurando por diretivas, controllers etc.

Ainda neste exemplo, escrevi uma função que quando a página é carregada ela dispara uma mensagem no console, você pode testar em sua máquina para assimilar o que eu fiz até aqui.

Antes de dar continuidade ao artigo vou deixar o link da documentação oficial do angular material que é bem explicativa e com certeza vai te ajudar bastante nessa jornada de aprendizado, além do que vamos usar bastante os exemplos de lá nos artigos:

https://material.angularjs.org/

Action {.graf–h4.graf-after–mixtapeEmbed}

Ambiente preparado tudo funcionando? Legal, bora pra action, eu ia postar somente até aqui na parte 1 pro post não ficar gigante, porém acho que ficaria meio chato porque sei que se você está lendo isso quer ir logo pra action! Então decidi postar um combo parte 1 + parte 2, segura:

Layout

No Angular Material podemos usar algumas diretivas pré prontas para criarmos interfaces. Usando estas diretivas html podemos definir valores (ex:layout=”row”), que vão nos ajudar bastante a separar as coisas do jeito mais fácil para trabalharmos, pois os atributos vão definir o layout baseado nas classes css que já existem no angular material. Conforme a documentação, segue abaixo uma tabela contendo algumas especificações:

< div class=”aspectRatioPlaceholder is-locked”>
Então, como o angular material **tem uma api flexbox** podemos setar uma div**row**, e dentro dela **criar 2 divs** com um “**flex=”50”**”, assim cada div dentro da div **row** terá o espaço de **50% da tela** uma ao lado da outra, veja o exemplo:
<div layout="row">
    <div flex="50">Primeira div</div>
    <div flex="50">Segunda div</div>
</div>

Abaixo temos algumas **especificações de breakpoints** que também serão bem importante pra criarmos nossos apps e deixarmos tudo responsivo, vamos **associar breakpoints** **a definições de mediaquery**, veja:
Agora podemos **combinar o breakpoint junto a api layout** e pronto, temos responsividade em nosso app 😀 veja como funciona:
Com essas informações já podemos começar a fazer algumas coisas como fazer a div aparecer com uma estrutura default para quando estiver no **desktop**, e outra quando estiver no **celular** apenas manipulando a api **layout**, veja:
<md-content class="md-padding" layout-xs="column" layout="row"></md-content>
Veja que eu pedi para por default o **md-content** vir como **row**, e quando a tela for menor que **599px** como vimos nos breakpoints setando o **xs**, ele mude para **column**. #### Layout-align

Podemos também alinhar elementos em nossa página com a api layout-align, veja um exemplo:

<div layout="row" layout-align="center">
    Hello World!
</div>

Podemos também combinar com os breakpoints caso for preciso para deixarmos responsivo, veja a tabela:

{.graf–h4.graf-after–figure}

{.graf–h4.graf-after–figure}

Show & Hide {.graf–h4.graf-after–figure}

Outra coisa muito interessante na parte de layouts do angular material é o show & hide, uma api que pode ser usada para mostrar ou esconder algum elemento conforme a resolução:

Reproduza o código abaixo para ver o comportamento da página quando diminuímos a janela do navegador:

<div layout="row">
    <div hide show-gt-sm flex>
        Mostrar somente em dispositivos gt-sm
    </div>
    <div hide-gt-sm flex>
        Mostrar em resolução pequena e média<br>
        Esconder em dispositivos gt-sm        
    </div>
    <div show hide-gt-md flex>
        Mostrar em resolução pequena e média<br>
        Esconder em dispositivos gt-md        
    </div>
    <div hide show-md flex>
        Mostrar somente em resoluções médias<br>
    </div>
    <div hide show-gt-lg flex>
        Mostrar em resoluções maiores que 1200px de largura<br>
    </div>
</div>

Viu só? Facilitou bastante o jeito como podemos construir nossas estruturas responsivas. Aprendemos hoje como colocar e iniciar o angular-material no seu projeto, e um pouco mais sobre a parte de layout e layout responsivo, creio que no próximo post vamos poder brincar com coisas mais legais, porém essa parte é essencial para qualquer pessoa que quer aprender o angular material, sem ela fica muito difícil de trabalharmos.

Peço desculpas pelo tamanho do post porque creio que tenha ficado meio enorme rs e isso não foi absolutamente nada do que o angular-material pode fazer, espero que tenha contribuído com seu conhecimento, e no próximo post vou explicando um pouco sobre os services do angular material,qualquer feedback será bem-vindo!