Abraçando o MVC Client Side

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

Arquitetura “padrão”
de uma Aplicação Web
Server Side
Client Side

h

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

Então qual o problema?
Saturday, October 19, 13

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

“A necessidade de um framework MVC client-side. October 19. 13 . fica clara quando você começa a manipular em suas páginas.net/blog/why-should-you-use-client-side-mvc-framework#. não só HTML mas também dados.net http://jster.” fonte: http://jster.UmH4-ZTwIjE Saturday.

13 . October 19.E o framework MVC client-side que veremos hoje será: Saturday.

VISÃO GERAL Saturday. 13 . October 19.

13 MVC Javascript. October 19.VISÃO GERAL • Framework Saturday. para aplicações web dinamicas .

VISÃO GERAL • Framework • Suporta Saturday. para aplicações web dinamicas HTML 5 . 13 MVC Javascript. October 19.

October 19. para aplicações web dinamicas • Suporta HTML 5 • Extende o HTML (Diretivas) Saturday. 13 .VISÃO GERAL • Framework MVC Javascript.

13 . October 19.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.

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)

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

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

min.COMEÇANDO <!doctype html> <html ng-app> <head> <script src="https://ajax.."></p> <p>{{nome}}</p> </div> </body> </html> Saturday.0.googleapis.8/angular. 13 .js"></script> script> </head> <body> <div> <p>Digite seu nome: <input ng-model="nome" placeholder="Seu nome aqui.com/ajax/libs/angularjs/ 1.. October 19.

js"></script> script> </head> <body> <div> <p>Digite seu nome: <input ng-model="nome" placeholder="Seu nome aqui.googleapis..com/ajax/libs/angularjs/ 1.min.0.COMEÇANDO <!doctype html> <html ng-app> <head> <script src="https://ajax.8/angular."></p> <p>{{nome}}</p> </div> </body> </html> carrega o angular Saturday. October 19. 13 ..

"></p> <p>{{nome}}</p> </div> </body> </html> Saturday. 13 .com/ajax/libs/angularjs/ 1.0.COMEÇANDO <!doctype html> <html ng-app> <head> <script src="https://ajax.8/angular.min.js"></script> script> </head> <body> <div> <p>Digite seu nome: <input ng-model="nome" placeholder="Seu nome aqui..googleapis.. October 19.

8/angular. 13 ...com/ajax/libs/angularjs/ 1.googleapis. October 19.0.COMEÇANDO <!doctype html> <html ng-app> bootstrap do angular <head> <script src="https://ajax.min."></p> <p>{{nome}}</p> </div> </body> </html> Saturday.js"></script> script> </head> <body> <div> <p>Digite seu nome: <input ng-model="nome" placeholder="Seu nome aqui.

October 19..min.com/ajax/libs/angularjs/ 1.0.COMEÇANDO <!doctype html> <html ng-app> <head> <script src="https://ajax.js"></script> script> </head> <body> <div> <p>Digite seu nome: <input ng-model="nome" placeholder="Seu nome aqui..8/angular. 13 .googleapis."></p> <p>{{nome}}</p> </div> </body> </html> Saturday.

.8/angular. October 19."></p> <p>{{nome}}</p> </div> </body> </html> Saturday.js"></script> script> </head> <body> cria a variavel de modelo nome <div> <p>Digite seu nome: <input ng-model="nome" placeholder="Seu nome aqui.googleapis.min.COMEÇANDO <!doctype html> <html ng-app> <head> <script src="https://ajax.0.com/ajax/libs/angularjs/ 1. 13 ..

"></p> <p>{{nome}}</p> </div> </body> </html> Saturday.js"></script> script> </head> <body> <div> <p>Digite seu nome: <input ng-model="nome" placeholder="Seu nome aqui.COMEÇANDO <!doctype html> <html ng-app> <head> <script src="https://ajax. October 19. 13 ..com/ajax/libs/angularjs/ 1..min.0.8/angular.googleapis.

October 19. 13 .min.com/ajax/libs/angularjs/ 1."></p> <p>{{nome}}</p> exibe o conteudo da variavel nome </div> </body> </html> Saturday.js"></script> script> </head> <body> <div> <p>Digite seu nome: <input ng-model="nome" placeholder="Seu nome aqui.8/angular.COMEÇANDO <!doctype html> <html ng-app> <head> <script src="https://ajax..googleapis..0.

com/ajax/libs/angularjs/ 1..js"></script> script> </head> <body> <div> <p>Digite seu nome: <input ng-model="nome" placeholder="Seu nome aqui..8/angular. October 19.COMEÇANDO <!doctype html> <html ng-app> <head> <script src="https://ajax.0.googleapis."></p> <p>{{nome}}</p> </div> </body> </html> Saturday.min. 13 .

October 19. 13 .WORK FLOW BASICO Saturday.

O browser recebe o html e faz executa o DOM parser Saturday. October 19.WORK FLOW BASICO 1. 13 .

October 19. 13 . O browser carrega o script do angular.js Saturday.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. O browser recebe o html e faz executa o DOM parser 2.WORK FLOW BASICO 1. October 19. Angular busca pela diretiva ng-app Saturday. 13 .

Angular busca pela diretiva ng-app 4.js 3. O browser recebe o html e faz executa o DOM parser 2. 13 . October 19.WORK FLOW BASICO 1. O angular cria o serviço de compilação da pagina ($compile) e o escopo raiz ($rootScope) Saturday. O browser carrega o script do angular.

October 19. 13 . Angular busca pela diretiva ng-app 4.js 3. Angular usa o $compile para compilar o DOM e liga-lo ao $rootScope.WORK FLOW BASICO 1. O browser carrega o script do angular. O angular cria o serviço de compilação da pagina ($compile) e o escopo raiz ($rootScope) 5. O browser recebe o html e faz executa o DOM parser 2. (HTML Compiler) Saturday.

HTML COMPILER Saturday. 13 . October 19.

13 . October 19.HTML COMPILER Compile: Percorre o DOM em busca de diretivas e entrega como resultado uma função de link Saturday.

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. assim como qualquer interação do usuario com a visão será refletida no scope. October 19. Saturday. Qualquer atleração em um modelo de um scope será refletida na visão. 13 .

Qualquer atleração em um modelo de um scope será refletida na visão.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. 13 . October 19. assim como qualquer interação do usuario com a visão será refletida no scope. “Two way data binding” Saturday.

13 .DIRETIVAS Saturday. October 19.

October 19. 13 .DIRETIVAS • São o jeito angular de criar páginas dinamicas. Saturday.

Saturday. • Angular usa uma abordagem declarativa para expressar o comportamento desejado dentro das views. 13 . October 19.DIRETIVAS • São o jeito angular de criar páginas dinamicas.

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

ALGUMAS DIRETIVAS

Saturday, October 19, 13

ALGUMAS DIRETIVAS

ng-app - bootstrap do angular

Saturday, October 19, 13

ALGUMAS DIRETIVAS • ng-app . October 19. 13 .define/associa uma nova variavel no escopo corrente Saturday.bootstrap do angular • ng-model .

ALGUMAS DIRETIVAS • ng-app .define/associa uma nova variavel no escopo corrente • ng-init .incializar uma variavel atribuindo um valor Saturday. 13 . October 19.bootstrap do angular • ng-model .

o foreach do Angular Saturday. 13 .bootstrap do angular • ng-model .ALGUMAS DIRETIVAS • ng-app .define/associa uma nova variavel no escopo corrente • ng-init . October 19.incializar uma variavel atribuindo um valor • ng-repeat .

incializar uma variavel atribuindo um valor • ng-repeat . 13 .bootstrap do angular • ng-model .define/associa uma nova variavel no escopo corrente • ng-init . October 19.o foreach do Angular • ng-click .ALGUMAS DIRETIVAS • ng-app .registra um evento de click Saturday.

Saturday.define/associa uma nova variavel no escopo corrente • ng-init . October 19.registra um evento de click • ng-disable .recebe uma expressão que se avaliada positivamente desabilita o elemento.o foreach do Angular • ng-click .bootstrap do angular • ng-model . 13 .incializar uma variavel atribuindo um valor • ng-repeat .ALGUMAS DIRETIVAS • ng-app .

delcara a criacao de um novo escopo de controlador.bootstrap do angular • ng-model .incializar uma variavel atribuindo um valor • ng-repeat . • ng-controller .o foreach do Angular • ng-click .ALGUMAS DIRETIVAS • ng-app . 13 . October 19.registra um evento de click • ng-disable . Saturday.recebe uma expressão que se avaliada positivamente desabilita o elemento.define/associa uma nova variavel no escopo corrente • ng-init .

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 .

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

length < 10">Enviar</button> </div> </body> </html> Saturday.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.EXEMPLO DIRETIVAS <!doctype html> <html ng-app> <head> <script src=". 13 .length < 10'>Minimo de 10 caracteres</p> <div> <button ng-disabled="descricao.. October 19./angular.

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

. 13 .EXEMPLO DIRETIVAS <!doctype html> <html ng-app> <head> <script src=". October 19./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.

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

. 13 ./angular.length < 10'>Minimo de 10 caracteres</p> <div> <button ng-disabled="descricao.EXEMPLO DIRETIVAS <!doctype html> <html ng-app> <head> <script src=". October 19.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">Enviar</button> </div> </body> </html> Saturday.

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

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

CONTROLADORES Saturday. 13 . October 19.

13 .CONTROLADORES • São objetos Javascript convencionais Saturday. October 19.

13 . October 19.CONTROLADORES • São objetos Javascript convencionais • Nao precisam herdar de nenhuma classe Saturday.

October 19.CONTROLADORES • São objetos Javascript convencionais • Nao • As precisam herdar de nenhuma classe responsabilidades de um controlador são: Saturday. 13 .

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)

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

CONTROLADORES
• São

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
õ
o
ç
d
a
a
z
l
i
o
l
r
a
• As responsabilidades
t
i
de
um
controlador
são:
n
c
o
i
c
n
i
e
d
o
r
dent
• Incializar objetos do escopo ($scope). *(principal)

• disponibilizar

comportamento para UI através de funções
ligadas ao $scope.

Saturday, October 19, 13

js"></script> <script src="message-controller. October 19.html: <!doctype html> <html ng-app> <head> <script src=".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./angular.EXEMPLO USANDO CONTROLLER arquivo index2.. 13 .

. October 19.EXEMPLO USANDO CONTROLLER arquivo index2.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.html: <!doctype html> <html ng-app> carrega o arquivo que define o controlador <head> <script src=".js"></script> <script src="message-controller. 13 ./angular.

/angular.. 13 .EXEMPLO USANDO CONTROLLER arquivo index2. October 19.html: <!doctype html> <html ng-app> <head> <script src=".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.

js"></script> <script src="message-controller./angular.EXEMPLO USANDO CONTROLLER arquivo index2. October 19. 13 .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..html: <!doctype html> <html ng-app> <head> <script src=".

/angular.html: <!doctype html> <html ng-app> <head> <script src=".EXEMPLO USANDO CONTROLLER arquivo index2.js"></script> <script src="message-controller. October 19.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. 13 ..

October 19.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. 13 ../angular.EXEMPLO USANDO CONTROLLER arquivo index2.js"></script> <script src="message-controller.html: <!doctype html> <html ng-app> <head> <script src=".

13 .js"></script> <script src="message-controller. October 19.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.html: <!doctype html> <html ng-app> <head> <script src="../angular.EXEMPLO USANDO CONTROLLER arquivo index2.

js: function MessageController($scope){ $scope. } } Saturday.naoTemQuantidadeMinimaDeCaractres = function(){ return $scope. October 19.descricao = "".length < 10. $scope.EXEMPLO USANDO CONTROLLER arquivo message-controller. 13 .descricao.

October 19.descricao = "". 13 .naoTemQuantidadeMinimaDeCaractres = function(){ return $scope.EXEMPLO USANDO CONTROLLER arquivo message-controller.descricao.length < 10. } } Saturday. $scope.js: function MessageController($scope){ incializa a variavel de escopo descricao $scope.

} } Saturday.EXEMPLO USANDO CONTROLLER arquivo message-controller.descricao = "". 13 .js: function MessageController($scope){ $scope.length < 10.naoTemQuantidadeMinimaDeCaractres = function(){ return $scope. $scope. October 19.descricao.

descricao = "". inclui uma funcao no $scope para ser utilizada na UI $scope.length < 10.descricao. October 19. } } Saturday. 13 .EXEMPLO USANDO CONTROLLER arquivo message-controller.naoTemQuantidadeMinimaDeCaractres = function(){ return $scope.js: function MessageController($scope){ $scope.

EXEMPLO USANDO CONTROLLER arquivo message-controller.js: function MessageController($scope){ $scope.naoTemQuantidadeMinimaDeCaractres = function(){ return $scope. 13 .descricao = "". October 19.descricao. } } Saturday.length < 10. $scope.

naoTemQuantidadeMinimaDeCaractres = function(){ return $scope. } } Saturday.EXEMPLO USANDO CONTROLLER arquivo message-controller.descricao.descricao = "". October 19. 13 .js: declaracao do controlador recebendo $scope por parametro function MessageController($scope){ $scope.length < 10. $scope.

naoTemQuantidadeMinimaDeCaractres = function(){ return $scope.EXEMPLO USANDO CONTROLLER arquivo message-controller.js: function MessageController($scope){ $scope.length < 10.descricao = "". October 19.descricao. } } Saturday. $scope. 13 .

ESCOPOS ($SCOPE) Saturday. October 19. 13 .

13 . October 19. Saturday.ESCOPOS ($SCOPE) • são objetos AngularJS usados para expor modelos (dados) e funções para a view.

October 19.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. 13 .

ESCOPOS ($SCOPE) • são objetos AngularJS usados para expor modelos (dados) e funções para a view. 13 . October 19. • 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.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. 13 .

13 . October 19.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.

ESCOPOS ($SCOPE) • são objetos AngularJS usados para expor modelos (dados) e funções para a view. 13 . October 19. • 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.

13 .MODELOS Saturday. October 19.

Saturday. October 19. 13 .MODELOS • Modelos também sao objetos Javascript comuns.

• Não é necessario herdar de nenhum tipo especifico Saturday. October 19.MODELOS • Modelos também sao objetos Javascript comuns. 13 .

October 19. • Não é necessario herdar de nenhum tipo especifico • Na pratica qualquer variavel associada ao escopo é um modelo para o Angular Saturday.MODELOS • Modelos também sao objetos Javascript comuns. 13 .

• Não é necessario herdar de nenhum tipo especifico • Na pratica qualquer variavel associada ao escopo é um modelo para o Angular •É possivel utilizar como modelos. Saturday.MODELOS • Modelos também sao objetos Javascript comuns. Basta associa-los ao $scope. os seus objetos de dominio Javascript já existentes. 13 . October 19.

October 19. Saturday. //modelo $scope.cidades = [“rio de janeiro”.usuario = { nome: “Joao”.js: function OutroController($scope){ $scope. idade: 20 }. //modelo* } * considerando que exista a definição para o classe Produto. //modelo $scope. //modelo $scope.produto = new Produto().”sao paulo”].EXEMPLOS DE MODELOS arquivo outro-controller.descricao = "". 13 .

October 19. 13 .EXEMPLO: EXIBINDO UMA LISTAGEM DE EMPREGADOS Saturday.

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

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

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

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

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

October 19. 13 . PERMITINDO O CADASTRO DE NOVOS EMPREGADOS Saturday.EXIBINDO A LISTAGEM DE EMPREGADOS.

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

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

nome}}</td> <td>{{empregado.idade}}</td> </tr> </table> </div> </div> Saturday.1 arquivo index2. 13 .LISTA DE EMPREGADOS .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. October 19.

1 arquivo index2.idade}}</td> </tr> </table> </div> </div> Saturday. October 19.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.LISTA DE EMPREGADOS .nome}}</td> <td>{{empregado. 13 .

October 19. 13 .nome}}</td> <td>{{empregado.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.idade}}</td> </tr> </table> </div> </div> Saturday.1 arquivo index2.LISTA DE EMPREGADOS .

October 19.MELHORANDO O CODIGO Saturday. 13 .

idade: 30}). new Empregado({nome: 'Aristoteles'. return lista.novoEmpregado).nome || undefined. } function Empregado(args){ this. new Empregado({nome: 'Mario'. idade: 31}). idade: 25}).novoEmpregado = new Empregado({}). idade: 27}) ].idade = args.idade || undefined. } $scope. 13 .empregados = obterListaDeEmpregados(). $scope. new Empregado({nome: 'Percival'. }. idade: 22}). new Empregado({nome: 'Euclides'. new Empregado({nome: 'Maria'.novoEmpregado = new Empregado({}). October 19.nome = args.LISTA DE EMPREGADOS .js: function EmpresaController($scope){ $scope.1 arquivo empresa-controller3. $scope. idade: 50}). } Saturday.adicionarEmpregado = function(){ $scope. this. idade: 44}).empregados. idade: 20}). new Empregado({nome: 'Joao'. function obterListaDeEmpregados(){ var lista = [ new Empregado({nome: 'Zoraide'. new Empregado({nome: 'Flavia'.push($scope.

this. } Saturday. idade: 31}). idade: 50}). } $scope.nome || undefined.empregados = obterListaDeEmpregados(). new Empregado({nome: 'Percival'.novoEmpregado = new Empregado({}). return lista. 13 . October 19. idade: 25}). new Empregado({nome: 'Aristoteles'.adicionarEmpregado = function(){ $scope.js: function EmpresaController($scope){ $scope. }. function obterListaDeEmpregados(){ var lista = [ new Empregado({nome: 'Zoraide'.novoEmpregado). $scope.1 arquivo empresa-controller3. new Empregado({nome: 'Euclides'.idade || undefined. } function Empregado(args){ this.empregados. idade: 44}).idade = args. idade: 27}) ]. $scope. new Empregado({nome: 'Flavia'. new Empregado({nome: 'Maria'. idade: 20}). new Empregado({nome: 'Joao'.novoEmpregado = new Empregado({}). idade: 30}). new Empregado({nome: 'Mario'. idade: 22}).push($scope.nome = args.LISTA DE EMPREGADOS .

this.1 arquivo empresa-controller3. new Empregado({nome: 'Euclides'. } Saturday. new Empregado({nome: 'Mario'.LISTA DE EMPREGADOS .idade || undefined.empregados = obterListaDeEmpregados().nome || undefined. new Empregado({nome: 'Aristoteles'. new Empregado({nome: 'Joao'.novoEmpregado). idade: 27}) ]. idade: 20}). $scope. idade: 31}). idade: 25}). October 19.nome = args. } $scope. idade: 30}). }. function obterListaDeEmpregados(){ var lista = [ new Empregado({nome: 'Zoraide'.push($scope. new Empregado({nome: 'Maria'.novoEmpregado = new Empregado({}). new Empregado({nome: 'Percival'. } function Empregado(args){ this. $scope. new Empregado({nome: 'Flavia'. return lista.novoEmpregado = new Empregado({}). 13 .empregados.adicionarEmpregado = function(){ $scope. idade: 22}).idade = args.js: function EmpresaController($scope){ $scope. idade: 44}). idade: 50}).

idade: 25}).nome = args. }.novoEmpregado = new Empregado({}). idade: 20}). } function Empregado(args){ this. idade: 27}) ]. new Empregado({nome: 'Joao'.idade || undefined. new Empregado({nome: 'Mario'. idade: 30}). } $scope. new Empregado({nome: 'Maria'. 13 .push($scope. function obterListaDeEmpregados(){ var lista = [ new Empregado({nome: 'Zoraide'.LISTA DE EMPREGADOS . idade: 50}).js: function EmpresaController($scope){ $scope.empregados.empregados = obterListaDeEmpregados().nome || undefined. this.novoEmpregado). new Empregado({nome: 'Percival'. new Empregado({nome: 'Aristoteles'. new Empregado({nome: 'Flavia'. $scope. idade: 22}).adicionarEmpregado = function(){ $scope. idade: 31}).idade = args. new Empregado({nome: 'Euclides'.novoEmpregado = new Empregado({}). October 19. } Saturday. $scope.1 arquivo empresa-controller3. idade: 44}). return lista.

} $scope. idade: 30}). idade: 20}). return lista.nome || undefined. $scope.novoEmpregado = new Empregado({}). } function Empregado(args){ this. new Empregado({nome: 'Flavia'. $scope. idade: 31}). new Empregado({nome: 'Joao'. } Saturday. idade: 22}). idade: 50}). }. new Empregado({nome: 'Percival'.novoEmpregado = new Empregado({}). function obterListaDeEmpregados(){ var lista = [ new Empregado({nome: 'Zoraide'.LISTA DE EMPREGADOS .push($scope. idade: 27}) ].js: function EmpresaController($scope){ $scope. 13 . new Empregado({nome: 'Aristoteles'. new Empregado({nome: 'Mario'.idade = args. idade: 25}).adicionarEmpregado = function(){ $scope. idade: 44}).novoEmpregado). new Empregado({nome: 'Euclides'.1 arquivo empresa-controller3.empregados.nome = args.empregados = obterListaDeEmpregados(). this.idade || undefined. October 19. new Empregado({nome: 'Maria'.

idade: 31}).empregados = obterListaDeEmpregados(). idade: 50}). new Empregado({nome: 'Euclides'. new Empregado({nome: 'Flavia'. $scope. idade: 22}). return lista. idade: 27}) ]. new Empregado({nome: 'Joao'.nome || undefined. new Empregado({nome: 'Maria'. new Empregado({nome: 'Mario'.nome = args.LISTA DE EMPREGADOS . idade: 44}). }. } $scope. } Saturday.js: function EmpresaController($scope){ $scope.novoEmpregado = new Empregado({}). this. function obterListaDeEmpregados(){ var lista = [ new Empregado({nome: 'Zoraide'. 13 . } function Empregado(args){ this. idade: 30}).push($scope. $scope. October 19.1 arquivo empresa-controller3.idade = args.empregados. new Empregado({nome: 'Percival'.idade || undefined. idade: 25}).adicionarEmpregado = function(){ $scope.novoEmpregado = new Empregado({}).novoEmpregado). new Empregado({nome: 'Aristoteles'. idade: 20}).

novoEmpregado = new Empregado({}). new Empregado({nome: 'Euclides'. } $scope. new Empregado({nome: 'Maria'.1 arquivo empresa-controller3. October 19. } function Empregado(args){ this.js: function EmpresaController($scope){ $scope. function obterListaDeEmpregados(){ var lista = [ new Empregado({nome: 'Zoraide'. new Empregado({nome: 'Percival'. return lista.nome = args. new Empregado({nome: 'Flavia'. } Saturday.novoEmpregado = new Empregado({}). idade: 27}) ].idade = args. }. idade: 20}). $scope.idade || undefined.nome || undefined. 13 . idade: 50}). idade: 25}).adicionarEmpregado = function(){ $scope. idade: 30}). new Empregado({nome: 'Joao'.novoEmpregado). new Empregado({nome: 'Mario'.push($scope. idade: 44}). new Empregado({nome: 'Aristoteles'.empregados. idade: 22}).empregados = obterListaDeEmpregados(). idade: 31}).LISTA DE EMPREGADOS . this. $scope.

} $scope. return lista. new Empregado({nome: 'Mario'. idade: 25}).empregados.nome = args.novoEmpregado = new Empregado({}). idade: 22}). new Empregado({nome: 'Euclides'. idade: 44}). new Empregado({nome: 'Aristoteles'. new Empregado({nome: 'Flavia'. idade: 50}).novoEmpregado = new Empregado({}).adicionarEmpregado = function(){ $scope.1 arquivo empresa-controller3. new Empregado({nome: 'Joao'. idade: 31}).idade || undefined.idade = args. new Empregado({nome: 'Maria'.nome || undefined. 13 . new Empregado({nome: 'Percival'. October 19. idade: 27}) ]. idade: 30}). }.js: function EmpresaController($scope){ $scope. $scope.LISTA DE EMPREGADOS .novoEmpregado). $scope. this. } Saturday. idade: 20}).push($scope.empregados = obterListaDeEmpregados(). function obterListaDeEmpregados(){ var lista = [ new Empregado({nome: 'Zoraide'. } function Empregado(args){ this.

this. new Empregado({nome: 'Joao'.nome = args.LISTA DE EMPREGADOS .push($scope. function obterListaDeEmpregados(){ var lista = [ new Empregado({nome: 'Zoraide'. idade: 25}). new Empregado({nome: 'Maria'. }. idade: 44}).empregados. return lista. $scope. } function Empregado(args){ this. idade: 50}). idade: 27}) ]. new Empregado({nome: 'Euclides'.novoEmpregado = new Empregado({}).idade = args. } $scope. } Saturday. idade: 22}).1 arquivo empresa-controller3. 13 . new Empregado({nome: 'Percival'.adicionarEmpregado = function(){ $scope. new Empregado({nome: 'Mario'.nome || undefined.empregados = obterListaDeEmpregados(). October 19. new Empregado({nome: 'Flavia'.novoEmpregado). idade: 20}).idade || undefined. idade: 30}). new Empregado({nome: 'Aristoteles'.js: function EmpresaController($scope){ $scope.novoEmpregado = new Empregado({}). idade: 31}). $scope.

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. 13 .idade}}</td> </tr> </table> </div> </div> Saturday.LISTA DE EMPREGADOS .1 arquivo index3.html: <div ng-controller="EmpresaController"> <div> <form> <label>Nome</label><input ng-model='novoEmpregado. October 19.nome'/> <label>Idade</label><input ng-model='novoEmpregado.nome}}</td> <td>{{empregado.

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. 13 . October 19.LISTA DE EMPREGADOS .nome'/> <label>Idade</label><input ng-model='novoEmpregado.html: <div ng-controller="EmpresaController"> <div> <form> <label>Nome</label><input ng-model='novoEmpregado.1 arquivo index3.nome}}</td> <td>{{empregado.idade}}</td> </tr> </table> </div> </div> Saturday.

FILTROS Saturday. October 19. 13 .

FILTROS • São recursos do Angular para permitir a construção de expressões mais complexas. 13 . October 19. Saturday.

13 ja vem “de fabrica” com alguns bons filtros. • O Angular Saturday.FILTROS • São recursos do Angular para permitir a construção de expressões mais complexas. October 19. .

13 filters e json . uppercase • Array Transforming Saturday. dividios em 2 tipos: • Formating Filters • currency. lowercase. date.FILTROS • São recursos do Angular para permitir a construção de expressões mais complexas. number. October 19. • O Angular • São ja vem “de fabrica” com alguns bons filtros.

October 19.ORDENANDO A LISTA DE EMPREGADOS Saturday. 13 .

October 19.LISTA DE EMPREGADOS .idade}}</td> </tr> </table> </div> </div> Saturday.1 arquivo filtro1. 13 .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.

LISTA DE EMPREGADOS .idade}}</td> </tr> </table> </div> </div> Saturday.1 arquivo filtro1. 13 .nome}}</td> <td>{{empregado. October 19.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.

October 19.PESQUISANDO NA LISTA DE EMPREGADOS Saturday. 13 .

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

nome}}</td> <td>{{empregado.LISTA DE EMPREGADOS . October 19. 13 ..idade}}</td> </tr> </table> </div> <label> Pesquisar Por: <input ng-model="criteria"/> </div> Saturday.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.1 arquivo filtro2.

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

.. $route entre outros. 13 . e criar seus proprios “componentes” • Modules • Factories • Dependency Injection Saturday. Custom Directives • Uma forma de extender o HTML.OUTROS RECURSOS DO ANGULAR • Services • • $http. $window. October 19. $timeout.

COMO FICA A COMUNICAÇÃO COM O SERVER SIDE? JSON Saturday.Net Node.js Phyton . October 19. 13 Java Ruby .

13 Java Ruby .Net Node.js Phyton . 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.COMO FICA A COMUNICAÇÃO COM O SERVER SIDE? JSON e p t t h o $ ã s s .

October 19.ANGULARJS NÃO É BALA DE PRATA Saturday. 13 .

CONSIDERAÇÕES Saturday. October 19. 13 .

13 . avalie bem antes de decidir que abordagem utilizar. October 19. Existem relatos positivos e negativos quanto ao uso de frameworks MVC client-side Saturday.CONSIDERAÇÕES Cada caso é um caso.

October 19. é um post bem famoso Saturday. Existem relatos positivos e negativos quanto ao uso de frameworks MVC client-side Client-Side MVC is not a silver bullet.CONSIDERAÇÕES Cada caso é um caso. avalie bem antes de decidir que abordagem utilizar. 13 .

October 19.us/2013/02/26/client-side-mvc-is-not-a-silver-bullet Saturday.CONSIDERAÇÕES Cada caso é um caso. 13 . 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. avalie bem antes de decidir que abordagem utilizar.aculo.

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