AngularJS Abraçando o MVC Client-Side

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

2.
Arquitetura “padrão” de umaAplicaçã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 oproblema? Saturday, October 19, 13

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

5.
“A necessidade deum 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 frameworkMVC client-side que veremos hoje será: Saturday, October 19, 13

7.
VISÃO GERAL Saturday, October19, 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 MVCJavascript, para aplicações web dinamicas • Suporta HTML 5 • Extende o HTML (Diretivas) Saturday, October 19, 13

11.
VISÃO GERAL • Framework MVCJavascript, 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 MVCJavascript, 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 MVCJavascript, 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 MVCJavascript, 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> <scriptsrc="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> <scriptsrc="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.

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.

20.
COMEÇANDO <!doctype html> <html ng-app> <head> <scriptsrc="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.

22.
COMEÇANDO <!doctype html> <html ng-app> <head> <scriptsrc="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.

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, October19, 13

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

32.
HTML COMPILER Compile: Percorreo 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: Percorreo 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 jeitoangular de criar páginas dinamicas. Saturday, October 19, 13

36.
DIRETIVAS • São o jeitoangular 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 jeitoangular 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, October19, 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 textarea 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> <htmlng-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> <htmlng-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.

50.
EXEMPLO DIRETIVAS <!doctype html> <htmlng-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.

52.
EXEMPLO DIRETIVAS <!doctype html> <htmlng-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.

54.
EXEMPLO DIRETIVAS <!doctype html> <htmlng-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.

56.
CONTROLADORES Saturday, October 19,13

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

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

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

60.
CONTROLADORES • São objetos Javascriptconvencionais • 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 Javascriptconvencionais • 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 Javascriptconvencionais 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 arquivoindex2.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 arquivoindex2.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

65.

66.
EXEMPLO USANDO CONTROLLER arquivoindex2.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.

68.
EXEMPLO USANDO CONTROLLER arquivoindex2.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.

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

71.
EXEMPLO USANDO CONTROLLER arquivomessage-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.

73.
EXEMPLO USANDO CONTROLLER arquivomessage-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.

75.
EXEMPLO USANDO CONTROLLER arquivomessage-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.

77.
ESCOPOS ($SCOPE) Saturday, October19, 13

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

79.
ESCOPOS ($SCOPE) • são objetosAngularJS 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 objetosAngularJS 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 objetosAngularJS 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 objetosAngularJS 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 objetosAngularJS 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 saoobjetos Javascript comuns. Saturday, October 19, 13

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

87.
MODELOS • Modelos também saoobjetos 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 saoobjetos 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 arquivooutro-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 LISTAGEMDE EMPREGADOS Saturday, October 19, 13

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

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

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

94.

95.

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

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

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

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

100.

101.

102.
MELHORANDO O CODIGO Saturday,October 19, 13

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

104.

105.

106.

107.

108.

109.

110.

111.

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 doAngular para permitir a construção de expressões mais complexas. Saturday, October 19, 13

116.
FILTROS • São recursos doAngular 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 doAngular 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 LISTADE 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 LISTADE 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

123.

124.

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 ACOMUNICAÇÃO COM O SERVER SIDE? JSON Saturday, October 19, 13 Java Ruby .Net Node.js Phyton

127.
COMO FICA ACOMUNICAÇÃ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 É BALADE 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, October19, 13

AngularJS Abraçando o MVC Client-Side

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a AngularJS Abraçando o MVC Client-Side

AngularJS Abraçando o MVC Client-Side