estendendoohtmlcomdiretivas
AngularJS
Um exemplo de como construir aplicações HTML componentizadas
/apresentação
EvaldoBarbosa
Analista de Sistemas
Presidente do PHP Maranhão
Membro da diretoria da ABRAPHP
/estabelecendo_o_problema
Umatodolist
Um problema, alguns dados e dois componentes.
/estabelecendo_o_problema
Umatodolist
Um problema, alguns dados e dois componentes.
<todo-list title=”Título da lista”>
<t...
/dependencias
Bower.json
Preparando o campo para o jogo
bower install –save angular font-awesome bootstrap
bower init
/meio_de_campo
Omóduloeocontroller
Um controller simples: basicamente dados.
/app/app.js
/html
Templatedasdiretivas
Como usar as diretivas na página
/app/view/todo-list.html
/app/view/task.html
/implementação
Criandoasdiretivas
Como chamaremos a diretiva no HTML
Restrict
/implementação
Criandoasdiretivas
Qual a forma de implementar o HTML da diretiva
Template e TemplateUrl
/implementação
Criandoasdiretivas
Substitui o HTML da tag pelo do template
Replace
/implementação
Criandoasdiretivas
Reserva uma área do template para receber dados da chamada
Transclude
/implementação
Criandoasdiretivas
Interceptando dados e alterando a saída
Link
/github
Orepositório
O código e as referências
https://github.com/evaldobarbosa/diretivasAngularjs
Pronto para deploy
READ...
Obrigado
Perguntas?
br.linkedin.com/in/evaldobarbosa
github.com/evaldobarbosa
twitter.com/evaldobarbosa
facebook.com/evaldo.barbosa.902
Próximos SlideShares
Carregando em…5
×

Estendendo o html com angular js

208 visualizações

Publicada em

Palestra realizada na UNDB no dia 27 de março de 2015

Publicada em: Internet
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
208
No SlideShare
0
A partir de incorporações
0
Número de incorporações
9
Ações
Compartilhamentos
0
Downloads
1
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Estendendo o html com angular js

  1. 1. estendendoohtmlcomdiretivas AngularJS Um exemplo de como construir aplicações HTML componentizadas
  2. 2. /apresentação EvaldoBarbosa Analista de Sistemas Presidente do PHP Maranhão Membro da diretoria da ABRAPHP
  3. 3. /estabelecendo_o_problema Umatodolist Um problema, alguns dados e dois componentes.
  4. 4. /estabelecendo_o_problema Umatodolist Um problema, alguns dados e dois componentes. <todo-list title=”Título da lista”> <task title=”Task” done=”boolean” blocked=”boolean”> </todo-list>
  5. 5. /dependencias Bower.json Preparando o campo para o jogo bower install –save angular font-awesome bootstrap bower init
  6. 6. /meio_de_campo Omóduloeocontroller Um controller simples: basicamente dados. /app/app.js
  7. 7. /html Templatedasdiretivas Como usar as diretivas na página /app/view/todo-list.html /app/view/task.html
  8. 8. /implementação Criandoasdiretivas Como chamaremos a diretiva no HTML Restrict
  9. 9. /implementação Criandoasdiretivas Qual a forma de implementar o HTML da diretiva Template e TemplateUrl
  10. 10. /implementação Criandoasdiretivas Substitui o HTML da tag pelo do template Replace
  11. 11. /implementação Criandoasdiretivas Reserva uma área do template para receber dados da chamada Transclude
  12. 12. /implementação Criandoasdiretivas Interceptando dados e alterando a saída Link
  13. 13. /github Orepositório O código e as referências https://github.com/evaldobarbosa/diretivasAngularjs Pronto para deploy README com referências
  14. 14. Obrigado Perguntas?
  15. 15. br.linkedin.com/in/evaldobarbosa github.com/evaldobarbosa twitter.com/evaldobarbosa facebook.com/evaldo.barbosa.902

×