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:
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:
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:
Feito isso precisamos chamar o módulo e incluir a dependência do angular-material, veja:
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:
Action
Layout
<
div class=”aspectRatioPlaceholder is-locked”>
Então, como o angular material tem uma api flexbox podemos setar uma divrow, 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:
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:
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 combinar com os breakpoints caso for preciso para deixarmos responsivo, veja a tabela:
Show & Hide
Reproduza o código abaixo para ver o comportamento da página quando diminuímos a janela do navegador:
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!
