material design simples e rapido com angularjs

ANGULAR MATERIALMaterial Design simples e rápido com AngularJS

HENRIQUE LIMASgoogle.com/+HenriqueRamosLimas

github/HenriqueLimas henrique.ramos.limas@gmail.com

E VOCÊS?

MATERIAL DESIGN

O QUE É O MATERIAL DESIGN?

ÊNFASE NA AÇÃO DO USUÁRIO

COMPONENTES

https://www.google.com/design/spec/material-design/introduction.html

POLYMER

https://www.polymer-project.org/0.5/docs

ANGULARJS

FRAMEWORK JAVASCRIPT

Desenvolvido pelo Google

Aplicações Single page

Extender o HTML

CARACTERÍSTICAS

DATA BINDING

AngularJSOutros sistemas de template

EXPRESSIONS

!

!

<span> 40 + 2= {{ 40 + 2 }} </span>

Expressions

!

40 + 2 = 42

DIRETIVAS

<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

<my-tabs> <my-panel title="Home"></my-panel> <my-panel title="Profile"></my-panel> … </my-tabs> !!!!!!!!

Diretivas

Módulos

Controllers

Serviços

Diretivas

E O QUE MAIS?

Filtros

Sistema de rotas

Validação do Form

Uma ótima comunidade

ANGULAR MATERIAL

ANGULAR MATERIAL

AngularJS

+

Componentes UI

Serviços dos componentes

Efeitos UX

Suporte a ARIA

CSS de layout

Temas

COMPONENTES UI

console.log(‘Demo’);

OMG!

LAYOUT CSS

<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

ATRIBUTO FLEX

<div layout="row"> <div flex> … </div> ! <div flex> … </div> ! <div flex> … </div> </div> !!!!!

Flex

ATRIBUTO FLEX

!<div layout="row"> <div flex="33"> </div> ! <div flex="55"> </div> ! <div flex> </div> </div> !!!!!

Flex

COMO E ONDE APRENDER MAIS?

console.log(‘Obrigado’);

google.com/+HenriqueRamosLimas github/HenriqueLimas henrique.ramos.limas@gmail.com