Professional Documents
Culture Documents
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
2009
Facilita
Utilizado
por:
Wolfram
Portal
Alpha;
NBC;
Intel;
pelo
FILOSOFIA
Programao
Interface
declarativa
do usurio
Conexo
entre
componentes
Programao
Lgica
imperativa
de negcios
H?!
PROGRAMAO DECLARATIVA
O
Ex:
Aqui
comea a aplicao;
Os
Se
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
EXEMPLO
E A PROGRAMAO IMPERATIVA
Apresentao
(view);
Processamento
Lgica
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
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
APP.JS
Criando um controlador
ProdutosCtrl
APP.JS
APP.JS
Criando um array de
produtos disponveis para
a pgina
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,
Programao
Ligam
declarativa;
EXPRESSES
{{
cdigo JavaScript }}
Acessa
Ex:
{{
2 + 2 }}
<h1>
MDULOS
Uma
Cada
Um
Criao
var
de um mdulo:
Ex:
var
var
MDULOS
Uma
Cada
Um
Criao
var
de um mdulo:
Ex:
var
var
CONTROLADORES
Realizam
So
modulo.controller(nome
Ex:
app.controller('LojaCtrl',
CONTROLADORES
Realizam
So
modulo.controller(nome
Ex:
app.controller('LojaCtrl',
Como
Na
fazer:
<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;
Observao:
RESULTADO
FBRICAS
Definem
Lugar
Criao
de uma fbrica:
modulo.factory(nome
Exemplo:
app.factory('Calculadora',
function( ) {
return {
soma: function(a,
};
});
b) { return a + b; }
INJEO DE DEPENDNCIAS
As
Ex:
SERVIOS REST
O
que so ?
Histria
Verbos
Exemplos
State Transfer;
Forma
GET
Padro
Os
Exemplo
JSON:
http://cep.correiocontrol.com.br/58402000.json
Retorno:
Requisio
GET:
$http.get(url).then(funcao_sucesso,
Requisio
funcao_erro);
POST:
$http.post(url).then(funcao_sucesso,
funcao_erro);
URL
Descrio
GET
Retorna todos
GET
/id
Retorna um recurso
POST
Adiciona um recurso
PUT
/id
Modifica um recurso
DELETE
/id
Remove um recurso
Para
utiliz-lo, necessrio:
Carregar
o script: /angular-resource.js
Declarar
Criar
modulo.factory('Recurso', function($resource) {
return $resource('URL/:id');
});
EXEMPLO
Carregar
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/
Ionic
Framework - http://ionicframework.com/
Exemplos
disponveis no github.