Top Banner
67

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

Apr 11, 2017

Download

Software

Rodrigo Fortes
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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