15
estendendo o html com diretivas AngularJS Um exemplo de como construir aplicações HTML componentizadas

Estendendo o html com angular js

Embed Size (px)

Citation preview

Page 1: Estendendo o html com angular js

estendendo o html com diretivas

AngularJSUm exemplo de como construir aplicações HTML componentizadas

Page 2: Estendendo o html com angular js

/apresentação

Evaldo BarbosaAnalista de Sistemas

Presidente do PHP Maranhão

Membro da diretoria da ABRAPHP

Page 3: Estendendo o html com angular js

/estabelecendo_o_problema

Uma todo listUm problema, alguns dados e dois componentes.

Page 4: Estendendo o html com angular js

/estabelecendo_o_problema

Uma todo listUm problema, alguns dados e dois componentes.

<todo-list title=”Título da lista”> <task title=”Task” done=”boolean” blocked=”boolean”></todo-list>

Page 5: Estendendo o html com angular js

/dependencias

Bower.jsonPreparando o campo para o jogo

bower install –save angular font-awesome bootstrapbower init

Page 6: Estendendo o html com angular js

/meio_de_campo

O módulo e o controllerUm controller simples: basicamente dados.

/app/app.js

Page 7: Estendendo o html com angular js

/html

Template das diretivasComo usar as diretivas na página

/app/view/todo-list.html/app/view/task.html

Page 8: Estendendo o html com angular js

/implementação

Criando as diretivasComo chamaremos a diretiva no HTML

Restrict

Page 9: Estendendo o html com angular js

/implementação

Criando as diretivasQual a forma de implementar o HTML da diretiva

Template e TemplateUrl

Page 10: Estendendo o html com angular js

/implementação

Criando as diretivasSubstitui o HTML da tag pelo do template

Replace

Page 11: Estendendo o html com angular js

/implementação

Criando as diretivasReserva uma área do template para receber dados da chamada

Transclude

Page 12: Estendendo o html com angular js

/implementação

Criando as diretivasInterceptando dados e alterando a saída

Link

Page 13: Estendendo o html com angular js

/github

O repositórioO código e as referências

https://github.com/evaldobarbosa/diretivasAngularjs

Pronto para deployREADME com referências

Page 14: Estendendo o html com angular js

ObrigadoPerguntas?

Page 15: Estendendo o html com angular js

br.linkedin.com/in/evaldobarbosagithub.com/evaldobarbosatwitter.com/evaldobarbosafacebook.com/evaldo.barbosa.902