1. Abraçando o MVC Client Side
Sergio Azevedo
sergio.junior@caelum.com.br
@sergioazevedo
http://sagadoprogramador.com.br
Saturday, October 19, 13
2. Arquitetura “padrão”
de uma Aplicação Web
Server Side
Client Side
h
uest
p req
tt
htt
pr
esp
on
Controlador
View
Template
se
html / json /xml
Saturday, October 19, 13
Modelo
View
Renderizada
5. “A necessidade de um framework
MVC client-side, fica clara quando
você começa a manipular em suas
páginas, não só HTML mas também
dados.”
fonte: http://jster.net
http://jster.net/blog/why-should-you-use-client-side-mvc-framework#.UmH4-ZTwIjE
Saturday, October 19, 13
6. E o framework MVC
client-side que veremos hoje será:
Saturday, October 19, 13
9. VISÃO GERAL
• Framework
• Suporta
Saturday, October 19, 13
MVC Javascript, para aplicações web dinamicas
HTML 5
10. VISÃO GERAL
• Framework
MVC Javascript, para aplicações web dinamicas
• Suporta
HTML 5
• Extende
o HTML (Diretivas)
Saturday, October 19, 13
11. VISÃO GERAL
• Framework
MVC Javascript, para aplicações web dinamicas
• Suporta
HTML 5
• Extende
o HTML (Diretivas)
• Usa
abordagem declarativa para expressar logica nas views
Saturday, October 19, 13
12. VISÃO GERAL
• Framework
MVC Javascript, para aplicações web dinamicas
• Suporta
HTML 5
• Extende
o HTML (Diretivas)
• Usa
abordagem declarativa para expressar logica nas views
• Injeção
Saturday, October 19, 13
de dependencias (de graça)
13. VISÃO GERAL
• Framework
MVC Javascript, para aplicações web dinamicas
• Suporta
HTML 5
• Extende
o HTML (Diretivas)
• Usa
abordagem declarativa para expressar logica nas views
• Injeção
• Two
de dependencias (de graça)
way data binding
Saturday, October 19, 13
14. VISÃO GERAL
• Framework
MVC Javascript, para aplicações web dinamicas
• Suporta
HTML 5
• Extende
o HTML (Diretivas)
• Usa
abordagem declarativa para expressar logica nas views
• Injeção
• Two
de dependencias (de graça)
way data binding
• Mantido
Saturday, October 19, 13
pela Google
15. COMEÇANDO
<!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
16. COMEÇANDO
<!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
17. COMEÇANDO
<!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
18. COMEÇANDO
<!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
19. COMEÇANDO
<!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
20. COMEÇANDO
<!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
21. COMEÇANDO
<!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
22. COMEÇANDO
<!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
23. COMEÇANDO
<!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
25. WORK FLOW BASICO
1. O browser recebe o html e faz executa o DOM parser
Saturday, October 19, 13
26. 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
27. 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
28. 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 serviço de compilação da pagina ($compile)
e o escopo raiz ($rootScope)
Saturday, October 19, 13
29. 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 serviço de compilação 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
31. HTML COMPILER
Compile: Percorre o DOM em busca de diretivas e entrega
como resultado uma função de link
Saturday, October 19, 13
32. HTML COMPILER
Compile: Percorre o DOM em busca de diretivas e entrega
como resultado uma função de link
Link: Combina as diretivas com o escopo ($scope) e gera
assim a visão. Qualquer atleração em um modelo de um
scope será refletida na visão, assim como qualquer interação
do usuario com a visão será refletida no scope.
Saturday, October 19, 13
33. HTML COMPILER
Compile: Percorre o DOM em busca de diretivas e entrega
como resultado uma função de link
Link: Combina as diretivas com o escopo ($scope) e gera
assim a visão. Qualquer atleração em um modelo de um
scope será refletida na visão, assim como qualquer interação
do usuario com a visão será refletida no scope.
“Two way data binding”
Saturday, October 19, 13
36. DIRETIVAS
• São
o jeito angular de criar páginas dinamicas.
• Angular
usa uma abordagem declarativa para expressar o
comportamento desejado dentro das views.
Saturday, October 19, 13
37. DIRETIVAS
• São
o jeito angular de criar páginas 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
40. ALGUMAS DIRETIVAS
•
ng-app - bootstrap do angular
•
ng-model - define/associa uma nova variavel no escopo corrente
Saturday, October 19, 13
41. 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
42. 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
43. 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
44. 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 expressão que se avaliada positivamente
desabilita o elemento.
Saturday, October 19, 13
45. 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 expressão que se avaliada positivamente
desabilita o elemento.
•
ng-controller - delcara a criacao de um novo escopo de controlador.
Saturday, October 19, 13
46. 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
54. 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
59. CONTROLADORES
• São
objetos Javascript convencionais
• Nao
• As
precisam herdar de nenhuma classe
responsabilidades de um controlador são:
Saturday, October 19, 13
60. CONTROLADORES
• São
objetos Javascript convencionais
• Nao
• As
precisam herdar de nenhuma classe
responsabilidades de um controlador são:
• Incializar
Saturday, October 19, 13
objetos do escopo ($scope). *(principal)
61. CONTROLADORES
• São
objetos Javascript convencionais
• Nao
• As
precisam herdar de nenhuma classe
responsabilidades de um controlador são:
• Incializar
objetos do escopo ($scope). *(principal)
• disponibilizar
comportamento para UI através de funções
ligadas ao $scope.
Saturday, October 19, 13
62. CONTROLADORES
• São
objetos Javascript convencionais
o de
o us
itar
• Nao precisam herdare ev
ça s el
ev de nenhumaaclasseo
cê d init. Fa
Vo
mod
nges de adores
zaçõ controlador são:
• As responsabilidadeslde um ntrol
cia i e co
ini
tro d
den
• Incializar objetos do escopo ($scope). *(principal)
• disponibilizar
comportamento para UI através de funções
ligadas ao $scope.
Saturday, October 19, 13
68. 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
73. 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
78. ESCOPOS ($SCOPE)
•
são objetos AngularJS usados para expor modelos (dados) e funções
para a view.
Saturday, October 19, 13
79. ESCOPOS ($SCOPE)
•
são objetos AngularJS usados para expor modelos (dados) e funções
para a view.
•
São conceitualmente parecidos com o ViewModel do padrão MVVM
(Model View ViewModel)
Saturday, October 19, 13
80. ESCOPOS ($SCOPE)
•
são objetos AngularJS usados para expor modelos (dados) e funções
para a view.
•
São conceitualmente parecidos com o ViewModel do padrão MVVM
(Model View ViewModel)
•
Novos escopos são criados sempre que o Angular encontra a diretiva ngcontroller
Saturday, October 19, 13
81. ESCOPOS ($SCOPE)
•
são objetos AngularJS usados para expor modelos (dados) e funções
para a view.
•
São conceitualmente parecidos com o ViewModel do padrão MVVM
(Model View ViewModel)
•
Novos escopos são criados sempre que o Angular encontra a diretiva ngcontroller
•
Todos os escopos possuem referencias para seus “pais”
Saturday, October 19, 13
82. ESCOPOS ($SCOPE)
•
são objetos AngularJS usados para expor modelos (dados) e funções
para a view.
•
São conceitualmente parecidos com o ViewModel do padrão MVVM
(Model View ViewModel)
•
Novos escopos são criados sempre que o Angular encontra a diretiva ngcontroller
•
Todos os escopos possuem referencias para seus “pais”
•
Ou seja eles são organizados em uma arvore de escopos
Saturday, October 19, 13
83. ESCOPOS ($SCOPE)
•
são objetos AngularJS usados para expor modelos (dados) e funções
para a view.
•
São conceitualmente parecidos com o ViewModel do padrão MVVM
(Model View ViewModel)
•
Novos escopos são criados sempre que o Angular encontra a diretiva ngcontroller
•
Todos os escopos possuem referencias para seus “pais”
•
Ou seja eles são organizados em uma arvore de escopos
•
Onde o nó raiz é o $rootScope
Saturday, October 19, 13
86. MODELOS
•
Modelos também sao objetos Javascript comuns.
• Não
é necessario herdar de nenhum tipo especifico
Saturday, October 19, 13
87. MODELOS
•
Modelos também sao objetos Javascript comuns.
• Não
é necessario herdar de nenhum tipo especifico
• Na
pratica qualquer variavel associada ao escopo é um
modelo para o Angular
Saturday, October 19, 13
88. MODELOS
•
Modelos também sao objetos Javascript comuns.
• Não
é 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
89. 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 definição para o classe Produto.
Saturday, October 19, 13
115. FILTROS
• São
recursos do Angular para permitir a construção de
expressões mais complexas.
Saturday, October 19, 13
116. FILTROS
• São
recursos do Angular para permitir a construção de
expressões mais complexas.
• O Angular
Saturday, October 19, 13
ja vem “de fabrica” com alguns bons filtros.
117. FILTROS
• São
recursos do Angular para permitir a construção de
expressões mais complexas.
• O Angular
• São
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
122. 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
123. 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
124. 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
125. 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
126. COMO FICA A COMUNICAÇÃO
COM O SERVER SIDE?
JSON
Saturday, October 19, 13
Java
Ruby
.Net
Node.js
Phyton
127. COMO FICA A COMUNICAÇÃO
COM O SERVER SIDE?
JSON
ttp e são
s $h rJS,
rviço ngula
s se do A
O
esta
izar
ce
esour para real o
$r
caçã
ões
opç
omuni
c
Saturday, October 19, 13
Java
Ruby
.Net
Node.js
Phyton
130. CONSIDERAÇÕES
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
131. CONSIDERAÇÕES
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
132. CONSIDERAÇÕES
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