Vous êtes sur la page 1sur 70

ANGULAR JS

O que veremos?
O

que ?

Arquitetura

Mdulos

Controladores

Fbricas

Injeo
Servios
Acesso

de Dependncias

REST

a servios externos

Utilizando
Mdulo

$http

ngResource

ANGULAR JS

- O QUE ?

https://angularjs.org/

Mantida
Desde

(boa parte) pelo Google

2009

Facilita

o desenvolvimento de aplicaes de nica pgina (SPA)

Utilizado

por:

Wolfram
Portal

Alpha;

NBC;

Intel;

pelo

menos mais 8.400 sites.

FILOSOFIA
Programao
Interface

declarativa

do usurio

Conexo

entre
componentes
Programao
Lgica

imperativa

de negcios

H?!

PROGRAMAO DECLARATIVA
O

que ao invs de como

Ex:
Aqui

comea a aplicao;

Os

produtos devem ser exibidos nesse local;

Se

esse boto for clicado chame essa funo.

EXEMPLO

EXEMPLO

Carregamento do
Angular.js

EXEMPLO

Carregamento do script da
aplicao

EXEMPLO
Parte
declarativa

EXEMPLO
Parte
declarativa

Ateno
aos
atributos
ng-xxx

EXEMPLO
Essa a aplicao
LojaOnline

EXEMPLO
Os dados desse bloco vm do
controlador ProdutosCtrl

EXEMPLO

Repita essa tag (li) para cada


produto da lista de produtos
(controlador)

EXEMPLO

Exiba o nome do produto e o seu


valor

E A PROGRAMAO IMPERATIVA

a parte que diz COMO as coisas so feitas !

ideia separar e organizar:

Apresentao

(view);

Processamento
Lgica

e fluxo da informao (controladores);

de negcio (fbricas e servios / model);

Arquitetura

MVC !

ARQUITETURA MVC

Controller
Model

View

ARQUITETURA MVC
Inicializao:
O controller prepara os dados que
sero exibidos assim que a pgina for
exibida.

Controller

1
Model
View

ARQUITETURA MVC

Controller

2
Model

Esses dados podem


ser solicitados ao
model.

View

ARQUITETURA MVC

3
Controller

Os dados so ento
preparados para ser
exibidos ao usurio

Model

View

ARQUITETURA MVC

Controller
Model

4
Os dados prontos so enviados para
a view que os formata e exibe

View

EXEMPLO DE
CONTROLADOR

APP.JS

Definio do mdulo principal da


aplicao

APP.JS
Criando um controlador
ProdutosCtrl

APP.JS

No $scope deve ser definido os dados e


funes (model) que sero acessveis
da pgina (view)

APP.JS

Criando um array de
produtos disponveis para
a pgina

COMO TUDO SE CONECTA

index.html

app.j

index.html

app.j

index.html

app.j

index.html

app.j

index.html

app.j

index.html

app.j

index.html

app.j

RESULTADO

PRINCIPAIS
CONCEITOS

PRINCIPAIS CONCEITOS

Diretivas

Expresses

Mdulos

Controladores

Two way

data binding

Fbricas

Injeo

de Dependncias

DIRETIVAS
Atributos

ng-xxx;

Ex:
ng-app,

ng-controller, ng-repeat, ng-click;

Programao
Ligam

declarativa;

a camada de apresentao (view) com os controladores;

EXPRESSES
{{

cdigo JavaScript }}

cdigo avaliado e seu resultado exibido;

Acessa

os dados definidos no $scope (model) do controlador ativo;

Ex:
{{

2 + 2 }}

<h1>

H {{ produtos.length }} produtos cadastrados </h1>

MDULOS
Uma

aplicao Angular dividida em mdulos;

Cada

mdulo pode conter controladores e fbricas de componentes;

Um

mdulo pode depender de outros;

Criao
var

de um mdulo:

modulo = angular.module(nome do mdulo, [dependncias]);

Ex:
var

dados = angular.module(Dados, [ ]);

var

financeiro = angular.module(Financeiro, [Dados]);

MDULOS
Uma

aplicao Angular dividida em mdulos;

Cada

mdulo pode conter controladores e fbricas de componentes;

Um

mdulo pode depender de outros;

Criao
var

de um mdulo:

modulo = angular.module(nome do mdulo, [dependncias]);

Ex:
var

dados = angular.module(Dados, [ ]);

var

financeiro = angular.module(Financeiro, [Dados]);


O mdulo Financeiro depende do mdulo
Dados

CONTROLADORES
Realizam
So

o tratamento e o direcionamento da informao;

criados dentro dos mdulos:

modulo.controller(nome

do controlador, function(dependncias) { cdigo });

Ex:
app.controller('LojaCtrl',

function ($scope, Produto) { });

CONTROLADORES
Realizam
So

o tratamento e o direcionamento da informao;

criados dentro dos mdulos:

modulo.controller(nome

do controlador, function(dependncias) { cdigo });

Ex:
app.controller('LojaCtrl',

function ($scope, Produto) { });

O controlador LojaCtrl depende do componente Produto

LIGAO EM DUAS DIREES

possvel conectar elemento visuais com dados do escopo:

alterao feita em um lado refletir automaticamente no ouro lado;

Como
Na

fazer:

view, pode-se conectar um elemento de entrada com um valor do escopo:

<input

type=text ng-model=nome/>

Tudo

o que for digitado nesse campo, ser armazenado no valor nome do escopo, e
se esse valor for alterado, o contedo do campo tambm ser;

expresses so automaticamente atualizadas quando o valores que ela


exibe so alterados.

Observao:

LIGAO EM DUAS DIREES- EXEMPLO

LIGAO EM DUAS DIREES- EXEMPLO

Campo de texto ligado varivel


nome

LIGAO EM DUAS DIREES- EXEMPLO

Essa tag e seu contedo s sero exibidos


se houver um valor nome definido no
escopo

RESULTADO

medida que voc digita o valor do campo, o


texto abaixo atualizado automaticamente
!

FBRICAS
Definem
Lugar

e criam componentes reutilizveis;

perfeito para implementar a lgica de negcio da aplicao;

Criao

de uma fbrica:

modulo.factory(nome

da fbrica, function(dependncias) { cdigo });

Exemplo:
app.factory('Calculadora',

function( ) {

return {
soma: function(a,
};
});

b) { return a + b; }

INJEO DE DEPENDNCIAS

As

dependncias so automaticamente instanciadas e disponibilizadas para uso, a


partir de seu nome;

Ex:

var financeiro = angular.module(Financeiro,


[Calculadora]);
Nesse

caso, dentro do mdulo financeiro, o componente Calculadora estar


disponvel, ser possvel utiliz-lo em um controlador desse mdulo, por exemplo:

financeiro.controller('FinancasCtrl', function ($scope, Calculadora) {


$scope.resultado = Calculadora.soma(2, 3);

SERVIOS REST
O

que so ?

Histria

Verbos

Exemplos

REST OU RESTFUL WEB SERVICES


Representational

State Transfer;

Forma

de disponibilizar servios na web utilizando as aes do protocolo HTTP


(verbos):

GET

/ PUT / POST / DELETE;

Padro
Os

mais utilizado para a troca de informaes entre aplicaes;

dados normalmente so trocados no formado JSON ou XML;

Exemplo

JSON:

- Requisio GET para buscar o endereo de um CEP no formato

http://cep.correiocontrol.com.br/58402000.json

Retorno:

ANGULAR.JS UTILIZANDO UM SERVIO REST


Para

o consumo e envio rpidos de dados, pode-se utilizar o mdulo $http;

Requisio

GET:

$http.get(url).then(funcao_sucesso,
Requisio

funcao_erro);

POST:

$http.post(url).then(funcao_sucesso,

funcao_erro);

EXEMPLO $HTTP - INDEX.HTML

EXEMPLO $HTTP - INDEX.HTML

Campo de texto ligado varivel


cep

EXEMPLO $HTTP - INDEX.HTML

Boto que quando clicado chama a funo


buscar

EXEMPLO $HTTP - INDEX.HTML

Essa tag e seu contedo s sero exibidos


se houver um valor endereco definido no
escopo

EXEMPLO $HTTP - INDEX.HTML- APP.JS

EXEMPLO $HTTP - APP.JS


Utilizaremos o componente
$http

EXEMPLO $HTTP - APP.JS

URL base do servio


REST

EXEMPLO $HTTP - APP.JS

Varivel cep ligada com o campo


de texto na pgina

EXEMPLO $HTTP - APP.JS

Funo buscar chamada quando


o boto da pgina clicado

EXEMPLO $HTTP - APP.JS

Requisio GET feita ao servio,


passando o cep digitado pelo
usurio

EXEMPLO $HTTP - APP.JS

Os dados retornados pela requisio so


atribudos varivel endereco do
escopo.

API PARA ACESSO A RECURSOS


Entidades

(produtos, alunos, vendas, etc) so representadas como recursos e, pelo


padro REST, so acessadas e modificadas por uma api no formato:
Verbo HTTP

URL

Descrio

GET

Retorna todos

GET

/id

Retorna um recurso

POST

Adiciona um recurso

PUT

/id

Modifica um recurso

DELETE

/id

Remove um recurso

ANGULAR.JS UTILIZANDO UMA API REST


A

biblioteca padro do Angular.js disponibiliza um mdulo para acesso de APIs


RESTful chamado Angular Resource (ngResource);

Para

utiliz-lo, necessrio:

Carregar

o script: /angular-resource.js

Declarar

a dependncia do mdulo: [ngResource]

Criar

uma fbrica para cada API:

modulo.factory('Recurso', function($resource) {
return $resource('URL/:id');
});

EXEMPLO
Carregar

um conjunto de posts de um blog:

RESUMO DAS FUNES DO NG-RESOURCE


Obter

registros:

query(parmetros
Obter

um registro:

get(identificador
Salvar

de busca);

do registro);

registro:

$save(
Atualizar

);
registro:

update(identificador,
Remover

registro:

delete(identificador)

novos valores);

CONCLUSES
H

vrios plugins:

http://ngmodules.org/

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

possvel desenvolver aplicaes para dispositivos portteis:

Ionic

Framework - http://ionicframework.com/

Exemplos

disponveis no github.