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.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Desenvolvimento Fácil com AngularJS DevFestSul

538
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
538
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
11
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