Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Material Design simples e rapido com AngularJS

1,446 views

Published on

Muito se fala hoje de aplicações nativas usando o Material Design do Google. Mas como desenvolver de modo simples, ágil e multi-plataforma na web?

Demo no Github: https://github.com/HenriqueLimas/tdc-2015-palestra-angular-material

Published in: Technology
  • ➤➤ How Long Does She Want You to Last? Here's the link to the FREE report  https://tinyurl.com/rockhardxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ➤➤ 3 Reasons Why You Shouldn't take Pills for ED (important) ●●● https://tinyurl.com/rockhardxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Material Design simples e rapido com AngularJS

  1. 1. ANGULAR MATERIAL Material Design simples e rápido com AngularJS
  2. 2. HENRIQUE LIMAS google.com/+HenriqueRamosLimas github/HenriqueLimas henrique.ramos.limas@gmail.com
  3. 3. E VOCÊS?
  4. 4. MATERIAL DESIGN
  5. 5. O QUE É O MATERIAL DESIGN?
  6. 6. ÊNFASE NA AÇÃO DO USUÁRIO
  7. 7. COMPONENTES https://www.google.com/design/spec/material-design/introduction.html
  8. 8. POLYMER https://www.polymer-project.org/0.5/docs
  9. 9. ANGULARJS
  10. 10. FRAMEWORK JAVASCRIPT Desenvolvido pelo Google Aplicações Single page Extender o HTML
  11. 11. CARACTERÍSTICAS
  12. 12. DATA BINDING AngularJSOutros sistemas de template
  13. 13. EXPRESSIONS
  14. 14. ! ! <span> 40 + 2= {{ 40 + 2 }} </span> Expressions ! 40 + 2 = 42
  15. 15. DIRETIVAS
  16. 16. <div role="tabpanel"> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"> <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> <li role="presentation"> <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> ... </ul> ! <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home">...</div> <div role="tabpanel" class="tab-pane" id="profile">...</div> ... </div> </div> ! ! Diretivas
  17. 17. <my-tabs> <my-panel title="Home"></my-panel> <my-panel title="Profile"></my-panel> … </my-tabs> ! ! ! ! ! ! ! ! Diretivas
  18. 18. Módulos Controllers Serviços Diretivas
  19. 19. E O QUE MAIS? Filtros Sistema de rotas Validação do Form Uma ótima comunidade
  20. 20. ANGULAR MATERIAL
  21. 21. ANGULAR MATERIAL AngularJS + Componentes UI Serviços dos componentes Efeitos UX Suporte a ARIA CSS de layout Temas
  22. 22. COMPONENTES UI
  23. 23. console.log(‘Demo’);
  24. 24. OMG!
  25. 25. LAYOUT CSS
  26. 26. <div layout="row"> <div>Eu estou a esquerda.</div> <div>Eu estou a direita.</div> </div> ! <div layout="column"> <div>Eu estou em cima.</div> <div>Eu estou em baixo.</div> </div> ! ! ! ! ! ! Layout
  27. 27. ATRIBUTO FLEX
  28. 28. <div layout="row"> <div flex> … </div> ! <div flex> … </div> ! <div flex> … </div> </div> ! ! ! ! ! Flex
  29. 29. ATRIBUTO FLEX
  30. 30. ! <div layout="row"> <div flex="33"> </div> ! <div flex="55"> </div> ! <div flex> </div> </div> ! ! ! ! ! Flex
  31. 31. COMO E ONDE APRENDER MAIS?
  32. 32. console.log(‘Obrigado’); google.com/+HenriqueRamosLimas github/HenriqueLimas henrique.ramos.limas@gmail.com

×