Your SlideShare is downloading. ×
Desenvolvimento Fácil com AngularJS DevFestSul
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Desenvolvimento Fácil com AngularJS DevFestSul

594
views

Published on

Apresentação AngularJS DevFestSul 2014, no dia 24/09/2014

Apresentação AngularJS DevFestSul 2014, no dia 24/09/2014

Published in: Technology

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
594
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
14
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Desenvolvendo Fácil com Por: Saulo Venancio @saulovenancio svenancio@nonlinear.ca
  • 2. Introdução Características do AngularJS Data-binding de 2 vias Classes Dinâmicas Repetidores Validações Filtros Separação de Responsabilidades Fábricas, Serviços e Afins Diretivas Conceitos Avançados
  • 3. Introdução
  • 4. Quem sou eu? • Desenvolvedor Backend desde 2009 • Instrutor de Programação na Voffice, Florianópolis • Atuou com .NET / Java / Javascript • Hoje, - Desenvolvedor AngularJS / AEM na Nonlinear Creations • Apaixonado por tecnologia, empreendedorismo e programação • Github: saulovenancio Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 4
  • 5. O Problema • Como habilitar div quando checkbox for selecionado? • Com Jquery Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 5
  • 6. Codificar é divertido? Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 6
  • 7. Sim, é divertido! Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 7 • Com AngularJS
  • 8. Por que aprender? Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 8Vamos Conhecer!
  • 9. Características do AngularJS
  • 10. Características • Data Binding de 2 vias • Separação Lógica e Visão • Testabilidade (Unitários e Integração) • Componentização • Filtros, ordenação, etc. • Extensa documentação e components de terceiros • SPA, Single Page Application • Comunidade Ativa • Mantenedor: Google! • Vamos ver algumas características técnicas….. 10
  • 11. Data binding de 2 vias Nunca foi tão tão facil manter a view atualizada
  • 12. Data Binding de 2 vias • Código • Resultado • Mágica? Não. Dirty checking. Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 12
  • 13. Classes Dinâmicas Controle a aparência
  • 14. Classes Dinâmicas • Código • Resultado Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 14
  • 15. Repetidores Itere em coleções
  • 16. Repetidores • Fácil iterar em coleções de valores • Cada rota tem sua própria div Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 16
  • 17. Repetidores • Em objetos • Resultado: Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 17
  • 18. Validações De vários tipos
  • 19. Validações por Padrões/Regex
  • 20. Validações de Mínimo/Máximo
  • 21. Validações de Obrigatoriedade
  • 22. Filtros Somente o que você deseja
  • 23. Filtros Simples/Avançados
  • 24. Ordene e Inverta
  • 25. Separação de Responsabilidades
  • 26. Separação de Responsabilidades Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 26 • AngularJS é MVW - Novo conceito próprio: ESCOPO • MVW: - Modelo: Dados da aplicação - Visão: Telas da aplicação - Whatever/Escopo, responsável por: - Lógica de tela (interação com usuário) - Dados da visão (NÃO do modelo!)
  • 27. Separação de Responsabilidades Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 27 • Controlador - Dá acesso o escopo - Cuidado para não encher de tralha! Mas como? • Serviços • Fábricas • Valores • Constantes
  • 28. Controlador, Escopo e Visão Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 28
  • 29. Controlador Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 29
  • 30. Controlador na Visão Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 30
  • 31. Resultado Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 31
  • 32. Fábricas, Serviços e Afins Empacotando código reutilizável
  • 33. Fábricas, Serviços e Afins • Valores: - Injetável em serviços, fábricas e controladores - Qualquer tipo de dado Javascript • Number, String, Object, etc • Constantes - Injetável em serviços, fábricas, controladores e na função de configuração de um modulo - Normalmente valores fixos da sua aplicação • Ex: endereço de backend, roles (permissões), etc Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 33
  • 34. Fábricas, Serviços e Afins • Valores: • Constantes Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 34
  • 35. Fábricas, Serviços e Afins • Serviços: - Funcionalidades reutilizáveis - Só é instanciado uma única vez: SINGLETON - Portanto, cuidado, dados internos são compartilhados. • Factories - Fábricas de objetos: cria instâncias de objetos com estrutura comum Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 35
  • 36. Fábricas, Serviços e Afins • Serviços: • Factories Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 36
  • 37. Diretivas Ensine ao HTML novos truques
  • 38. Diretivas • Permite Componentização • Algumas Bibliotecas: - AngularUI • http://angular-ui.github.io/ - Ionic (Mobile) • http://ionicframework.com/ • Vamos brincar! Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 38
  • 39. 39 • O que faz? - Texto em seu atributo fica vermelho • Javascript Diretiva Simples
  • 40. 40 • HTML - Diretiva deve estar dentro do element ng-app • Resultado Nosso relógio
  • 41. Conceitos Avançados Começando a diversão!
  • 42. 42 • Arghhhh, meu controlador precisa dos serviços - $location - $routeParams • Somente o Angular poderá nos salvar Injeção de Dependência
  • 43. 43 Injeção de Dependência para serviços conhecidos • Nas funções do Angular - Basta inserir parâmetro com nome da dependência • Para injetar seus serviços - Certifique que o script de seus serviços foi carregado previamente. • Cuidado ao minificar
  • 44. • Meu serviço • Injetando 44 Injetando Meu serviço
  • 45. Modularização • Criar módulos com meus components • Criando um modulo • Uso modulo no meu app
  • 46. Modularização • Agora posso injector o valor que estava no modulo em parte do meu app • Meu controlador
  • 47. 47 • Unitário - Karma Runner e Angular-mocks • E2E, Integração - Protractor • Automatizando funcionamento do browser Testabilidade
  • 48. E mais • Filtros Customizados • Iteradores específicos para opçoes de <select></select> • Gerenciador de Rotas • Animaçoes • Templates…… • I18n, I10n
  • 49. Referências Iniciando sobre o ombro de gigantes!
  • 50. Referências • Pro Angular – Adam Freeman • Mastering Web Application Development with AngularJS - Peter Bacon Darwin, Pawel Kozlowski • http://www.angularjs.org • Vídeos - ngConf no Youtube - Egghead.io - Pluralsight • Github, Google  Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 50
  • 51. Materiais • Apresentação - bit.ly/1vvHjmi • Slides - slideshare.net/saulovenancio Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 51
  • 52. Obrigado! Saulo Venâncio svenancio@nonlinear.ca @saulovenancio

×