angularjs abraçando o mvc client-side
DESCRIPTION
Apresenta o framwork AngularJS, e aborda o porque de se adotar um framework web mvc.TRANSCRIPT
Sergio [email protected]
@sergioazevedohttp://sagadoprogramador.com.br
Abraçando o MVC Client Side
Saturday, October 19, 13
Modelo
Arquitetura “padrão”de uma Aplicação Web
Server Side
Controlador
ViewTemplate
View Renderizada
Client Side http request
http response
html / json /xmlSaturday, October 19, 13
Então qual o problema?Saturday, October 19, 13
Qual o problema?JQuery resolve isso muito bem
Saturday, October 19, 13
fonte: http://jster.nethttp://jster.net/blog/why-should-you-use-client-side-mvc-framework#.UmH4-ZTwIjE
“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.”
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 MVC Javascript, para aplicações web dinamicas
Saturday, October 19, 13
VISÃO GERAL• Framework MVC Javascript, para aplicações web dinamicas
• Suporta HTML 5
Saturday, October 19, 13
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 de dependencias (de graça)
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 de dependencias (de graça)
• Two 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 de dependencias (de graça)
• Two way data binding
•Mantido pela Google
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> </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> <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>
bootstrap do 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> <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>
cria a variavel de modelo nome
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> </div> </body></html>
exibe o conteudo da variavel nome
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> <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>
cria a variavel de descricao atribuindo o valor vazio
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> </body></html>
Associa o variavel ao conteudo do text area
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> </body></html>
declara que a mensagem só pode ser exibida enquanto o usuario nao digitar 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> <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>
declara que o botao so deve estar habilitado se o 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 precisam herdar de nenhuma classe
• As responsabilidades de um controlador são:
Saturday, October 19, 13
CONTROLADORES
• São objetos Javascript convencionais
•Nao precisam herdar de nenhuma classe
• As responsabilidades de um controlador são:
• Incializar objetos do escopo ($scope). *(principal)
Saturday, October 19, 13
CONTROLADORES
• São objetos Javascript convencionais
•Nao precisam herdar de nenhuma classe
• As 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
•Nao precisam herdar de nenhuma classe
• As responsabilidades de um controlador são:
• Incializar objetos do escopo ($scope). *(principal)
• disponibilizar comportamento para UI através de funções ligadas ao $scope.
Você deve ev
itar o uso d
e
ng-init. Faç
a as
inicializaçõ
es de modelo
dentro de co
ntroladores
Saturday, October 19, 13
EXEMPLO USANDO CONTROLLER<!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 ng-disabled="naoTemQuantidadeMinimaDeCaractres()">Enviar</button>
</div> </body></html>
arquivo index2.html:
Saturday, October 19, 13
EXEMPLO USANDO CONTROLLER<!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 ng-disabled="naoTemQuantidadeMinimaDeCaractres()">Enviar</button>
</div> </body></html>
carrega o arquivo que define o controlador
arquivo index2.html:
Saturday, October 19, 13
EXEMPLO USANDO CONTROLLER<!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 ng-disabled="naoTemQuantidadeMinimaDeCaractres()">Enviar</button>
</div> </body></html>
arquivo index2.html:
Saturday, October 19, 13
EXEMPLO USANDO CONTROLLER<!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 ng-disabled="naoTemQuantidadeMinimaDeCaractres()">Enviar</button>
</div> </body></html>
declara o uso do controlador
arquivo index2.html:
Saturday, October 19, 13
EXEMPLO USANDO CONTROLLER<!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 ng-disabled="naoTemQuantidadeMinimaDeCaractres()">Enviar</button>
</div> </body></html>
arquivo index2.html:
Saturday, October 19, 13
EXEMPLO USANDO CONTROLLER<!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 ng-disabled="naoTemQuantidadeMinimaDeCaractres()">Enviar</button>
</div> </body></html>
faz uso de uma funcao do $scope
faz uso de uma funcao do $scope
arquivo index2.html:
Saturday, October 19, 13
EXEMPLO USANDO CONTROLLER<!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 ng-disabled="naoTemQuantidadeMinimaDeCaractres()">Enviar</button>
</div> </body></html>
arquivo index2.html:
Saturday, October 19, 13
EXEMPLO USANDO CONTROLLER
function MessageController($scope){
$scope.descricao = "";
$scope.naoTemQuantidadeMinimaDeCaractres = function(){ return $scope.descricao.length < 10; }
}
arquivo message-controller.js:
Saturday, October 19, 13
EXEMPLO USANDO CONTROLLER
function MessageController($scope){
$scope.descricao = "";
$scope.naoTemQuantidadeMinimaDeCaractres = function(){ return $scope.descricao.length < 10; }
}
arquivo message-controller.js:
incializa a variavel de escopo descricao
Saturday, October 19, 13
EXEMPLO USANDO CONTROLLER
function MessageController($scope){
$scope.descricao = "";
$scope.naoTemQuantidadeMinimaDeCaractres = function(){ return $scope.descricao.length < 10; }
}
arquivo message-controller.js:
Saturday, October 19, 13
EXEMPLO USANDO CONTROLLER
function MessageController($scope){
$scope.descricao = "";
$scope.naoTemQuantidadeMinimaDeCaractres = function(){ return $scope.descricao.length < 10; }
}
arquivo message-controller.js:
inclui uma funcao no $scope para ser utilizada na UI
Saturday, October 19, 13
EXEMPLO USANDO CONTROLLER
function MessageController($scope){
$scope.descricao = "";
$scope.naoTemQuantidadeMinimaDeCaractres = function(){ return $scope.descricao.length < 10; }
}
arquivo message-controller.js:
Saturday, October 19, 13
EXEMPLO USANDO CONTROLLER
function MessageController($scope){
$scope.descricao = "";
$scope.naoTemQuantidadeMinimaDeCaractres = function(){ return $scope.descricao.length < 10; }
}
arquivo message-controller.js:declaracao do controlador recebendo $scope por parametro
Saturday, October 19, 13
EXEMPLO USANDO CONTROLLER
function MessageController($scope){
$scope.descricao = "";
$scope.naoTemQuantidadeMinimaDeCaractres = function(){ return $scope.descricao.length < 10; }
}
arquivo message-controller.js:
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 ng-controller
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 ng-controller
• 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 ng-controller
• 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 ng-controller
• 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
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*
}
arquivo outro-controller.js:
* 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
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} ];
}
arquivo empresa-controller.js:
Saturday, October 19, 13
LISTA DE EMPREGADOS - 1
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} ];
}
arquivo empresa-controller.js:
Saturday, October 19, 13
LISTA DE EMPREGADOS - 1
... <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>...
arquivo index.html:
Saturday, October 19, 13
LISTA DE EMPREGADOS - 1
... <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>...
arquivo index.html:
Saturday, October 19, 13
LISTA DE EMPREGADOS - 1
... <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>...
arquivo index.html:
Saturday, October 19, 13
EXIBINDO A LISTAGEM DE EMPREGADOS.
PERMITINDO O CADASTRO DE NOVOS EMPREGADOS
Saturday, October 19, 13
LISTA DE EMPREGADOS - 1
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); };
}
arquivo empresa-controller2.js:
Saturday, October 19, 13
LISTA DE EMPREGADOS - 1
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); };
}
arquivo empresa-controller2.js:
Saturday, October 19, 13
LISTA DE EMPREGADOS - 1
<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>
arquivo index2.html:
Saturday, October 19, 13
LISTA DE EMPREGADOS - 1
<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>
arquivo index2.html:
Saturday, October 19, 13
LISTA DE EMPREGADOS - 1
<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>
arquivo index2.html:
Saturday, October 19, 13
MELHORANDO O CODIGO
Saturday, October 19, 13
LISTA DE EMPREGADOS - 1function 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;}
arquivo empresa-controller3.js:
Saturday, October 19, 13
LISTA DE EMPREGADOS - 1function 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;}
arquivo empresa-controller3.js:
Saturday, October 19, 13
LISTA DE EMPREGADOS - 1function 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;}
arquivo empresa-controller3.js:
Saturday, October 19, 13
LISTA DE EMPREGADOS - 1function 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;}
arquivo empresa-controller3.js:
Saturday, October 19, 13
LISTA DE EMPREGADOS - 1function 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;}
arquivo empresa-controller3.js:
Saturday, October 19, 13
LISTA DE EMPREGADOS - 1function 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;}
arquivo empresa-controller3.js:
Saturday, October 19, 13
LISTA DE EMPREGADOS - 1function 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;}
arquivo empresa-controller3.js:
Saturday, October 19, 13
LISTA DE EMPREGADOS - 1function 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;}
arquivo empresa-controller3.js:
Saturday, October 19, 13
LISTA DE EMPREGADOS - 1function 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;}
arquivo empresa-controller3.js:
Saturday, October 19, 13
LISTA DE EMPREGADOS - 1
<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>
arquivo index3.html:
Saturday, October 19, 13
LISTA DE EMPREGADOS - 1
<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>
arquivo index3.html:
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 ja vem “de fabrica” com alguns bons filtros.
Saturday, October 19, 13
FILTROS• São recursos do Angular para permitir a construção de
expressões mais complexas.
•O Angular ja vem “de fabrica” com alguns bons filtros.
• São dividios em 2 tipos:
• Formating Filters
• currency, date, number, lowercase, uppercase e json
• Array Transforming filters
Saturday, October 19, 13
ORDENANDO A LISTA DE EMPREGADOS
Saturday, October 19, 13
LISTA DE EMPREGADOS - 1
<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>
arquivo filtro1.html:
Saturday, October 19, 13
LISTA DE EMPREGADOS - 1
<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>
arquivo filtro1.html:
Saturday, October 19, 13
PESQUISANDO NA LISTA DE EMPREGADOS
Saturday, October 19, 13
LISTA DE EMPREGADOS - 1
<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>
arquivo filtro2.html:
Saturday, October 19, 13
LISTA DE EMPREGADOS - 1
<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>
arquivo filtro2.html:
Saturday, October 19, 13
LISTA DE EMPREGADOS - 1
<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>
arquivo filtro2.html:
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?
JavaRuby.Net
Node.jsPhyton
JSON
Saturday, October 19, 13
COMO FICA A COMUNICAÇÃO COM O SERVER SIDE?
JavaRuby.Net
Node.jsPhyton
JSON
Os serviços
$http e
$resource do
AngularJS,s
ão
opções para
realizar est
a
comunicação
Saturday, October 19, 13
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
Sergio [email protected]
@sergioazevedohttp://sagadoprogramador.com.br
Obrigado!
Saturday, October 19, 13