Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

67

Transcript of Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

Page 1: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT
Page 2: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

AngularJS

Rodrigo Fortes

Page 3: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

• Diretivas• Filtros• Validar Formulários• WebService

Cronograma

Page 4: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT
Page 5: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

Quem esta usando AngularJS?

Page 6: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

• Produtividade• Separação de responsabilidades• Extensão da linguagem HTML• POJO• Injeção de dependências• Two-way data binding• Testabilidade• Comunidade

Razões para Utililizar AngularJS

Page 7: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

Todo código roda no cliente?

Page 8: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT
Page 9: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT
Page 10: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT
Page 11: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

Codigo Minificado

Page 12: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

Separação de Responsabilidades

Page 13: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

View

Page 14: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

Controller

Page 15: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

Scope

Page 16: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

Vamos ver a prática

Page 17: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT
Page 18: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT
Page 19: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT
Page 20: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT
Page 21: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT
Page 22: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT
Page 23: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

São extensões da linguagem HTML que permitem a implementação de novos comportamentos, de forma

declarativa.

Diretivas

Page 24: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

• ngApp• ngController• ngBind• ngModel• ngRepeat• ngShow• ngHide• ngClick

Principais Diretivas

Page 25: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

ngApp

Page 26: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

ngApp

Page 27: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

ngController

Page 28: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

ngBind

Page 29: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

ngBind

Page 30: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

ngRepeat

Page 31: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

ngRepeat

Page 32: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

ngModel

Page 33: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

ngModel

Page 34: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

ngClick

Page 35: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

ngClick

Page 36: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

https://docs.angularjs.org/api

Outras Diretivas

Page 37: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

Transformam resultado de uma expressão, realizando operações como formatação de data, conversão de

moeda e ordenação de array.

Filtros

Page 38: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

uppercase e lowercasedatefiltercurrency

Principais Filtros

Page 39: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

uppercase e lowercase

Page 40: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

uppercase e lowercase

Page 41: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

filter

Page 42: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

filter

Page 43: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

date

Page 44: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

date

Page 45: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

currency

Page 46: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

currency

Page 47: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

ngRequiredngMinlength e ngMaxlength$error$pristine e $dirty

Validar Formulários

Page 48: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

ngRequired

Page 49: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

ngMinlength e ngMaxlength

Page 50: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

$error

Page 51: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

$error

Page 52: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

$pristine

Page 53: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

$pristine

Page 54: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

A ideia de internet das coisas, de modo geral, envolve a inclusão de objetos físicos a uma rede, os quais

interagem, são identificados ou monitorados entre si ou quem os controla.

E a IOT?

Page 55: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT
Page 56: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

HTTP, JSON, REST e AJAXcom AngularJS

Integrando o BackEnd

Page 57: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

• GET deve ser usado para “leitura”, por exemplo listar os detalhes de um recurso;

• POST deve ser usado para adicionar novos recursos;

• PUT deve ser utilizado para alterar recursos já existentes;

• DELETE para apagar recursos.

Métodos HTTP

Page 58: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT
Page 59: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

Neste exemplo utilizaremos a API Java com auxilio do JAXB, especificação adicionada a partir da JDK 6.

Precisamos também incluir o jersey-json.jar no build path do nosso projeto.

Web Service REST em JAVA

Page 60: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT

JAX-RS

Page 61: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT
Page 62: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT
Page 63: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT
Page 64: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT
Page 65: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT
Page 66: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT
Page 67: Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT