Abraçando o MVC Client Side com AngularJS

1. Abraçando o MVC Client Side Sergio Azevedo sergio.junior@caelum.com.br @sergioazevedo http://sagadoprogramador.com.br Saturday, October 19, 13

2. Arquitetura “padrão” de uma Aplicação Web Server Side Client Side h uest p req tt htt pr esp on Controlador View Template se html / json /xml Saturday, October 19, 13 Modelo View Renderizada

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

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

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

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

7. VISÃO GERAL Saturday, October 19, 13

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

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

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

11. VISÃO GERAL • Framework MVC Javascript, para aplicações web dinamicas • Suporta HTML 5 • Extende o HTML (Diretivas) • Usa abordagem declarativa para expressar logica nas views Saturday, October 19, 13

12. VISÃO GERAL • Framework MVC Javascript, para aplicações web dinamicas • Suporta HTML 5 • Extende o HTML (Diretivas) • Usa abordagem declarativa para expressar logica nas views • Injeção Saturday, October 19, 13 de dependencias (de graça)

13. VISÃO GERAL • Framework MVC Javascript, para aplicações web dinamicas • Suporta HTML 5 • Extende o HTML (Diretivas) • Usa abordagem declarativa para expressar logica nas views • Injeção • Two de dependencias (de graça) way data binding Saturday, October 19, 13

14. VISÃO GERAL • Framework MVC Javascript, para aplicações web dinamicas • Suporta HTML 5 • Extende o HTML (Diretivas) • Usa abordagem declarativa para expressar logica nas views • Injeção • Two de dependencias (de graça) way data binding • Mantido Saturday, October 19, 13 pela Google

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

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

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

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

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

24. WORK FLOW BASICO Saturday, October 19, 13

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

26. WORK FLOW BASICO 1. O browser recebe o html e faz executa o DOM parser 2. O browser carrega o script do angular.js Saturday, October 19, 13

27. WORK FLOW BASICO 1. O browser recebe o html e faz executa o DOM parser 2. O browser carrega o script do angular.js 3. Angular busca pela diretiva ng-app Saturday, October 19, 13

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

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

30. HTML COMPILER Saturday, October 19, 13

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

32. HTML COMPILER Compile: Percorre o DOM em busca de diretivas e entrega como resultado uma função de link Link: Combina as diretivas com o escopo ($scope) e gera assim a visão. Qualquer atleração em um modelo de um scope será reﬂetida na visão, assim como qualquer interação do usuario com a visão será reﬂetida no scope. Saturday, October 19, 13

33. HTML COMPILER Compile: Percorre o DOM em busca de diretivas e entrega como resultado uma função de link Link: Combina as diretivas com o escopo ($scope) e gera assim a visão. Qualquer atleração em um modelo de um scope será reﬂetida na visão, assim como qualquer interação do usuario com a visão será reﬂetida no scope. “Two way data binding” Saturday, October 19, 13

34. DIRETIVAS Saturday, October 19, 13

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

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

37. DIRETIVAS • São o jeito angular de criar páginas dinamicas. • Angular usa uma abordagem declarativa para expressar o comportamento desejado dentro das views. • Você deve focar em descrever o comportamento desejado. Saturday, October 19, 13

38. ALGUMAS DIRETIVAS Saturday, October 19, 13

39. ALGUMAS DIRETIVAS • ng-app - bootstrap do angular Saturday, October 19, 13

40. ALGUMAS DIRETIVAS • ng-app - bootstrap do angular • ng-model - deﬁne/associa uma nova variavel no escopo corrente Saturday, October 19, 13

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

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

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

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

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

46. Exemplo: Exibir um text area e garantir que o botao enviar so funcione quando o usuario preencher no minimo 10 caracteres Saturday, October 19, 13

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

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

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

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

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

56. CONTROLADORES Saturday, October 19, 13

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

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

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

60. CONTROLADORES • São objetos Javascript convencionais • Nao • As precisam herdar de nenhuma classe responsabilidades de um controlador são: • Incializar Saturday, October 19, 13 objetos do escopo ($scope). *(principal)

61. CONTROLADORES • São objetos Javascript convencionais • Nao • As precisam herdar de nenhuma classe responsabilidades de um controlador são: • Incializar objetos do escopo ($scope). *(principal) • disponibilizar comportamento para UI através de funções ligadas ao $scope. Saturday, October 19, 13

62. CONTROLADORES • São objetos Javascript convencionais o de o us itar • Nao precisam herdare ev ça s el ev de nenhumaaclasseo cê d init. Fa Vo mod nges de adores zaçõ controlador são: • As responsabilidadeslde um ntrol cia i e co ini tro d den • Incializar objetos do escopo ($scope). *(principal) • disponibilizar comportamento para UI através de funções ligadas ao $scope. Saturday, October 19, 13

63. EXEMPLO USANDO CONTROLLER arquivo index2.html: <!doctype html> <html ng-app> <head> <script src="../angular.js"></script> <script src="message-controller.js"></script> </head> <body ng-controller="MessageController"> <div> <textarea ng-model="descricao">{{descricao}}</textarea> </div> <p ng-show='naoTemQuantidadeMinimaDeCaractres()'>Minimo de 10 caracteres</p> <div> <button ngdisabled="naoTemQuantidadeMinimaDeCaractres()">Enviar</button> </div> </body> </html> Saturday, October 19, 13

64. EXEMPLO USANDO CONTROLLER arquivo index2.html: <!doctype html> <html ng-app> carrega o arquivo que deﬁne 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

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

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

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

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

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

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

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

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

79. ESCOPOS ($SCOPE) • são objetos AngularJS usados para expor modelos (dados) e funções para a view. • São conceitualmente parecidos com o ViewModel do padrão MVVM (Model View ViewModel) Saturday, October 19, 13

80. ESCOPOS ($SCOPE) • são objetos AngularJS usados para expor modelos (dados) e funções para a view. • São conceitualmente parecidos com o ViewModel do padrão MVVM (Model View ViewModel) • Novos escopos são criados sempre que o Angular encontra a diretiva ngcontroller Saturday, October 19, 13

81. ESCOPOS ($SCOPE) • são objetos AngularJS usados para expor modelos (dados) e funções para a view. • São conceitualmente parecidos com o ViewModel do padrão MVVM (Model View ViewModel) • Novos escopos são criados sempre que o Angular encontra a diretiva ngcontroller • Todos os escopos possuem referencias para seus “pais” Saturday, October 19, 13

82. ESCOPOS ($SCOPE) • são objetos AngularJS usados para expor modelos (dados) e funções para a view. • São conceitualmente parecidos com o ViewModel do padrão MVVM (Model View ViewModel) • Novos escopos são criados sempre que o Angular encontra a diretiva ngcontroller • Todos os escopos possuem referencias para seus “pais” • Ou seja eles são organizados em uma arvore de escopos Saturday, October 19, 13

83. ESCOPOS ($SCOPE) • são objetos AngularJS usados para expor modelos (dados) e funções para a view. • São conceitualmente parecidos com o ViewModel do padrão MVVM (Model View ViewModel) • Novos escopos são criados sempre que o Angular encontra a diretiva ngcontroller • Todos os escopos possuem referencias para seus “pais” • Ou seja eles são organizados em uma arvore de escopos • Onde o nó raiz é o $rootScope Saturday, October 19, 13

84. MODELOS Saturday, October 19, 13

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

86. MODELOS • Modelos também sao objetos Javascript comuns. • Não é necessario herdar de nenhum tipo especiﬁco Saturday, October 19, 13

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

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

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

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

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

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

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

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

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

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

99. LISTA DE EMPREGADOS - 1 arquivo index2.html: <div ng-controller="EmpresaController"> <div> <form> <label>Nome</label><input ng-model='nome'/> <label>Idade</label><input ng-model='idade'/> <button ng-click="adicionarEmpregado()">Incluir</button> </form> </div> <div> <table> <tr> <th>Nome</th> <th>Idade</th> </tr> <tr ng-repeat="empregado in empregados"> <td>{{empregado.nome}}</td> <td>{{empregado.idade}}</td> </tr> </table> </div> </div> Saturday, October 19, 13

102. MELHORANDO O CODIGO Saturday, October 19, 13

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

112. LISTA DE EMPREGADOS - 1 arquivo index3.html: <div ng-controller="EmpresaController"> <div> <form> <label>Nome</label><input ng-model='novoEmpregado.nome'/> <label>Idade</label><input ng-model='novoEmpregado.idade'/> <button ng-click="adicionarEmpregado()">Incluir</button> </form> </div> <div> <table> <tr> <th>Nome</th> <th>Idade</th> </tr> <tr ng-repeat="empregado in empregados"> <td>{{empregado.nome}}</td> <td>{{empregado.idade}}</td> </tr> </table> </div> </div> Saturday, October 19, 13

113. LISTA DE EMPREGADOS - 1 arquivo index3.html: <div ng-controller="EmpresaController"> <div> <form> <label>Nome</label><input ng-model='novoEmpregado.nome'/> <label>Idade</label><input ng-model='novoEmpregado.idade'/> <button ng-click="adicionarEmpregado()">Incluir</button> </form> </div> <div> <table> <tr> <th>Nome</th> <th>Idade</th> </tr> <tr ng-repeat="empregado in empregados"> <td>{{empregado.nome}}</td> <td>{{empregado.idade}}</td> </tr> </table> </div> </div> Saturday, October 19, 13

114. FILTROS Saturday, October 19, 13

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

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

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 ﬁltros. dividios em 2 tipos: • Formating Filters • currency, date, number, lowercase, uppercase • Array Transforming Saturday, October 19, 13 ﬁlters e json

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

119. LISTA DE EMPREGADOS - 1 arquivo ﬁltro1.html: <div ng-controller="EmpresaController"> <div> <form> <label>Nome</label><input ng-model='nome'/> <label>Idade</label><input ng-model='idade'/> <button ng-click="adicionarEmpregado()">Incluir</button> </form> </div> <div> <table> <tr> <th>Nome</th> <th>Idade</th> </tr> <tr ng-repeat="empregado in empregados | orderBy:[nome]"> <td>{{empregado.nome}}</td> <td>{{empregado.idade}}</td> </tr> </table> </div> </div> Saturday, October 19, 13

120. LISTA DE EMPREGADOS - 1 arquivo ﬁltro1.html: <div ng-controller="EmpresaController"> <div> <form> <label>Nome</label><input ng-model='nome'/> <label>Idade</label><input ng-model='idade'/> <button ng-click="adicionarEmpregado()">Incluir</button> </form> </div> <div> <table> <tr> <th>Nome</th> <th>Idade</th> </tr> <tr ng-repeat="empregado in empregados | orderBy:[nome]"> <td>{{empregado.nome}}</td> <td>{{empregado.idade}}</td> </tr> </table> </div> </div> Saturday, October 19, 13

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

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

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

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

127. COMO FICA A COMUNICAÇÃO COM O SERVER SIDE? JSON ttp e são s $h rJS, rviço ngula s se do A O esta izar ce esour para real o $r caçã ões opç omuni c Saturday, October 19, 13 Java Ruby .Net Node.js Phyton

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

129. CONSIDERAÇÕES Saturday, October 19, 13

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

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

132. CONSIDERAÇÕES Cada caso é um caso, avalie bem antes de decidir que abordagem utilizar. Existem relatos positivos e negativos quanto ao uso de frameworks MVC client-side Client-Side MVC is not a silver bullet, é um post bem famoso http://mir.aculo.us/2013/02/26/client-side-mvc-is-not-a-silver-bullet Saturday, October 19, 13

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

Abraçando o MVC Client Side com AngularJS

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à Abraçando o MVC Client Side com AngularJS

Similaire à Abraçando o MVC Client Side com AngularJS (20)

Abraçando o MVC Client Side com AngularJS