Estendendo o html com angular js

Preview:

Citation preview

estendendo o html com diretivas

AngularJSUm exemplo de como construir aplicações HTML componentizadas

/apresentação

Evaldo BarbosaAnalista de Sistemas

Presidente do PHP Maranhão

Membro da diretoria da ABRAPHP

/estabelecendo_o_problema

Uma todo listUm problema, alguns dados e dois componentes.

/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>

/dependencias

Bower.jsonPreparando o campo para o jogo

bower install –save angular font-awesome bootstrapbower init

/meio_de_campo

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

/app/app.js

/html

Template das diretivasComo usar as diretivas na página

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

/implementação

Criando as diretivasComo chamaremos a diretiva no HTML

Restrict

/implementação

Criando as diretivasQual a forma de implementar o HTML da diretiva

Template e TemplateUrl

/implementação

Criando as diretivasSubstitui o HTML da tag pelo do template

Replace

/implementação

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

Transclude

/implementação

Criando as diretivasInterceptando dados e alterando a saída

Link

/github

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

https://github.com/evaldobarbosa/diretivasAngularjs

Pronto para deployREADME com referências

ObrigadoPerguntas?

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