Material Design simples e rapido com AngularJS
10 gostaram1,668 visualizações
O documento discute o AngularJS e seu uso em conjunto com o Material Design, destacando características como data binding, diretivas e sistema de rotas. Além disso, menciona exemplos de layout e componentes para construir aplicações web interativas. Para mais informações, são fornecidos links e contatos do autor.
Material Design simples e rapido com AngularJS
- 1. ANGULAR MATERIAL Material Design simples e rápido com AngularJS
- 2. HENRIQUE LIMAS google.com/+HenriqueRamosLimas github/HenriqueLimas henrique.ramos.limas@gmail.com
- 3. E VOCÊS?
- 5. O QUE É O MATERIAL DESIGN?
- 6. ÊNFASE NA AÇÃO DO USUÁRIO
- 9. ANGULARJS
- 10. FRAMEWORK JAVASCRIPT Desenvolvido pelo Google Aplicações Single page Extender o HTML
- 11. CARACTERÍSTICAS
- 12. DATA BINDING AngularJSOutros sistemas de template
- 13. EXPRESSIONS
- 14. ! ! <span> 40 + 2= {{ 40 + 2 }} </span> Expressions ! 40 + 2 = 42
- 15. DIRETIVAS
- 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
- 20. E O QUE MAIS? Filtros Sistema de rotas Validação do Form Uma ótima comunidade
- 22. ANGULAR MATERIAL
- 23. ANGULAR MATERIAL AngularJS + Componentes UI Serviços dos componentes Efeitos UX Suporte a ARIA CSS de layout Temas
- 24. COMPONENTES UI
- 26. OMG!
- 27. LAYOUT CSS
- 28. <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
- 29. ATRIBUTO FLEX
- 30. <div layout="row"> <div flex> … </div> ! <div flex> … </div> ! <div flex> … </div> </div> ! ! ! ! ! Flex
- 31. ATRIBUTO FLEX
- 32. ! <div layout="row"> <div flex="33"> </div> ! <div flex="55"> </div> ! <div flex> </div> </div> ! ! ! ! ! Flex
- 33. COMO E ONDE APRENDER MAIS?