AngularJS Abraçando o MVC Client-Side
Upcoming SlideShare
Loading in...5
×
 

AngularJS Abraçando o MVC Client-Side

on

  • 10,734 views

Apresenta o framwork AngularJS, e aborda o porque de se adotar um framework web mvc.

Apresenta o framwork AngularJS, e aborda o porque de se adotar um framework web mvc.

Statistics

Views

Total Views
10,734
Views on SlideShare
6,403
Embed Views
4,331

Actions

Likes
19
Downloads
193
Comments
0

9 Embeds 4,331

http://www.estudiosite.com.br 2181
http://www.raloliver.com.br 1734
http://raloliver.com.br 401
http://www.linkedin.com 6
http://www.google.com.br 3
https://www.facebook.com 2
https://www.linkedin.com 2
https://twitter.com 1
http://webcache.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    AngularJS Abraçando o MVC Client-Side AngularJS Abraçando o MVC Client-Side Presentation Transcript

    • 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