Post on 26-May-2015
description
Client logo
Desenvolvendo Fácil com
Por: Saulo Venancio@saulovenancio
svenancio@nonlinear.ca
Client logo
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
Client logo
Introdução
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
O Problema• Como habilitar div quando checkbox for selecionado?
• Com Jquery
Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 5
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 8
Vamos Conhecer!
Client logo
Características do AngularJS
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
Client logo
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 Paulo | Florianópolis 12
Client logo
Classes Dinâmicas
Controle a aparência
Classes Dinâmicas
• Código
• Resultado
Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 14
Client logo
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 | São Paulo | Florianópolis 16
Repetidores• Em objetos
• Resultado:
Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 17
Client logo
Validações
De vários tipos
Validações por Padrões/Regex
Validações de Mínimo/Máximo
Validações de Obrigatoriedade
Client logo
Filtros
Somente o que você deseja
Filtros Simples/Avançados
Ordene e Inverta
Client logo
Separação de Responsabilidades
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!)
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
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
Client logo
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• 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
<body ng-app="todo"> <ion-side-menus> <!-- Center content --> <ion-side-menu-content> <ion-header-bar class="bar-dark"> <h1 class="title">Todo</h1> </ion-header-bar> <ion-content> </ion-content> </ion-side-menu-content> <!-- Left menu --> <ion-side-menu side="left"> <ion-header-bar class="bar-dark"> <h1 class="title">Projects</h1> </ion-header-bar> </ion-side-menu> </ion-side-menus> </body>
Fábricas, Serviços e Afins
• Valores:
• Constantes
Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 34
<body ng-app="todo"> <ion-side-menus> <!-- Center content --> <ion-side-menu-content> <ion-header-bar class="bar-dark"> <h1 class="title">Todo</h1> </ion-header-bar> <ion-content> </ion-content> </ion-side-menu-content> <!-- Left menu --> <ion-side-menu side="left"> <ion-header-bar class="bar-dark"> <h1 class="title">Projects</h1> </ion-header-bar> </ion-side-menu> </ion-side-menus> </body>
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
<body ng-app="todo"> <ion-side-menus> <!-- Center content --> <ion-side-menu-content> <ion-header-bar class="bar-dark"> <h1 class="title">Todo</h1> </ion-header-bar> <ion-content> </ion-content> </ion-side-menu-content> <!-- Left menu --> <ion-side-menu side="left"> <ion-header-bar class="bar-dark"> <h1 class="title">Projects</h1> </ion-header-bar> </ion-side-menu> </ion-side-menus> </body>
Fábricas, Serviços e Afins• Serviços:
• Factories
Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 36
<body ng-app="todo"> <ion-side-menus> <!-- Center content --> <ion-side-menu-content> <ion-header-bar class="bar-dark"> <h1 class="title">Todo</h1> </ion-header-bar> <ion-content> </ion-content> </ion-side-menu-content> <!-- Left menu --> <ion-side-menu side="left"> <ion-header-bar class="bar-dark"> <h1 class="title">Projects</h1> </ion-header-bar> </ion-side-menu> </ion-side-menus> </body>
Client logo
Diretivas
Ensine ao HTML novos truques
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
<body ng-app="todo"> <ion-side-menus> <!-- Center content --> <ion-side-menu-content> <ion-header-bar class="bar-dark"> <h1 class="title">Todo</h1> </ion-header-bar> <ion-content> </ion-content> </ion-side-menu-content> <!-- Left menu --> <ion-side-menu side="left"> <ion-header-bar class="bar-dark"> <h1 class="title">Projects</h1> </ion-header-bar> </ion-side-menu> </ion-side-menus> </body>
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
Client logo
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ção de Dependência
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
• 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
Testabilidade
E mais
• Filtros Customizados
• Iteradores específicos para opçoes de <select></select>
• Gerenciador de Rotas
• Animaçoes
• Templates……
• I18n, I10n
Client logo
Referências
Iniciando sobre o ombro de gigantes!
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
Materiais
• Apresentação
- bit.ly/1vvHjmi
• Slides
- slideshare.net/saulovenancio
Toronto | Ottawa | New York | Calgary | São Paulo | Florianópolis 51
Obrigado!
Saulo Venânciosvenancio@nonlinear.ca
@saulovenancio