SlideShare uma empresa Scribd logo
1 de 133
Baixar para ler offline
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

uest
p req
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
Qual o problema?
JQuery resolve isso muito bem
Saturday, October 19, 13
“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
E o framework MVC
client-side que veremos hoje será:

Saturday, October 19, 13
VISÃO GERAL

Saturday, October 19, 13
VISÃO GERAL
• Framework

Saturday, October 19, 13

MVC Javascript, para aplicações web dinamicas
VISÃO GERAL
• Framework
• Suporta

Saturday, October 19, 13

MVC Javascript, para aplicações web dinamicas

HTML 5
VISÃO GERAL
• Framework

MVC Javascript, para aplicações web dinamicas

• Suporta

HTML 5

• Extende

o HTML (Diretivas)

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

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

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
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
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
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
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
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
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
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
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
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
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 serviço de compilação 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 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
HTML COMPILER

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

Saturday, October 19, 13
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
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
DIRETIVAS

Saturday, October 19, 13
DIRETIVAS

• São

o jeito angular de criar páginas dinamicas.

Saturday, October 19, 13
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
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 - 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 expressão 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 expressão 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
• São

objetos Javascript convencionais

Saturday, October 19, 13
CONTROLADORES
• São

objetos Javascript convencionais

• Nao

precisam herdar de nenhuma classe

Saturday, October 19, 13
CONTROLADORES
• São

objetos Javascript convencionais

• Nao
• As

precisam herdar de nenhuma classe

responsabilidades de um controlador são:

Saturday, October 19, 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

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
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)
•

são objetos AngularJS usados para expor modelos (dados) e funções
para a view.

Saturday, October 19, 13
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
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
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
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
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
MODELOS

Saturday, October 19, 13
MODELOS
•

Modelos também sao objetos Javascript comuns.

Saturday, October 19, 13
MODELOS
•

Modelos também sao objetos Javascript comuns.

• Não

é necessario herdar de nenhum tipo especifico

Saturday, October 19, 13
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
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
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
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
• São

recursos do Angular para permitir a construção de
expressões mais complexas.

Saturday, October 19, 13
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.
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
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 COMUNICAÇÃO
COM O SERVER SIDE?
JSON

Saturday, October 19, 13

Java
Ruby
.Net
Node.js
Phyton
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
ANGULARJS
NÃO É BALA DE PRATA
Saturday, October 19, 13
CONSIDERAÇÕES

Saturday, October 19, 13
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
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
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
Obrigado!
Sergio Azevedo
sergio.junior@caelum.com.br
@sergioazevedo
http://sagadoprogramador.com.br
Saturday, October 19, 13

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
 
Apresentação AngularJS - Angular UI
Apresentação AngularJS - Angular UIApresentação AngularJS - Angular UI
Apresentação AngularJS - Angular UI
 
Angular js
Angular jsAngular js
Angular js
 
AngularJS - Just Digital
AngularJS - Just DigitalAngularJS - Just Digital
AngularJS - Just Digital
 
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDAANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA
 
Domain-Driven Design
Domain-Driven DesignDomain-Driven Design
Domain-Driven Design
 
Visão Geral sobre Angular JS
Visão Geral sobre Angular JSVisão Geral sobre Angular JS
Visão Geral sobre Angular JS
 
Curso AngularJS - Parte 2
Curso AngularJS - Parte 2Curso AngularJS - Parte 2
Curso AngularJS - Parte 2
 
Performance com AngularJS
Performance com AngularJSPerformance com AngularJS
Performance com AngularJS
 
O futuro dos WebApps com AngularJS 2.0
O futuro dos WebApps com AngularJS 2.0O futuro dos WebApps com AngularJS 2.0
O futuro dos WebApps com AngularJS 2.0
 
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
 
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
 
React - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UIReact - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UI
 
Apresentação angular js
Apresentação angular jsApresentação angular js
Apresentação angular js
 
Construindo Diretivas com AngularJS
Construindo Diretivas com AngularJSConstruindo Diretivas com AngularJS
Construindo Diretivas com AngularJS
 
AngularJS com NODE.JS e Socket.IO
AngularJS com NODE.JS e Socket.IOAngularJS com NODE.JS e Socket.IO
AngularJS com NODE.JS e Socket.IO
 
React - Introdução
React - IntroduçãoReact - Introdução
React - Introdução
 
Começando com Vue.js
Começando com Vue.jsComeçando com Vue.js
Começando com Vue.js
 
Como Perder Peso (no browser)
Como Perder Peso (no browser)Como Perder Peso (no browser)
Como Perder Peso (no browser)
 
Um futuro chamado Web Components
Um futuro chamado Web ComponentsUm futuro chamado Web Components
Um futuro chamado Web Components
 

Destaque

Front-end Development
Front-end DevelopmentFront-end Development
Front-end Development
Edy Segura
 

Destaque (20)

Criando aplicações Single-Page com AngularJS
Criando aplicações Single-Page com AngularJSCriando aplicações Single-Page com AngularJS
Criando aplicações Single-Page com AngularJS
 
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJSUtilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
 
Desenvolvendo Bots com Inteligência Artificial para negócios em Ruby
 Desenvolvendo Bots com Inteligência Artificial para negócios em Ruby Desenvolvendo Bots com Inteligência Artificial para negócios em Ruby
Desenvolvendo Bots com Inteligência Artificial para negócios em Ruby
 
Html5,css3,javascript o lugar onde sonhos se tornam realidade.
Html5,css3,javascript   o lugar onde sonhos se tornam realidade.Html5,css3,javascript   o lugar onde sonhos se tornam realidade.
Html5,css3,javascript o lugar onde sonhos se tornam realidade.
 
Front-end Development
Front-end DevelopmentFront-end Development
Front-end Development
 
Mercado Front-End no Brasil e no mundo
Mercado Front-End no Brasil e no mundoMercado Front-End no Brasil e no mundo
Mercado Front-End no Brasil e no mundo
 
Engenharia de front end de alta performance
Engenharia de front end de alta performanceEngenharia de front end de alta performance
Engenharia de front end de alta performance
 
Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...
Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...
Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...
 
Minicurso Web. Front-end e HTML5 (parte 2)
Minicurso Web. Front-end e HTML5 (parte 2)Minicurso Web. Front-end e HTML5 (parte 2)
Minicurso Web. Front-end e HTML5 (parte 2)
 
SASS + COMPASS - Alta Produtividade no Front-end
SASS + COMPASS - Alta Produtividade no Front-endSASS + COMPASS - Alta Produtividade no Front-end
SASS + COMPASS - Alta Produtividade no Front-end
 
Minicurso Web. Front-end e HTML5 (parte 1)
Minicurso Web. Front-end e HTML5 (parte 1)Minicurso Web. Front-end e HTML5 (parte 1)
Minicurso Web. Front-end e HTML5 (parte 1)
 
SEO para Front-End
SEO para Front-EndSEO para Front-End
SEO para Front-End
 
Os mitos do desenvolvimento front-end
Os mitos do desenvolvimento front-endOs mitos do desenvolvimento front-end
Os mitos do desenvolvimento front-end
 
O Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndO Papel do desenvolvedor Front End
O Papel do desenvolvedor Front End
 
Iniciando com jQuery
Iniciando com jQueryIniciando com jQuery
Iniciando com jQuery
 
Curso AngularJS - 2. conceptos básicos
Curso AngularJS - 2. conceptos básicosCurso AngularJS - 2. conceptos básicos
Curso AngularJS - 2. conceptos básicos
 
Curso AngularJS - 3. módulos y controladores
Curso AngularJS - 3. módulos y controladoresCurso AngularJS - 3. módulos y controladores
Curso AngularJS - 3. módulos y controladores
 
Evoluindo a arquitetura de uma aplicação com AngularJS
Evoluindo a arquitetura de uma aplicação com AngularJSEvoluindo a arquitetura de uma aplicação com AngularJS
Evoluindo a arquitetura de uma aplicação com AngularJS
 
Curso AngularJS - 1. introducción
Curso AngularJS - 1. introducciónCurso AngularJS - 1. introducción
Curso AngularJS - 1. introducción
 
Validando Formulários com AngularJS
Validando Formulários com AngularJSValidando Formulários com AngularJS
Validando Formulários com AngularJS
 

Semelhante a AngularJS Abraçando o MVC Client-Side

Spring MVC Framework
Spring MVC FrameworkSpring MVC Framework
Spring MVC Framework
elliando dias
 

Semelhante a AngularJS Abraçando o MVC Client-Side (20)

Neto Marin - Next Level Apps
Neto Marin - Next Level AppsNeto Marin - Next Level Apps
Neto Marin - Next Level Apps
 
Projetando Apps
Projetando AppsProjetando Apps
Projetando Apps
 
Angular 4 Ionic 3 Cordova 5
Angular 4 Ionic 3 Cordova 5Angular 4 Ionic 3 Cordova 5
Angular 4 Ionic 3 Cordova 5
 
Java script aula 10 - angularjs
Java script   aula 10 - angularjsJava script   aula 10 - angularjs
Java script aula 10 - angularjs
 
Angular 2, TypeScript e Além
Angular 2, TypeScript e AlémAngular 2, TypeScript e Além
Angular 2, TypeScript e Além
 
Spring MVC Framework
Spring MVC FrameworkSpring MVC Framework
Spring MVC Framework
 
Construindo sua primeira ontologia
Construindo sua primeira ontologiaConstruindo sua primeira ontologia
Construindo sua primeira ontologia
 
Desenvolvimento de aplicações para o Google App Engine
Desenvolvimento de aplicações para o Google App EngineDesenvolvimento de aplicações para o Google App Engine
Desenvolvimento de aplicações para o Google App Engine
 
Desenvolvimento de Aplicações para o Google App Engine (CPBR5)
Desenvolvimento de Aplicações para o Google App Engine (CPBR5)Desenvolvimento de Aplicações para o Google App Engine (CPBR5)
Desenvolvimento de Aplicações para o Google App Engine (CPBR5)
 
Projetos reativos com Angular, RxJS e Redux (ngRx)
Projetos reativos com Angular, RxJS e Redux (ngRx)Projetos reativos com Angular, RxJS e Redux (ngRx)
Projetos reativos com Angular, RxJS e Redux (ngRx)
 
Ionic Framework - Parte 1 - Iniciando um Projeto mais Robusto
Ionic Framework - Parte 1 - Iniciando um Projeto mais RobustoIonic Framework - Parte 1 - Iniciando um Projeto mais Robusto
Ionic Framework - Parte 1 - Iniciando um Projeto mais Robusto
 
Desenvolvendo com Angular CLI
Desenvolvendo com Angular CLIDesenvolvendo com Angular CLI
Desenvolvendo com Angular CLI
 
2° Codelab - Por onde começar com AngularJS
2° Codelab  - Por onde começar com AngularJS2° Codelab  - Por onde começar com AngularJS
2° Codelab - Por onde começar com AngularJS
 
SEO para Front-End - BeagaJS
SEO para Front-End - BeagaJSSEO para Front-End - BeagaJS
SEO para Front-End - BeagaJS
 
JAX-RS 2.0
JAX-RS 2.0JAX-RS 2.0
JAX-RS 2.0
 
Workshop react + adonis.js
Workshop react + adonis.jsWorkshop react + adonis.js
Workshop react + adonis.js
 
Aula 1 view model livedata e databinding.pptx
Aula 1   view model livedata e databinding.pptxAula 1   view model livedata e databinding.pptx
Aula 1 view model livedata e databinding.pptx
 
Django Módulo Básico Parte II
Django Módulo Básico Parte IIDjango Módulo Básico Parte II
Django Módulo Básico Parte II
 
Aprendendo Angular com a CLI
Aprendendo Angular com a CLIAprendendo Angular com a CLI
Aprendendo Angular com a CLI
 
AngularJS Components - Semana da Informática 2016
AngularJS Components - Semana da Informática 2016AngularJS Components - Semana da Informática 2016
AngularJS Components - Semana da Informática 2016
 

Último

Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Dirceu Resende
 

Último (9)

[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
 
Entrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo PagliusiEntrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo Pagliusi
 
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdfFrom_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
 
Apostila e caderno de exercicios de WORD
Apostila e caderno de exercicios de  WORDApostila e caderno de exercicios de  WORD
Apostila e caderno de exercicios de WORD
 
O futuro e o impacto da tecnologia nas salas de aulas
O futuro e o impacto da tecnologia  nas salas de aulasO futuro e o impacto da tecnologia  nas salas de aulas
O futuro e o impacto da tecnologia nas salas de aulas
 
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
 
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIAEAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
 
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo PagliusiPalestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
 
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINASCOI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
 

AngularJS Abraçando o MVC Client-Side

  • 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
  • 3. Então qual o problema? Saturday, October 19, 13
  • 4. Qual o problema? JQuery resolve isso muito bem Saturday, October 19, 13
  • 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
  • 8. VISÃO GERAL • Framework Saturday, October 19, 13 MVC Javascript, para aplicações web dinamicas
  • 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
  • 24. WORK FLOW BASICO 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
  • 35. DIRETIVAS • São o jeito angular de criar páginas dinamicas. 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
  • 39. ALGUMAS DIRETIVAS • ng-app - bootstrap do angular 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
  • 47. 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
  • 48. 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
  • 49. 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
  • 50. 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
  • 51. 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
  • 52. 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
  • 53. 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
  • 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
  • 55. 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
  • 57. CONTROLADORES • São objetos Javascript convencionais Saturday, October 19, 13
  • 58. CONTROLADORES • São objetos Javascript convencionais • Nao precisam herdar de nenhuma classe 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
  • 63. 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
  • 64. 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
  • 65. 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
  • 66. 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
  • 67. 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
  • 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
  • 69. 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
  • 70. EXEMPLO USANDO CONTROLLER arquivo message-controller.js: function MessageController($scope){ $scope.descricao = ""; $scope.naoTemQuantidadeMinimaDeCaractres = function(){ return $scope.descricao.length < 10; } } Saturday, October 19, 13
  • 71. 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
  • 72. EXEMPLO USANDO CONTROLLER arquivo message-controller.js: function MessageController($scope){ $scope.descricao = ""; $scope.naoTemQuantidadeMinimaDeCaractres = function(){ return $scope.descricao.length < 10; } } 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
  • 74. EXEMPLO USANDO CONTROLLER arquivo message-controller.js: function MessageController($scope){ $scope.descricao = ""; $scope.naoTemQuantidadeMinimaDeCaractres = function(){ return $scope.descricao.length < 10; } } Saturday, October 19, 13
  • 75. 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
  • 76. EXEMPLO USANDO CONTROLLER arquivo message-controller.js: function MessageController($scope){ $scope.descricao = ""; $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
  • 85. MODELOS • Modelos também sao objetos Javascript comuns. 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
  • 90. EXEMPLO: EXIBINDO UMA LISTAGEM DE EMPREGADOS Saturday, October 19, 13
  • 91. 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
  • 92. 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
  • 93. 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
  • 94. 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
  • 95. 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
  • 96. EXIBINDO A LISTAGEM DE EMPREGADOS. PERMITINDO O CADASTRO DE NOVOS EMPREGADOS Saturday, October 19, 13
  • 97. 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
  • 98. 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
  • 99. 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
  • 100. 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
  • 101. 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
  • 102. MELHORANDO O CODIGO Saturday, October 19, 13
  • 103. 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
  • 104. 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
  • 105. 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
  • 106. 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
  • 107. 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
  • 108. 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
  • 109. 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
  • 110. 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
  • 111. 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
  • 112. 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
  • 113. 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
  • 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
  • 118. ORDENANDO A LISTA DE EMPREGADOS Saturday, October 19, 13
  • 119. 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
  • 120. 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
  • 121. PESQUISANDO NA LISTA DE EMPREGADOS Saturday, October 19, 13
  • 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
  • 128. ANGULARJS NÃO É BALA DE PRATA Saturday, October 19, 13
  • 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