0
Desenvolvendo Fácil com
Por: Saulo Venancio
@saulovenancio
svenancio@nonlinear.ca
Introdução
Características do
AngularJS
Data-binding de 2 vias
Classes Dinâmicas
Repetidores
Validações
Filtros
Separação ...
Introdução
Quem sou eu?
• Desenvolvedor Backend desde 2009
• Instrutor de Programação na Voffice, Florianópolis
• Atuou com .NET / Ja...
O Problema
• Como habilitar div quando checkbox for selecionado?
• Com Jquery
Toronto | Ottawa | New York | Calgary | São ...
Codificar é divertido?
Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 6
Sim, é divertido!
Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 7
• Com AngularJS
Por que aprender?
Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 8Vamos Conhecer!
Características do AngularJS
Características
• Data Binding de 2 vias
• Separação Lógica e Visão
• Testabilidade (Unitários e Integração)
• Componentiz...
Data binding de 2 vias
Nunca foi tão tão facil manter a view atualizada
Data Binding de 2 vias
• Código
• Resultado
• Mágica? Não. Dirty checking.
Toronto | Ottawa | New York | Calgary | São Pau...
Classes Dinâmicas
Controle a aparência
Classes Dinâmicas
• Código
• Resultado
Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 14
Repetidores
Itere em coleções
Repetidores
• Fácil iterar em coleções de valores
• Cada rota tem sua própria div
Toronto | Ottawa | New York | Calgary | ...
Repetidores
• Em objetos
• Resultado:
Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 17
Validações
De vários tipos
Validações por Padrões/Regex
Validações de Mínimo/Máximo
Validações de Obrigatoriedade
Filtros
Somente o que você deseja
Filtros Simples/Avançados
Ordene e Inverta
Separação de Responsabilidades
Separação de Responsabilidades
Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 26
• AngularJS é MVW
- No...
Separação de Responsabilidades
Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 27
• Controlador
- Dá ace...
Controlador, Escopo e Visão
Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 28
Controlador
Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 29
Controlador na Visão
Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 30
Resultado
Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 31
Fábricas, Serviços e Afins
Empacotando código reutilizável
Fábricas, Serviços e Afins
• Valores:
- Injetável em serviços, fábricas e controladores
- Qualquer tipo de dado Javascript...
Fábricas, Serviços e Afins
• Valores:
• Constantes
Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 34
Fábricas, Serviços e Afins
• Serviços:
- Funcionalidades reutilizáveis
- Só é instanciado uma única vez: SINGLETON
- Porta...
Fábricas, Serviços e Afins
• Serviços:
• Factories
Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 36
Diretivas
Ensine ao HTML novos truques
Diretivas
• Permite Componentização
• Algumas Bibliotecas:
- AngularUI
• http://angular-ui.github.io/
- Ionic (Mobile)
• h...
39
• O que faz?
- Texto em seu atributo fica vermelho
• Javascript
Diretiva Simples
40
• HTML
- Diretiva deve estar dentro do element ng-app
• Resultado
Nosso relógio
Conceitos Avançados
Começando a diversão!
42
• Arghhhh, meu controlador precisa dos serviços
- $location
- $routeParams
• Somente o Angular
poderá nos salvar
Injeçã...
43
Injeção de Dependência
para serviços conhecidos
• Nas funções do Angular
- Basta inserir parâmetro com nome da dependên...
• Meu serviço
• Injetando
44
Injetando Meu serviço
Modularização
• Criar módulos com meus components
• Criando um modulo
• Uso modulo no meu app
Modularização
• Agora posso injector o valor que estava no modulo em
parte do meu app
• Meu controlador
47
• Unitário
- Karma Runner e Angular-mocks
• E2E, Integração
- Protractor
• Automatizando funcionamento do browser
Testa...
E mais
• Filtros Customizados
• Iteradores específicos para opçoes de
<select></select>
• Gerenciador de Rotas
• Animaçoes...
Referências
Iniciando sobre o ombro de gigantes!
Referências
• Pro Angular – Adam Freeman
• Mastering Web Application Development with AngularJS - Peter
Bacon Darwin, Pawe...
Materiais
• Apresentação
- bit.ly/1vvHjmi
• Slides
- slideshare.net/saulovenancio
Toronto | Ottawa | New York | Calgary | ...
Obrigado!
Saulo Venâncio
svenancio@nonlinear.ca
@saulovenancio
Upcoming SlideShare
Loading in...5
×

Desenvolvimento Fácil com AngularJS DevFestSul

750

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
750
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
20
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×