Desenvolvimento Fácil com AngularJS DevFestSul

1,289 views
1,071 views

Published on

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

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,289
On SlideShare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
33
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Desenvolvimento Fácil com AngularJS DevFestSul

  1. 1. Desenvolvendo Fácil com Por: Saulo Venancio @saulovenancio svenancio@nonlinear.ca
  2. 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. 3. Introdução
  4. 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. 5. O Problema • Como habilitar div quando checkbox for selecionado? • Com Jquery Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 5
  6. 6. Codificar é divertido? Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 6
  7. 7. Sim, é divertido! Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 7 • Com AngularJS
  8. 8. Por que aprender? Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 8Vamos Conhecer!
  9. 9. Características do AngularJS
  10. 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. 11. Data binding de 2 vias Nunca foi tão tão facil manter a view atualizada
  12. 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. 13. Classes Dinâmicas Controle a aparência
  14. 14. Classes Dinâmicas • Código • Resultado Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 14
  15. 15. Repetidores Itere em coleções
  16. 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. 17. Repetidores • Em objetos • Resultado: Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 17
  18. 18. Validações De vários tipos
  19. 19. Validações por Padrões/Regex
  20. 20. Validações de Mínimo/Máximo
  21. 21. Validações de Obrigatoriedade
  22. 22. Filtros Somente o que você deseja
  23. 23. Filtros Simples/Avançados
  24. 24. Ordene e Inverta
  25. 25. Separação de Responsabilidades
  26. 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. 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. 28. Controlador, Escopo e Visão Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 28
  29. 29. Controlador Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 29
  30. 30. Controlador na Visão Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 30
  31. 31. Resultado Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 31
  32. 32. Fábricas, Serviços e Afins Empacotando código reutilizável
  33. 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. 34. Fábricas, Serviços e Afins • Valores: • Constantes Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 34
  35. 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. 36. Fábricas, Serviços e Afins • Serviços: • Factories Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 36
  37. 37. Diretivas Ensine ao HTML novos truques
  38. 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. 39 • O que faz? - Texto em seu atributo fica vermelho • Javascript Diretiva Simples
  40. 40. 40 • HTML - Diretiva deve estar dentro do element ng-app • Resultado Nosso relógio
  41. 41. Conceitos Avançados Começando a diversão!
  42. 42. 42 • Arghhhh, meu controlador precisa dos serviços - $location - $routeParams • Somente o Angular poderá nos salvar Injeção de Dependência
  43. 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. 44. • Meu serviço • Injetando 44 Injetando Meu serviço
  45. 45. Modularização • Criar módulos com meus components • Criando um modulo • Uso modulo no meu app
  46. 46. Modularização • Agora posso injector o valor que estava no modulo em parte do meu app • Meu controlador
  47. 47. 47 • Unitário - Karma Runner e Angular-mocks • E2E, Integração - Protractor • Automatizando funcionamento do browser Testabilidade
  48. 48. E mais • Filtros Customizados • Iteradores específicos para opçoes de <select></select> • Gerenciador de Rotas • Animaçoes • Templates…… • I18n, I10n
  49. 49. Referências Iniciando sobre o ombro de gigantes!
  50. 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. 51. Materiais • Apresentação - bit.ly/1vvHjmi • Slides - slideshare.net/saulovenancio Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 51
  52. 52. Obrigado! Saulo Venâncio svenancio@nonlinear.ca @saulovenancio

×