Você está na página 1de 133

Abraando o MVC Client Side

Sergio Azevedo
sergio.junior@caelum.com.br
@sergioazevedo
http://sagadoprogramador.com.br
Saturday, October 19, 13

Arquitetura padro
de uma Aplicao Web
Server Side
Client Side

t
s
e
u
q
e
r
p
tt

htt
pr
esp
on

Controlador

View
Template

se
html / json /xml

Saturday, October 19, 13

Modelo
View
Renderizada

Ento qual o problema?


Saturday, October 19, 13

Qual o problema?
JQuery resolve isso muito bem
Saturday, October 19, 13

A necessidade de um framework
MVC client-side, fica clara quando
voc comea a manipular em suas
pginas, no s HTML mas tambm
dados.

fonte: http://jster.net
http://jster.net/blog/why-should-you-use-client-side-mvc-framework#.UmH4-ZTwIjE

Saturday, October 19, 13

E o framework MVC
client-side que veremos hoje ser:

Saturday, October 19, 13

VISO GERAL

Saturday, October 19, 13

VISO GERAL
Framework

Saturday, October 19, 13

MVC Javascript, para aplicaes web dinamicas

VISO GERAL
Framework
Suporta

Saturday, October 19, 13

MVC Javascript, para aplicaes web dinamicas

HTML 5

VISO GERAL
Framework

MVC Javascript, para aplicaes web dinamicas

Suporta

HTML 5

Extende

o HTML (Diretivas)

Saturday, October 19, 13

VISO GERAL
Framework

MVC Javascript, para aplicaes web dinamicas

Suporta

HTML 5

Extende

o HTML (Diretivas)

Usa

abordagem declarativa para expressar logica nas views

Saturday, October 19, 13

VISO GERAL
Framework

MVC Javascript, para aplicaes web dinamicas

Suporta

HTML 5

Extende

o HTML (Diretivas)

Usa

abordagem declarativa para expressar logica nas views

Injeo

Saturday, October 19, 13

de dependencias (de graa)

VISO GERAL
Framework

MVC Javascript, para aplicaes web dinamicas

Suporta

HTML 5

Extende

o HTML (Diretivas)

Usa

abordagem declarativa para expressar logica nas views

Injeo
Two

de dependencias (de graa)

way data binding

Saturday, October 19, 13

VISO GERAL
Framework

MVC Javascript, para aplicaes web dinamicas

Suporta

HTML 5

Extende

o HTML (Diretivas)

Usa

abordagem declarativa para expressar logica nas views

Injeo
Two

de dependencias (de graa)

way data binding

Mantido
Saturday, October 19, 13

pela Google

COMEANDO
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/
1.0.8/angular.min.js"></script>
script>
</head>
<body>
<div>
<p>Digite seu nome: <input ng-model="nome" placeholder="Seu
nome aqui..."></p>
<p>{{nome}}</p>
</div>
</body>
</html>

Saturday, October 19, 13

COMEANDO
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/
1.0.8/angular.min.js"></script>
script>
</head>
<body>
<div>
<p>Digite seu nome: <input ng-model="nome" placeholder="Seu
nome aqui..."></p>
<p>{{nome}}</p>
</div>
</body>
</html>

carrega o angular

Saturday, October 19, 13

COMEANDO
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/
1.0.8/angular.min.js"></script>
script>
</head>
<body>
<div>
<p>Digite seu nome: <input ng-model="nome" placeholder="Seu
nome aqui..."></p>
<p>{{nome}}</p>
</div>
</body>
</html>

Saturday, October 19, 13

COMEANDO
<!doctype html>
<html ng-app> bootstrap do angular
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/
1.0.8/angular.min.js"></script>
script>
</head>
<body>
<div>
<p>Digite seu nome: <input ng-model="nome" placeholder="Seu
nome aqui..."></p>
<p>{{nome}}</p>
</div>
</body>
</html>

Saturday, October 19, 13

COMEANDO
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/
1.0.8/angular.min.js"></script>
script>
</head>
<body>
<div>
<p>Digite seu nome: <input ng-model="nome" placeholder="Seu
nome aqui..."></p>
<p>{{nome}}</p>
</div>
</body>
</html>

Saturday, October 19, 13

COMEANDO
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/
1.0.8/angular.min.js"></script>
script>
</head>
<body>
cria a variavel de modelo nome
<div>
<p>Digite seu nome: <input ng-model="nome" placeholder="Seu
nome aqui..."></p>
<p>{{nome}}</p>
</div>
</body>
</html>

Saturday, October 19, 13

COMEANDO
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/
1.0.8/angular.min.js"></script>
script>
</head>
<body>
<div>
<p>Digite seu nome: <input ng-model="nome" placeholder="Seu
nome aqui..."></p>
<p>{{nome}}</p>
</div>
</body>
</html>

Saturday, October 19, 13

COMEANDO
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/
1.0.8/angular.min.js"></script>
script>
</head>
<body>
<div>
<p>Digite seu nome: <input ng-model="nome" placeholder="Seu
nome aqui..."></p>
<p>{{nome}}</p> exibe o conteudo da variavel nome
</div>
</body>
</html>

Saturday, October 19, 13

COMEANDO
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/
1.0.8/angular.min.js"></script>
script>
</head>
<body>
<div>
<p>Digite seu nome: <input ng-model="nome" placeholder="Seu
nome aqui..."></p>
<p>{{nome}}</p>
</div>
</body>
</html>

Saturday, October 19, 13

WORK FLOW BASICO

Saturday, October 19, 13

WORK FLOW BASICO


1. O browser recebe o html e faz executa o DOM parser

Saturday, October 19, 13

WORK FLOW BASICO


1. O browser recebe o html e faz executa o DOM parser
2. O browser carrega o script do angular.js

Saturday, October 19, 13

WORK FLOW BASICO


1. O browser recebe o html e faz executa o DOM parser
2. O browser carrega o script do angular.js
3. Angular busca pela diretiva ng-app

Saturday, October 19, 13

WORK FLOW BASICO


1. O browser recebe o html e faz executa o DOM parser
2. O browser carrega o script do angular.js
3. Angular busca pela diretiva ng-app
4. O angular cria o servio de compilao da pagina ($compile)
e o escopo raiz ($rootScope)

Saturday, October 19, 13

WORK FLOW BASICO


1. O browser recebe o html e faz executa o DOM parser
2. O browser carrega o script do angular.js
3. Angular busca pela diretiva ng-app
4. O angular cria o servio de compilao da pagina ($compile)
e o escopo raiz ($rootScope)
5. Angular usa o $compile para compilar o DOM e liga-lo ao
$rootScope. (HTML Compiler)

Saturday, October 19, 13

HTML COMPILER

Saturday, October 19, 13

HTML COMPILER
Compile: Percorre o DOM em busca de diretivas e entrega
como resultado uma funo de link

Saturday, October 19, 13

HTML COMPILER
Compile: Percorre o DOM em busca de diretivas e entrega
como resultado uma funo de link
Link: Combina as diretivas com o escopo ($scope) e gera
assim a viso. Qualquer atlerao em um modelo de um
scope ser refletida na viso, assim como qualquer interao
do usuario com a viso ser refletida no scope.

Saturday, October 19, 13

HTML COMPILER
Compile: Percorre o DOM em busca de diretivas e entrega
como resultado uma funo de link
Link: Combina as diretivas com o escopo ($scope) e gera
assim a viso. Qualquer atlerao em um modelo de um
scope ser refletida na viso, assim como qualquer interao
do usuario com a viso ser refletida no scope.
Two way data binding

Saturday, October 19, 13

DIRETIVAS

Saturday, October 19, 13

DIRETIVAS

So

o jeito angular de criar pginas dinamicas.

Saturday, October 19, 13

DIRETIVAS

So

o jeito angular de criar pginas dinamicas.

Angular

usa uma abordagem declarativa para expressar o


comportamento desejado dentro das views.

Saturday, October 19, 13

DIRETIVAS

So

o jeito angular de criar pginas dinamicas.

Angular

usa uma abordagem declarativa para expressar o


comportamento desejado dentro das views.

Voc

deve focar em descrever o comportamento desejado.

Saturday, October 19, 13

ALGUMAS DIRETIVAS

Saturday, October 19, 13

ALGUMAS DIRETIVAS

ng-app - bootstrap do angular

Saturday, October 19, 13

ALGUMAS DIRETIVAS

ng-app - bootstrap do angular

ng-model - define/associa uma nova variavel no escopo corrente

Saturday, October 19, 13

ALGUMAS DIRETIVAS

ng-app - bootstrap do angular

ng-model - define/associa uma nova variavel no escopo corrente

ng-init - incializar uma variavel atribuindo um valor

Saturday, October 19, 13

ALGUMAS DIRETIVAS

ng-app - bootstrap do angular

ng-model - define/associa uma nova variavel no escopo corrente

ng-init - incializar uma variavel atribuindo um valor

ng-repeat - o foreach do Angular

Saturday, October 19, 13

ALGUMAS DIRETIVAS

ng-app - bootstrap do angular

ng-model - define/associa uma nova variavel no escopo corrente

ng-init - incializar uma variavel atribuindo um valor

ng-repeat - o foreach do Angular

ng-click - registra um evento de click

Saturday, October 19, 13

ALGUMAS DIRETIVAS

ng-app - bootstrap do angular

ng-model - define/associa uma nova variavel no escopo corrente

ng-init - incializar uma variavel atribuindo um valor

ng-repeat - o foreach do Angular

ng-click - registra um evento de click

ng-disable - recebe uma expresso que se avaliada positivamente


desabilita o elemento.

Saturday, October 19, 13

ALGUMAS DIRETIVAS

ng-app - bootstrap do angular

ng-model - define/associa uma nova variavel no escopo corrente

ng-init - incializar uma variavel atribuindo um valor

ng-repeat - o foreach do Angular

ng-click - registra um evento de click

ng-disable - recebe uma expresso que se avaliada positivamente


desabilita o elemento.

ng-controller - delcara a criacao de um novo escopo de controlador.

Saturday, October 19, 13

Exemplo:
Exibir um text area e garantir que
o botao enviar so funcione
quando o usuario preencher no
minimo 10 caracteres

Saturday, October 19, 13

EXEMPLO DIRETIVAS
<!doctype html>
<html ng-app>
<head>
<script src="../angular.js"></script>
</head>
<body>
<div ng-init="descricao =''">
<textarea ng-model="descricao">{{descricao}}</textarea>
</div>
<p ng-show='descricao.length < 10'>Minimo de 10 caracteres</p>
<div>
<button ng-disabled="descricao.length < 10">Enviar</button>
</div>
</body>
</html>

Saturday, October 19, 13

EXEMPLO DIRETIVAS
<!doctype html>
<html ng-app>
<head>
<script src="../angular.js"></script>
</head>
cria a variavel de descricao atribuindo o valor vazio
<body>
<div ng-init="descricao =''">
<textarea ng-model="descricao">{{descricao}}</textarea>
</div>
<p ng-show='descricao.length < 10'>Minimo de 10 caracteres</p>
<div>
<button ng-disabled="descricao.length < 10">Enviar</button>
</div>
</body>
</html>

Saturday, October 19, 13

EXEMPLO DIRETIVAS
<!doctype html>
<html ng-app>
<head>
<script src="../angular.js"></script>
</head>
<body>
<div ng-init="descricao =''">
<textarea ng-model="descricao">{{descricao}}</textarea>
</div>
<p ng-show='descricao.length < 10'>Minimo de 10 caracteres</p>
<div>
<button ng-disabled="descricao.length < 10">Enviar</button>
</div>
</body>
</html>

Saturday, October 19, 13

EXEMPLO DIRETIVAS
<!doctype html>
<html ng-app>
<head>
<script src="../angular.js"></script>
</head>
<body>
<div ng-init="descricao =''">
<textarea ng-model="descricao">{{descricao}}</textarea>
</div>

Associa o variavel ao conteudo do text area

<p ng-show='descricao.length < 10'>Minimo de 10 caracteres</p>


<div>
<button ng-disabled="descricao.length < 10">Enviar</button>
</div>
</body>
</html>

Saturday, October 19, 13

EXEMPLO DIRETIVAS
<!doctype html>
<html ng-app>
<head>
<script src="../angular.js"></script>
</head>
<body>
<div ng-init="descricao =''">
<textarea ng-model="descricao">{{descricao}}</textarea>
</div>
<p ng-show='descricao.length < 10'>Minimo de 10 caracteres</p>
<div>
<button ng-disabled="descricao.length < 10">Enviar</button>
</div>
</body>
</html>

Saturday, October 19, 13

EXEMPLO DIRETIVAS
<!doctype html>
<html ng-app>
<head>
<script src="../angular.js"></script>
</head>
<body>
<div ng-init="descricao =''">
<textarea ng-model="descricao">{{descricao}}</textarea>
</div>declara que a mensagem s pode ser exibida enquanto o

usuario nao digitar no minimo 10 caracteres

<p ng-show='descricao.length < 10'>Minimo de 10 caracteres</p>


<div>
<button ng-disabled="descricao.length < 10">Enviar</button>
</div>
</body>
</html>

Saturday, October 19, 13

EXEMPLO DIRETIVAS
<!doctype html>
<html ng-app>
<head>
<script src="../angular.js"></script>
</head>
<body>
<div ng-init="descricao =''">
<textarea ng-model="descricao">{{descricao}}</textarea>
</div>
<p ng-show='descricao.length < 10'>Minimo de 10 caracteres</p>
<div>
<button ng-disabled="descricao.length < 10">Enviar</button>
</div>
</body>
</html>

Saturday, October 19, 13

EXEMPLO DIRETIVAS
<!doctype html>
<html ng-app>
<head>
<script src="../angular.js"></script>
</head>
<body>
<div ng-init="descricao =''">
<textarea ng-model="descricao">{{descricao}}</textarea>
</div>
<p ng-show='descricao.length < 10'>Minimo de 10 caracteres</p>
<div>
<button ng-disabled="descricao.length < 10">Enviar</button>
</div>
declara que o botao so deve estar habilitado se o
</body>
</html>
texo ultrapasar o minimo de 10 caracteres

Saturday, October 19, 13

EXEMPLO DIRETIVAS
<!doctype html>
<html ng-app>
<head>
<script src="../angular.js"></script>
</head>
<body>
<div ng-init="descricao =''">
<textarea ng-model="descricao">{{descricao}}</textarea>
</div>
<p ng-show='descricao.length < 10'>Minimo de 10 caracteres</p>
<div>
<button ng-disabled="descricao.length < 10">Enviar</button>
</div>
</body>
</html>

Saturday, October 19, 13

CONTROLADORES

Saturday, October 19, 13

CONTROLADORES
So

objetos Javascript convencionais

Saturday, October 19, 13

CONTROLADORES
So

objetos Javascript convencionais

Nao

precisam herdar de nenhuma classe

Saturday, October 19, 13

CONTROLADORES
So

objetos Javascript convencionais

Nao
As

precisam herdar de nenhuma classe

responsabilidades de um controlador so:

Saturday, October 19, 13

CONTROLADORES
So

objetos Javascript convencionais

Nao
As

precisam herdar de nenhuma classe

responsabilidades de um controlador so:

Incializar

Saturday, October 19, 13

objetos do escopo ($scope). *(principal)

CONTROLADORES
So

objetos Javascript convencionais

Nao
As

precisam herdar de nenhuma classe

responsabilidades de um controlador so:

Incializar

objetos do escopo ($scope). *(principal)

disponibilizar

comportamento para UI atravs de funes


ligadas ao $scope.

Saturday, October 19, 13

CONTROLADORES
So

objetos Javascript convencionais

e
d
o
s
u
o
r
a
t
i
vnenhuma
s
e
a
Nao precisam herdar
de
classe
e
a
v

e
a
d
o
F
l

e
.
c
d
t
o
o
i
V
m
n
i
e
d
g
n
s
s
e
e
r

d
a
a
z
l
i
o
l
r
a
As responsabilidades
t
i
de
um
controlador
so:
n
c
o
i
c
n
i
e
d
o
r
dent
Incializar objetos do escopo ($scope). *(principal)

disponibilizar

comportamento para UI atravs de funes


ligadas ao $scope.

Saturday, October 19, 13

EXEMPLO USANDO CONTROLLER


arquivo index2.html:
<!doctype html>
<html ng-app>
<head>
<script src="../angular.js"></script>
<script src="message-controller.js"></script>
</head>
<body ng-controller="MessageController">
<div>
<textarea ng-model="descricao">{{descricao}}</textarea>
</div>
<p ng-show='naoTemQuantidadeMinimaDeCaractres()'>Minimo de 10
caracteres</p>
<div>
<button ngdisabled="naoTemQuantidadeMinimaDeCaractres()">Enviar</button>
</div>
</body>
</html>

Saturday, October 19, 13

EXEMPLO USANDO CONTROLLER


arquivo index2.html:
<!doctype html>
<html ng-app>
carrega o arquivo que define o controlador
<head>
<script src="../angular.js"></script>
<script src="message-controller.js"></script>
</head>
<body ng-controller="MessageController">
<div>
<textarea ng-model="descricao">{{descricao}}</textarea>
</div>
<p ng-show='naoTemQuantidadeMinimaDeCaractres()'>Minimo de 10
caracteres</p>
<div>
<button ngdisabled="naoTemQuantidadeMinimaDeCaractres()">Enviar</button>
</div>
</body>
</html>

Saturday, October 19, 13

EXEMPLO USANDO CONTROLLER


arquivo index2.html:
<!doctype html>
<html ng-app>
<head>
<script src="../angular.js"></script>
<script src="message-controller.js"></script>
</head>
<body ng-controller="MessageController">
<div>
<textarea ng-model="descricao">{{descricao}}</textarea>
</div>
<p ng-show='naoTemQuantidadeMinimaDeCaractres()'>Minimo de 10
caracteres</p>
<div>
<button ngdisabled="naoTemQuantidadeMinimaDeCaractres()">Enviar</button>
</div>
</body>
</html>

Saturday, October 19, 13

EXEMPLO USANDO CONTROLLER


arquivo index2.html:
<!doctype html>
<html ng-app>
<head>
<script src="../angular.js"></script>
<script src="message-controller.js"></script>
declara o uso do controlador
</head>
<body ng-controller="MessageController">
<div>
<textarea ng-model="descricao">{{descricao}}</textarea>
</div>
<p ng-show='naoTemQuantidadeMinimaDeCaractres()'>Minimo de 10
caracteres</p>
<div>
<button ngdisabled="naoTemQuantidadeMinimaDeCaractres()">Enviar</button>
</div>
</body>
</html>

Saturday, October 19, 13

EXEMPLO USANDO CONTROLLER


arquivo index2.html:
<!doctype html>
<html ng-app>
<head>
<script src="../angular.js"></script>
<script src="message-controller.js"></script>
</head>
<body ng-controller="MessageController">
<div>
<textarea ng-model="descricao">{{descricao}}</textarea>
</div>
<p ng-show='naoTemQuantidadeMinimaDeCaractres()'>Minimo de 10
caracteres</p>
<div>
<button ngdisabled="naoTemQuantidadeMinimaDeCaractres()">Enviar</button>
</div>
</body>
</html>

Saturday, October 19, 13

EXEMPLO USANDO CONTROLLER


arquivo index2.html:
<!doctype html>
<html ng-app>
<head>
<script src="../angular.js"></script>
<script src="message-controller.js"></script>
</head>
<body ng-controller="MessageController">
<div>
<textarea ng-model="descricao">{{descricao}}</textarea>
faz uso de uma funcao do $scope
</div>
<p ng-show='naoTemQuantidadeMinimaDeCaractres()'>Minimo de 10
caracteres</p>
<div>
faz uso de uma funcao do $scope
<button ngdisabled="naoTemQuantidadeMinimaDeCaractres()">Enviar</button>
</div>
</body>
</html>

Saturday, October 19, 13

EXEMPLO USANDO CONTROLLER


arquivo index2.html:
<!doctype html>
<html ng-app>
<head>
<script src="../angular.js"></script>
<script src="message-controller.js"></script>
</head>
<body ng-controller="MessageController">
<div>
<textarea ng-model="descricao">{{descricao}}</textarea>
</div>
<p ng-show='naoTemQuantidadeMinimaDeCaractres()'>Minimo de 10
caracteres</p>
<div>
<button ngdisabled="naoTemQuantidadeMinimaDeCaractres()">Enviar</button>
</div>
</body>
</html>

Saturday, October 19, 13

EXEMPLO USANDO CONTROLLER


arquivo message-controller.js:
function MessageController($scope){
$scope.descricao = "";

$scope.naoTemQuantidadeMinimaDeCaractres = function(){
return $scope.descricao.length < 10;
}
}

Saturday, October 19, 13

EXEMPLO USANDO CONTROLLER


arquivo message-controller.js:
function MessageController($scope){

incializa a variavel de escopo descricao

$scope.descricao = "";

$scope.naoTemQuantidadeMinimaDeCaractres = function(){
return $scope.descricao.length < 10;
}
}

Saturday, October 19, 13

EXEMPLO USANDO CONTROLLER


arquivo message-controller.js:
function MessageController($scope){
$scope.descricao = "";

$scope.naoTemQuantidadeMinimaDeCaractres = function(){
return $scope.descricao.length < 10;
}
}

Saturday, October 19, 13

EXEMPLO USANDO CONTROLLER


arquivo message-controller.js:
function MessageController($scope){
$scope.descricao = "";

inclui uma funcao no $scope para ser utilizada na UI


$scope.naoTemQuantidadeMinimaDeCaractres = function(){
return $scope.descricao.length < 10;
}
}

Saturday, October 19, 13

EXEMPLO USANDO CONTROLLER


arquivo message-controller.js:
function MessageController($scope){
$scope.descricao = "";

$scope.naoTemQuantidadeMinimaDeCaractres = function(){
return $scope.descricao.length < 10;
}
}

Saturday, October 19, 13

EXEMPLO USANDO CONTROLLER


arquivo message-controller.js:
declaracao do controlador recebendo $scope por parametro
function MessageController($scope){
$scope.descricao = "";

$scope.naoTemQuantidadeMinimaDeCaractres = function(){
return $scope.descricao.length < 10;
}
}

Saturday, October 19, 13

EXEMPLO USANDO CONTROLLER


arquivo message-controller.js:
function MessageController($scope){
$scope.descricao = "";

$scope.naoTemQuantidadeMinimaDeCaractres = function(){
return $scope.descricao.length < 10;
}
}

Saturday, October 19, 13

ESCOPOS ($SCOPE)

Saturday, October 19, 13

ESCOPOS ($SCOPE)

so objetos AngularJS usados para expor modelos (dados) e funes


para a view.

Saturday, October 19, 13

ESCOPOS ($SCOPE)

so objetos AngularJS usados para expor modelos (dados) e funes


para a view.

So conceitualmente parecidos com o ViewModel do padro MVVM


(Model View ViewModel)

Saturday, October 19, 13

ESCOPOS ($SCOPE)

so objetos AngularJS usados para expor modelos (dados) e funes


para a view.

So conceitualmente parecidos com o ViewModel do padro MVVM


(Model View ViewModel)

Novos escopos so criados sempre que o Angular encontra a diretiva ngcontroller

Saturday, October 19, 13

ESCOPOS ($SCOPE)

so objetos AngularJS usados para expor modelos (dados) e funes


para a view.

So conceitualmente parecidos com o ViewModel do padro MVVM


(Model View ViewModel)

Novos escopos so criados sempre que o Angular encontra a diretiva ngcontroller

Todos os escopos possuem referencias para seus pais

Saturday, October 19, 13

ESCOPOS ($SCOPE)

so objetos AngularJS usados para expor modelos (dados) e funes


para a view.

So conceitualmente parecidos com o ViewModel do padro MVVM


(Model View ViewModel)

Novos escopos so criados sempre que o Angular encontra a diretiva ngcontroller

Todos os escopos possuem referencias para seus pais

Ou seja eles so organizados em uma arvore de escopos

Saturday, October 19, 13

ESCOPOS ($SCOPE)

so objetos AngularJS usados para expor modelos (dados) e funes


para a view.

So conceitualmente parecidos com o ViewModel do padro MVVM


(Model View ViewModel)

Novos escopos so criados sempre que o Angular encontra a diretiva ngcontroller

Todos os escopos possuem referencias para seus pais

Ou seja eles so organizados em uma arvore de escopos

Onde o n raiz o $rootScope

Saturday, October 19, 13

MODELOS

Saturday, October 19, 13

MODELOS

Modelos tambm sao objetos Javascript comuns.

Saturday, October 19, 13

MODELOS

Modelos tambm sao objetos Javascript comuns.

No

necessario herdar de nenhum tipo especifico

Saturday, October 19, 13

MODELOS

Modelos tambm sao objetos Javascript comuns.

No

necessario herdar de nenhum tipo especifico

Na

pratica qualquer variavel associada ao escopo um


modelo para o Angular

Saturday, October 19, 13

MODELOS

Modelos tambm sao objetos Javascript comuns.

No

necessario herdar de nenhum tipo especifico

Na

pratica qualquer variavel associada ao escopo um


modelo para o Angular

possivel utilizar como modelos, os seus objetos de dominio


Javascript j existentes. Basta associa-los ao $scope.

Saturday, October 19, 13

EXEMPLOS DE MODELOS
arquivo outro-controller.js:
function OutroController($scope){
$scope.descricao = ""; //modelo
$scope.usuario = { nome: Joao, idade: 20 }; //modelo
$scope.cidades = [rio de janeiro,sao paulo]; //modelo
$scope.produto = new Produto(); //modelo*
}

* considerando que exista a definio para o classe Produto.

Saturday, October 19, 13

EXEMPLO:
EXIBINDO UMA LISTAGEM DE
EMPREGADOS

Saturday, October 19, 13

LISTA DE EMPREGADOS - 1
arquivo empresa-controller.js:
function EmpresaController($scope){
$scope.empregados = [
{nome: 'Zoraide', idade: 31},
{nome: 'Joao', idade: 20},
{nome: 'Maria', idade: 25},
{nome: 'Mario', idade: 30},
{nome: 'Flavia', idade: 22},
{nome: 'Percival', idade: 50},
{nome: 'Euclides', idade: 44},
{nome: 'Aristoteles', idade: 27}
];
}

Saturday, October 19, 13

LISTA DE EMPREGADOS - 1
arquivo empresa-controller.js:
function EmpresaController($scope){
$scope.empregados = [
{nome: 'Zoraide', idade: 31},
{nome: 'Joao', idade: 20},
{nome: 'Maria', idade: 25},
{nome: 'Mario', idade: 30},
{nome: 'Flavia', idade: 22},
{nome: 'Percival', idade: 50},
{nome: 'Euclides', idade: 44},
{nome: 'Aristoteles', idade: 27}
];
}

Saturday, October 19, 13

LISTA DE EMPREGADOS - 1
arquivo index.html:
...
<body>
<div ng-controller="EmpresaController">
<div>
<table>
<tr>
<th>Nome</th>
<th>Idade</th>
</tr>
<tr ng-repeat="empregado in empregados">
<td>{{empregado.nome}}</td>
<td>{{empregado.idade}}</td>
</tr>
</table>
</div>
</div>
...

Saturday, October 19, 13

LISTA DE EMPREGADOS - 1
arquivo index.html:
...
<body>
<div ng-controller="EmpresaController">
<div>
<table>
<tr>
<th>Nome</th>
<th>Idade</th>
</tr>
<tr ng-repeat="empregado in empregados">
<td>{{empregado.nome}}</td>
<td>{{empregado.idade}}</td>
</tr>
</table>
</div>
</div>
...

Saturday, October 19, 13

LISTA DE EMPREGADOS - 1
arquivo index.html:
...
<body>
<div ng-controller="EmpresaController">
<div>
<table>
<tr>
<th>Nome</th>
<th>Idade</th>
</tr>
<tr ng-repeat="empregado in empregados">
<td>{{empregado.nome}}</td>
<td>{{empregado.idade}}</td>
</tr>
</table>
</div>
</div>
...

Saturday, October 19, 13

EXIBINDO A LISTAGEM DE
EMPREGADOS.
PERMITINDO O CADASTRO
DE NOVOS EMPREGADOS

Saturday, October 19, 13

LISTA DE EMPREGADOS - 1
arquivo empresa-controller2.js:
function EmpresaController($scope){
$scope.empregados = [
{nome: 'Zoraide', idade: 31},
{nome: 'Joao', idade: 20},
{nome: 'Maria', idade: 25},
{nome: 'Mario', idade: 30},
{nome: 'Flavia', idade: 22},
{nome: 'Percival', idade: 50},
{nome: 'Euclides', idade: 44},
{nome: 'Aristoteles', idade: 27}
];
$scope.adicionarEmpregado = function(){
var novo = {nome: $scope.nome, idade: $scope.idade};
$scope.empregados.push(novo);
};
}

Saturday, October 19, 13

LISTA DE EMPREGADOS - 1
arquivo empresa-controller2.js:
function EmpresaController($scope){
$scope.empregados = [
{nome: 'Zoraide', idade: 31},
{nome: 'Joao', idade: 20},
{nome: 'Maria', idade: 25},
{nome: 'Mario', idade: 30},
{nome: 'Flavia', idade: 22},
{nome: 'Percival', idade: 50},
{nome: 'Euclides', idade: 44},
{nome: 'Aristoteles', idade: 27}
];
$scope.adicionarEmpregado = function(){
var novo = {nome: $scope.nome, idade: $scope.idade};
$scope.empregados.push(novo);
};
}

Saturday, October 19, 13

LISTA DE EMPREGADOS - 1
arquivo index2.html:
<div ng-controller="EmpresaController">
<div>
<form>
<label>Nome</label><input ng-model='nome'/>
<label>Idade</label><input ng-model='idade'/>
<button ng-click="adicionarEmpregado()">Incluir</button>
</form>
</div>
<div>
<table>
<tr>
<th>Nome</th>
<th>Idade</th>
</tr>
<tr ng-repeat="empregado in empregados">
<td>{{empregado.nome}}</td>
<td>{{empregado.idade}}</td>
</tr>
</table>
</div>
</div>
Saturday, October 19, 13

LISTA DE EMPREGADOS - 1
arquivo index2.html:
<div ng-controller="EmpresaController">
<div>
<form>
<label>Nome</label><input ng-model='nome'/>
<label>Idade</label><input ng-model='idade'/>
<button ng-click="adicionarEmpregado()">Incluir</button>
</form>
</div>
<div>
<table>
<tr>
<th>Nome</th>
<th>Idade</th>
</tr>
<tr ng-repeat="empregado in empregados">
<td>{{empregado.nome}}</td>
<td>{{empregado.idade}}</td>
</tr>
</table>
</div>
</div>
Saturday, October 19, 13

LISTA DE EMPREGADOS - 1
arquivo index2.html:
<div ng-controller="EmpresaController">
<div>
<form>
<label>Nome</label><input ng-model='nome'/>
<label>Idade</label><input ng-model='idade'/>
<button ng-click="adicionarEmpregado()">Incluir</button>
</form>
</div>
<div>
<table>
<tr>
<th>Nome</th>
<th>Idade</th>
</tr>
<tr ng-repeat="empregado in empregados">
<td>{{empregado.nome}}</td>
<td>{{empregado.idade}}</td>
</tr>
</table>
</div>
</div>
Saturday, October 19, 13

MELHORANDO O CODIGO

Saturday, October 19, 13

LISTA DE EMPREGADOS - 1
arquivo empresa-controller3.js:
function EmpresaController($scope){
$scope.novoEmpregado = new Empregado({});
$scope.empregados = obterListaDeEmpregados();

$scope.adicionarEmpregado = function(){
$scope.empregados.push($scope.novoEmpregado);
$scope.novoEmpregado = new Empregado({});
};

function obterListaDeEmpregados(){
var lista = [
new Empregado({nome: 'Zoraide', idade: 31}),
new Empregado({nome: 'Joao', idade: 20}),
new Empregado({nome: 'Maria', idade: 25}),
new Empregado({nome: 'Mario', idade: 30}),
new Empregado({nome: 'Flavia', idade: 22}),
new Empregado({nome: 'Percival', idade: 50}),
new Empregado({nome: 'Euclides', idade: 44}),
new Empregado({nome: 'Aristoteles', idade: 27})
];
return lista;
}
function Empregado(args){
this.nome = args.nome || undefined;
this.idade = args.idade || undefined;
}
Saturday, October 19, 13

LISTA DE EMPREGADOS - 1
arquivo empresa-controller3.js:
function EmpresaController($scope){
$scope.novoEmpregado = new Empregado({});
$scope.empregados = obterListaDeEmpregados();

$scope.adicionarEmpregado = function(){
$scope.empregados.push($scope.novoEmpregado);
$scope.novoEmpregado = new Empregado({});
};

function obterListaDeEmpregados(){
var lista = [
new Empregado({nome: 'Zoraide', idade: 31}),
new Empregado({nome: 'Joao', idade: 20}),
new Empregado({nome: 'Maria', idade: 25}),
new Empregado({nome: 'Mario', idade: 30}),
new Empregado({nome: 'Flavia', idade: 22}),
new Empregado({nome: 'Percival', idade: 50}),
new Empregado({nome: 'Euclides', idade: 44}),
new Empregado({nome: 'Aristoteles', idade: 27})
];
return lista;
}
function Empregado(args){
this.nome = args.nome || undefined;
this.idade = args.idade || undefined;
}
Saturday, October 19, 13

LISTA DE EMPREGADOS - 1
arquivo empresa-controller3.js:
function EmpresaController($scope){
$scope.novoEmpregado = new Empregado({});
$scope.empregados = obterListaDeEmpregados();

$scope.adicionarEmpregado = function(){
$scope.empregados.push($scope.novoEmpregado);
$scope.novoEmpregado = new Empregado({});
};

function obterListaDeEmpregados(){
var lista = [
new Empregado({nome: 'Zoraide', idade: 31}),
new Empregado({nome: 'Joao', idade: 20}),
new Empregado({nome: 'Maria', idade: 25}),
new Empregado({nome: 'Mario', idade: 30}),
new Empregado({nome: 'Flavia', idade: 22}),
new Empregado({nome: 'Percival', idade: 50}),
new Empregado({nome: 'Euclides', idade: 44}),
new Empregado({nome: 'Aristoteles', idade: 27})
];
return lista;
}
function Empregado(args){
this.nome = args.nome || undefined;
this.idade = args.idade || undefined;
}
Saturday, October 19, 13

LISTA DE EMPREGADOS - 1
arquivo empresa-controller3.js:
function EmpresaController($scope){
$scope.novoEmpregado = new Empregado({});
$scope.empregados = obterListaDeEmpregados();

$scope.adicionarEmpregado = function(){
$scope.empregados.push($scope.novoEmpregado);
$scope.novoEmpregado = new Empregado({});
};

function obterListaDeEmpregados(){
var lista = [
new Empregado({nome: 'Zoraide', idade: 31}),
new Empregado({nome: 'Joao', idade: 20}),
new Empregado({nome: 'Maria', idade: 25}),
new Empregado({nome: 'Mario', idade: 30}),
new Empregado({nome: 'Flavia', idade: 22}),
new Empregado({nome: 'Percival', idade: 50}),
new Empregado({nome: 'Euclides', idade: 44}),
new Empregado({nome: 'Aristoteles', idade: 27})
];
return lista;
}
function Empregado(args){
this.nome = args.nome || undefined;
this.idade = args.idade || undefined;
}
Saturday, October 19, 13

LISTA DE EMPREGADOS - 1
arquivo empresa-controller3.js:
function EmpresaController($scope){
$scope.novoEmpregado = new Empregado({});
$scope.empregados = obterListaDeEmpregados();

$scope.adicionarEmpregado = function(){
$scope.empregados.push($scope.novoEmpregado);
$scope.novoEmpregado = new Empregado({});
};

function obterListaDeEmpregados(){
var lista = [
new Empregado({nome: 'Zoraide', idade: 31}),
new Empregado({nome: 'Joao', idade: 20}),
new Empregado({nome: 'Maria', idade: 25}),
new Empregado({nome: 'Mario', idade: 30}),
new Empregado({nome: 'Flavia', idade: 22}),
new Empregado({nome: 'Percival', idade: 50}),
new Empregado({nome: 'Euclides', idade: 44}),
new Empregado({nome: 'Aristoteles', idade: 27})
];
return lista;
}
function Empregado(args){
this.nome = args.nome || undefined;
this.idade = args.idade || undefined;
}
Saturday, October 19, 13

LISTA DE EMPREGADOS - 1
arquivo empresa-controller3.js:
function EmpresaController($scope){
$scope.novoEmpregado = new Empregado({});
$scope.empregados = obterListaDeEmpregados();

$scope.adicionarEmpregado = function(){
$scope.empregados.push($scope.novoEmpregado);
$scope.novoEmpregado = new Empregado({});
};

function obterListaDeEmpregados(){
var lista = [
new Empregado({nome: 'Zoraide', idade: 31}),
new Empregado({nome: 'Joao', idade: 20}),
new Empregado({nome: 'Maria', idade: 25}),
new Empregado({nome: 'Mario', idade: 30}),
new Empregado({nome: 'Flavia', idade: 22}),
new Empregado({nome: 'Percival', idade: 50}),
new Empregado({nome: 'Euclides', idade: 44}),
new Empregado({nome: 'Aristoteles', idade: 27})
];
return lista;
}
function Empregado(args){
this.nome = args.nome || undefined;
this.idade = args.idade || undefined;
}
Saturday, October 19, 13

LISTA DE EMPREGADOS - 1
arquivo empresa-controller3.js:
function EmpresaController($scope){
$scope.novoEmpregado = new Empregado({});
$scope.empregados = obterListaDeEmpregados();

$scope.adicionarEmpregado = function(){
$scope.empregados.push($scope.novoEmpregado);
$scope.novoEmpregado = new Empregado({});
};

function obterListaDeEmpregados(){
var lista = [
new Empregado({nome: 'Zoraide', idade: 31}),
new Empregado({nome: 'Joao', idade: 20}),
new Empregado({nome: 'Maria', idade: 25}),
new Empregado({nome: 'Mario', idade: 30}),
new Empregado({nome: 'Flavia', idade: 22}),
new Empregado({nome: 'Percival', idade: 50}),
new Empregado({nome: 'Euclides', idade: 44}),
new Empregado({nome: 'Aristoteles', idade: 27})
];
return lista;
}
function Empregado(args){
this.nome = args.nome || undefined;
this.idade = args.idade || undefined;
}
Saturday, October 19, 13

LISTA DE EMPREGADOS - 1
arquivo empresa-controller3.js:
function EmpresaController($scope){
$scope.novoEmpregado = new Empregado({});
$scope.empregados = obterListaDeEmpregados();

$scope.adicionarEmpregado = function(){
$scope.empregados.push($scope.novoEmpregado);
$scope.novoEmpregado = new Empregado({});
};

function obterListaDeEmpregados(){
var lista = [
new Empregado({nome: 'Zoraide', idade: 31}),
new Empregado({nome: 'Joao', idade: 20}),
new Empregado({nome: 'Maria', idade: 25}),
new Empregado({nome: 'Mario', idade: 30}),
new Empregado({nome: 'Flavia', idade: 22}),
new Empregado({nome: 'Percival', idade: 50}),
new Empregado({nome: 'Euclides', idade: 44}),
new Empregado({nome: 'Aristoteles', idade: 27})
];
return lista;
}
function Empregado(args){
this.nome = args.nome || undefined;
this.idade = args.idade || undefined;
}
Saturday, October 19, 13

LISTA DE EMPREGADOS - 1
arquivo empresa-controller3.js:
function EmpresaController($scope){
$scope.novoEmpregado = new Empregado({});
$scope.empregados = obterListaDeEmpregados();

$scope.adicionarEmpregado = function(){
$scope.empregados.push($scope.novoEmpregado);
$scope.novoEmpregado = new Empregado({});
};

function obterListaDeEmpregados(){
var lista = [
new Empregado({nome: 'Zoraide', idade: 31}),
new Empregado({nome: 'Joao', idade: 20}),
new Empregado({nome: 'Maria', idade: 25}),
new Empregado({nome: 'Mario', idade: 30}),
new Empregado({nome: 'Flavia', idade: 22}),
new Empregado({nome: 'Percival', idade: 50}),
new Empregado({nome: 'Euclides', idade: 44}),
new Empregado({nome: 'Aristoteles', idade: 27})
];
return lista;
}
function Empregado(args){
this.nome = args.nome || undefined;
this.idade = args.idade || undefined;
}
Saturday, October 19, 13

LISTA DE EMPREGADOS - 1
arquivo index3.html:
<div ng-controller="EmpresaController">
<div>
<form>
<label>Nome</label><input ng-model='novoEmpregado.nome'/>
<label>Idade</label><input ng-model='novoEmpregado.idade'/>
<button ng-click="adicionarEmpregado()">Incluir</button>
</form>
</div>
<div>
<table>
<tr>
<th>Nome</th>
<th>Idade</th>
</tr>
<tr ng-repeat="empregado in empregados">
<td>{{empregado.nome}}</td>
<td>{{empregado.idade}}</td>
</tr>
</table>
</div>
</div>
Saturday, October 19, 13

LISTA DE EMPREGADOS - 1
arquivo index3.html:
<div ng-controller="EmpresaController">
<div>
<form>
<label>Nome</label><input ng-model='novoEmpregado.nome'/>
<label>Idade</label><input ng-model='novoEmpregado.idade'/>
<button ng-click="adicionarEmpregado()">Incluir</button>
</form>
</div>
<div>
<table>
<tr>
<th>Nome</th>
<th>Idade</th>
</tr>
<tr ng-repeat="empregado in empregados">
<td>{{empregado.nome}}</td>
<td>{{empregado.idade}}</td>
</tr>
</table>
</div>
</div>
Saturday, October 19, 13

FILTROS

Saturday, October 19, 13

FILTROS
So

recursos do Angular para permitir a construo de


expresses mais complexas.

Saturday, October 19, 13

FILTROS
So

recursos do Angular para permitir a construo de


expresses mais complexas.

O Angular

Saturday, October 19, 13

ja vem de fabrica com alguns bons filtros.

FILTROS
So

recursos do Angular para permitir a construo de


expresses mais complexas.

O Angular
So

ja vem de fabrica com alguns bons filtros.

dividios em 2 tipos:

Formating

Filters

currency, date, number, lowercase, uppercase


Array Transforming

Saturday, October 19, 13

filters

e json

ORDENANDO A LISTA DE
EMPREGADOS

Saturday, October 19, 13

LISTA DE EMPREGADOS - 1
arquivo filtro1.html:
<div ng-controller="EmpresaController">
<div>
<form>
<label>Nome</label><input ng-model='nome'/>
<label>Idade</label><input ng-model='idade'/>
<button ng-click="adicionarEmpregado()">Incluir</button>
</form>
</div>
<div>
<table>
<tr>
<th>Nome</th>
<th>Idade</th>
</tr>
<tr ng-repeat="empregado in empregados | orderBy:[nome]">
<td>{{empregado.nome}}</td>
<td>{{empregado.idade}}</td>
</tr>
</table>
</div>
</div>
Saturday, October 19, 13

LISTA DE EMPREGADOS - 1
arquivo filtro1.html:
<div ng-controller="EmpresaController">
<div>
<form>
<label>Nome</label><input ng-model='nome'/>
<label>Idade</label><input ng-model='idade'/>
<button ng-click="adicionarEmpregado()">Incluir</button>
</form>
</div>
<div>
<table>
<tr>
<th>Nome</th>
<th>Idade</th>
</tr>
<tr ng-repeat="empregado in empregados | orderBy:[nome]">
<td>{{empregado.nome}}</td>
<td>{{empregado.idade}}</td>
</tr>
</table>
</div>
</div>
Saturday, October 19, 13

PESQUISANDO NA LISTA DE
EMPREGADOS

Saturday, October 19, 13

LISTA DE EMPREGADOS - 1
arquivo filtro2.html:
<div ng-controller="EmpresaController">
...
<div>
<table>
<tr>
<th>Nome</th>
<th>Idade</th>
</tr>
<tr ng-repeat="empregado in empregados |filter:criteria |
orderBy:[nome]">
<td>{{empregado.nome}}</td>
<td>{{empregado.idade}}</td>
</tr>
</table>
</div>
<label> Pesquisar Por:
<input ng-model="criteria"/>
</div>

Saturday, October 19, 13

LISTA DE EMPREGADOS - 1
arquivo filtro2.html:
<div ng-controller="EmpresaController">
...
<div>
<table>
<tr>
<th>Nome</th>
<th>Idade</th>
</tr>
<tr ng-repeat="empregado in empregados |filter:criteria |
orderBy:[nome]">
<td>{{empregado.nome}}</td>
<td>{{empregado.idade}}</td>
</tr>
</table>
</div>
<label> Pesquisar Por:
<input ng-model="criteria"/>
</div>

Saturday, October 19, 13

LISTA DE EMPREGADOS - 1
arquivo filtro2.html:
<div ng-controller="EmpresaController">
...
<div>
<table>
<tr>
<th>Nome</th>
<th>Idade</th>
</tr>
<tr ng-repeat="empregado in empregados |filter:criteria |
orderBy:[nome]">
<td>{{empregado.nome}}</td>
<td>{{empregado.idade}}</td>
</tr>
</table>
</div>
<label> Pesquisar Por:
<input ng-model="criteria"/>
</div>

Saturday, October 19, 13

OUTROS RECURSOS DO
ANGULAR

Services

$http, $timeout, $window, $route entre outros...

Custom Directives

Uma forma de extender o HTML, e criar seus proprios componentes

Modules

Factories

Dependency Injection

Saturday, October 19, 13

COMO FICA A COMUNICAO


COM O SERVER SIDE?
JSON

Saturday, October 19, 13

Java
Ruby
.Net
Node.js
Phyton

COMO FICA A COMUNICAO


COM O SERVER SIDE?
JSON

e
p
t
t
h
o
$

s
s
,
o
S

J
i
r
v
a
r
l
e
u
a
g
t
n
s
A
Os s
e
o
r
d
a
z
e
i
c
l
r
a
u
e
o
r
s
e
a
r
$r
a
o
p

s
a
e
c
i
n
u
op
m
co
Saturday, October 19, 13

Java
Ruby
.Net
Node.js
Phyton

ANGULARJS
NO BALA DE PRATA
Saturday, October 19, 13

CONSIDERAES

Saturday, October 19, 13

CONSIDERAES
Cada caso um caso, avalie bem antes de decidir que
abordagem utilizar. Existem relatos positivos e negativos
quanto ao uso de frameworks MVC client-side

Saturday, October 19, 13

CONSIDERAES
Cada caso um caso, avalie bem antes de decidir que
abordagem utilizar. Existem relatos positivos e negativos
quanto ao uso de frameworks MVC client-side
Client-Side MVC is not a silver bullet, um post bem
famoso

Saturday, October 19, 13

CONSIDERAES
Cada caso um caso, avalie bem antes de decidir que
abordagem utilizar. Existem relatos positivos e negativos
quanto ao uso de frameworks MVC client-side
Client-Side MVC is not a silver bullet, um post bem
famoso
http://mir.aculo.us/2013/02/26/client-side-mvc-is-not-a-silver-bullet

Saturday, October 19, 13

Obrigado!
Sergio Azevedo
sergio.junior@caelum.com.br
@sergioazevedo
http://sagadoprogramador.com.br
Saturday, October 19, 13