Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

AngularJS Abraçando o MVC Client-Side

23,675 views

Published on

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

Published in: Technology

AngularJS Abraçando o MVC Client-Side

  1. 1. Abraçando o MVC Client Side Sergio Azevedo sergio.junior@caelum.com.br @sergioazevedo http://sagadoprogramador.com.br Saturday, October 19, 13
  2. 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. 3. Então qual o problema? Saturday, October 19, 13
  4. 4. Qual o problema? JQuery resolve isso muito bem Saturday, October 19, 13
  5. 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. 6. E o framework MVC client-side que veremos hoje será: Saturday, October 19, 13
  7. 7. VISÃO GERAL Saturday, October 19, 13
  8. 8. VISÃO GERAL • Framework Saturday, October 19, 13 MVC Javascript, para aplicações web dinamicas
  9. 9. VISÃO GERAL • Framework • Suporta Saturday, October 19, 13 MVC Javascript, para aplicações web dinamicas HTML 5
  10. 10. VISÃO GERAL • Framework MVC Javascript, para aplicações web dinamicas • Suporta HTML 5 • Extende o HTML (Diretivas) Saturday, October 19, 13
  11. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 24. WORK FLOW BASICO Saturday, October 19, 13
  25. 25. WORK FLOW BASICO 1. O browser recebe o html e faz executa o DOM parser Saturday, October 19, 13
  26. 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. 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. 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. 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
  30. 30. HTML COMPILER Saturday, October 19, 13
  31. 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. 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. 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
  34. 34. DIRETIVAS Saturday, October 19, 13
  35. 35. DIRETIVAS • São o jeito angular de criar páginas dinamicas. Saturday, October 19, 13
  36. 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. 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
  38. 38. ALGUMAS DIRETIVAS Saturday, October 19, 13
  39. 39. ALGUMAS DIRETIVAS • ng-app - bootstrap do angular Saturday, October 19, 13
  40. 40. ALGUMAS DIRETIVAS • ng-app - bootstrap do angular • ng-model - define/associa uma nova variavel no escopo corrente Saturday, October 19, 13
  41. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  56. 56. CONTROLADORES Saturday, October 19, 13
  57. 57. CONTROLADORES • São objetos Javascript convencionais Saturday, October 19, 13
  58. 58. CONTROLADORES • São objetos Javascript convencionais • Nao precisam herdar de nenhuma classe Saturday, October 19, 13
  59. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  77. 77. ESCOPOS ($SCOPE) Saturday, October 19, 13
  78. 78. ESCOPOS ($SCOPE) • são objetos AngularJS usados para expor modelos (dados) e funções para a view. Saturday, October 19, 13
  79. 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. 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. 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. 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. 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
  84. 84. MODELOS Saturday, October 19, 13
  85. 85. MODELOS • Modelos também sao objetos Javascript comuns. Saturday, October 19, 13
  86. 86. MODELOS • Modelos também sao objetos Javascript comuns. • Não é necessario herdar de nenhum tipo especifico Saturday, October 19, 13
  87. 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. 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. 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. 90. EXEMPLO: EXIBINDO UMA LISTAGEM DE EMPREGADOS Saturday, October 19, 13
  91. 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. 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. 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. 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. 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. 96. EXIBINDO A LISTAGEM DE EMPREGADOS. PERMITINDO O CADASTRO DE NOVOS EMPREGADOS Saturday, October 19, 13
  97. 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. 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. 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. 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. 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. 102. MELHORANDO O CODIGO Saturday, October 19, 13
  103. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  114. 114. FILTROS Saturday, October 19, 13
  115. 115. FILTROS • São recursos do Angular para permitir a construção de expressões mais complexas. Saturday, October 19, 13
  116. 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. 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. 118. ORDENANDO A LISTA DE EMPREGADOS Saturday, October 19, 13
  119. 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. 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. 121. PESQUISANDO NA LISTA DE EMPREGADOS Saturday, October 19, 13
  122. 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. 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. 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. 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. 126. COMO FICA A COMUNICAÇÃO COM O SERVER SIDE? JSON Saturday, October 19, 13 Java Ruby .Net Node.js Phyton
  127. 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. 128. ANGULARJS NÃO É BALA DE PRATA Saturday, October 19, 13
  129. 129. CONSIDERAÇÕES Saturday, October 19, 13
  130. 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. 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. 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
  133. 133. Obrigado! Sergio Azevedo sergio.junior@caelum.com.br @sergioazevedo http://sagadoprogramador.com.br Saturday, October 19, 13

×