Desenvolvimento Fácil com AngularJS DevFestSul

Client logo

Desenvolvendo Fácil com

Por: Saulo Venancio@saulovenancio

[email protected]

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


Codificar é divertido?


Sim, é divertido!


• Com AngularJS

Por que aprender?


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.


Client logo

Classes Dinâmicas

Controle a aparência

Classes Dinâmicas

• Código

• Resultado


Client logo

Repetidores

Itere em coleções

Repetidores• Fácil iterar em coleções de valores

• Cada rota tem sua própria div


Repetidores• Em objetos

• Resultado:


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




• 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!)



• 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


Controlador


Controlador na Visão


Resultado


Client logo


Empacotando código reutilizável

• 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


<body ng-app="todo"> <ion-side-menus>  <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>  <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>


• Valores:

• Constantes




• 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



Fábricas, Serviços e Afins• Serviços:

• Factories



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!



http://angular-ui.github.io/

http://angular-ui.github.io/

http://ionicframework.com/

http://ionicframework.com/

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

http://www.angularjs.org/

http://www.angularjs.org/

Materiais

• Apresentação

- bit.ly/1vvHjmi

• Slides

- slideshare.net/saulovenancio


Obrigado!

Saulo Venâ[email protected]

@saulovenancio

Desenvolvimento Fácil com AngularJS DevFestSul

Technology

Transcript of Desenvolvimento Fácil com AngularJS DevFestSul