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.

Angular JS - Fundamentos

593 views

Published on

Introdução ao Framework AngularJS através de exemplos práticos

Published in: Software
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Angular JS - Fundamentos

  1. 1. Eduardo Mendes de Oliveira edumendes@gmail.com
  2. 2. Eduardo Mendes (edumendes@gmail.com) Introdução 2
  3. 3. Eduardo Mendes (edumendes@gmail.com) AngularJS 3 Ajuda a organizar o JS Boa escolha para sites dinâmicos Se comunica com jQuery Possibilita a criação de sites interativos Fácil de testar Framework JS para o lado do cliente capaz de adicionar interatividade ao HTML
  4. 4. Eduardo Mendes (edumendes@gmail.com) Arquitetura MVC 4
  5. 5. Eduardo Mendes (edumendes@gmail.com)5 Cross-Browser JavaScript
  6. 6. Eduardo Mendes (edumendes@gmail.com) Diretivas Módulos Controles Expressões 6 Anotações HTML que disparam comportamentos JS Onde estão localizados os componentes Onde se adicionar comportamento à aplicação A forma de exibir os valores nas páginas
  7. 7. Eduardo Mendes (edumendes@gmail.com) Diretivas 7
  8. 8. Eduardo Mendes (edumendes@gmail.com)8 Directives Uma Directive é um marcador em um tag HTML, como um atributo, que faz a ponte
 entre o HTML e um código JS <!DOCTYPE html> <html> <body> ... </body> </html> function HelloAngular() { alert("Hello from Angular, World"); }
  9. 9. Eduardo Mendes (edumendes@gmail.com)9 Directives <!DOCTYPE html> <html> <body > ... </body> </html> function HelloAngular() { alert("Hello from Angular, World"); }ng-controller="HelloAngular"
  10. 10. Eduardo Mendes (edumendes@gmail.com) Utilizando AngularJS 10
  11. 11. Eduardo Mendes (edumendes@gmail.com)11 Utilizando AngularJS download AngularJS carregue-o em seu documento HTML <script src=“angular.min.js”></script> carregue seus componentes angularjs 1 2 3 utilizaremos também Bootstrap <link href=“bootstrap.min.css” ... /> 4 <script src=“app.js”></script>
  12. 12. Eduardo Mendes (edumendes@gmail.com)12 Iniciando com AngularJS <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> <script src=“js/angular.min.js"></script> <script src=“js/app.js”></script> </body> </html>
  13. 13. Eduardo Mendes (edumendes@gmail.com) Módulos 13
  14. 14. Eduardo Mendes (edumendes@gmail.com)14 Módulos Onde são escritos partes de uma aplicação AngularJS Tornam o código mais fácil de manter e de entender Também serve para comunicar as dependências da aplicação Módulo podem depender de outros módulos
  15. 15. Eduardo Mendes (edumendes@gmail.com)15 Criando o primeiro Módulo var app = angular.module('livraria', [ ]); AngularJS Nome da Aplicação Dependências
  16. 16. Eduardo Mendes (edumendes@gmail.com)16 Criando o primeiro Módulo var app = angular.module('livraria', [ ]); app.js <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> <script src=“js/angular.min.js"></script> </body> </html> <script src=“js/app.js"></script>
  17. 17. Eduardo Mendes (edumendes@gmail.com)17 Criando o primeiro Módulo var app = angular.module('livraria', [ ]); app.js <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body > <script src=“js/angular.min.js"></script> </body> </html> <script src=“js/app.js"></script> ng-app="livraria"
  18. 18. Eduardo Mendes (edumendes@gmail.com) Expressions 18
  19. 19. Eduardo Mendes (edumendes@gmail.com)19 Expressions Permite inserir valores dinâmicos no código HTML <p> O valor de 1 + 1 = {{1 + 1}} </p> <p> O valor de 1 + 1 = 2 </p> <p> {{"Alô," + " mamãe"}} </p> <p> Alô, mamãe </p>
  20. 20. Eduardo Mendes (edumendes@gmail.com) Controles e Dados 20
  21. 21. Eduardo Mendes (edumendes@gmail.com)21 Utilizando dados var livro = { titulo: 'O Senhor dos Aneis', preco: 40.0, descricao: ‘Descricao 1' } Objeto JS
  22. 22. Eduardo Mendes (edumendes@gmail.com)22 Controllers Controlam o comportamento da aplicação em Angular, através da definição de funções e valores (function() { var app = angular.module('livraria', []); })(); Encapsule tudo em uma closure Crie um controller app.controller('LojaControle', function() { }); var livro = { titulo: 'O Senhor dos Aneis', preco: 40.0, descricao: ‘Descricao 1' }
  23. 23. Eduardo Mendes (edumendes@gmail.com)23 Controllers Controlam o comportamento da aplicação em Angular, através da definição de funções e valores (function() { var app = angular.module('livraria', []); })(); Encapsule tudo em uma closure Crie um controller app.controller('LojaControle', function() { }); var livro = { titulo: 'O Senhor dos Aneis', preco: 40.0, descricao: ‘Descricao 1' } this.produto = livro; Cria uma propriedade no controle para receber o valor do livro
  24. 24. Eduardo Mendes (edumendes@gmail.com)24 O HTML <!DOCTYPE html> <html ng-app="livraria"> <head> <meta charset="utf-8"/> <link rel="stylesheet" href="css/bootstrap.min.css"/> </head> <body> <div> <h1>Nome do Produto</h1> <h2>R$ preco</h2> <p>Descrição do Produto</p> </div> <script src="js/angular.min.js"></script> <script src="js/app.js"></script> </body> </html>
  25. 25. Eduardo Mendes (edumendes@gmail.com)25 O HTML <body > <div> <h1>Nome do Produto</h1> <h2>R$ preco</h2> <p>Descrição do Produto</p> </div> <script src="js/angular.min.js"></script> <script src="js/app.js"></script> </body> </html> ng-controller="LojaControle as loja"
  26. 26. Eduardo Mendes (edumendes@gmail.com)26 O HTML <body > <div> </div> <script src="js/angular.min.js"></script> <script src="js/app.js"></script> </body> </html> ng-controller="LojaControle as loja" <h1>{{loja.produto.titulo}}</h1> <h2>R$ {{loja.produto.preco}}</h2> <p>{{loja.produto.descricao}}</p>
  27. 27. Eduardo Mendes (edumendes@gmail.com) Exibição Condicional 27
  28. 28. Eduardo Mendes (edumendes@gmail.com)28 Exibição de um botão condicionado a existir quantidade em estoque
  29. 29. Eduardo Mendes (edumendes@gmail.com) Diretiva
 ng-show 29
  30. 30. Eduardo Mendes (edumendes@gmail.com)30 Adequando os dados à necessidade var livro = { titulo: 'O Senhor dos Aneis', preco: 40.0, descricao: ‘Descricao 1' }
  31. 31. Eduardo Mendes (edumendes@gmail.com)31 Adequando os dados à necessidade var livro = { titulo: 'O Senhor dos Aneis', preco: 40.0, descricao: ‘Descricao 1' } , quantidade: 10
  32. 32. Eduardo Mendes (edumendes@gmail.com)32 Adequando os dados à necessidade var livro = { titulo: 'O Senhor dos Aneis', preco: 40.0, descricao: ‘Descricao 1' } , quantidade: 10 <body ng-controller="LojaControle as loja">
 <div>
 <div>
 <h1>{{loja.produto.titulo}}</h1>
 <h2>R$ {{loja.produto.preco}}</h2>
 <p>{{loja.produto.descricao}}</p>
 </div> </div> <button ng-show="{{loja.produto.quantidade > 0}}”> Adicionar ao Carrinho </button>
  33. 33. Eduardo Mendes (edumendes@gmail.com)33 Um acervo de livros Normalmente se tem mais que um livro app.controller('LojaControle', function() { this.produto = livro; }); var livro = { titulo: 'O Senhor dos Aneis', preco: 40.0, descricao: 'Descricao 1', quantidade: 10 }
  34. 34. Eduardo Mendes (edumendes@gmail.com)34 Um acervo de livros Normalmente se tem mais que um livro app.controller('LojaControle', function () { this.acervo = livros; }); var livros = [ { titulo: 'O Senhor dos Aneis', preco: 40.0, descricao: 'Descricao 1', quantidade: 10 }, { titulo: 'A Saga Star Wars', preco: 80.0, descricao: 'Descricao 2', quantidade: 0 } ] Array
  35. 35. Eduardo Mendes (edumendes@gmail.com) Diretiva
 ng-repeat 35
  36. 36. Eduardo Mendes (edumendes@gmail.com)36 Aplicando o ng-repeat <body ng-controller="LojaControle as loja"> <div > <h1>{{loja.produto.titulo}}</h1> <h2>R$ {{loja.produto.preco}}</h2> <p>{{loja.produto.descricao}}</p> <button ng-show="{{loja.produto.quantidade > 0}}”> Adicionar ao Carrinho </button> </div> </div> ng-repeat="livro in loja.acervo" Deve ser referenciado pela variável livro
  37. 37. Eduardo Mendes (edumendes@gmail.com)37 Aplicando o ng-repeat <body ng-controller="LojaControle as loja"> <div > <h1>{{livro.titulo}}</h1> <h2>R$ {{livro.preco}}</h2> <p>{{livro.descricao}}</p> <button ng-show="{{livro.quantidade > 0}}”> Adicionar ao Carrinho </button> </div> </div> ng-repeat="livro in loja.acervo" Repetirá a div para cada livro no array
  38. 38. Eduardo Mendes (edumendes@gmail.com) Diretivas vistas ng-app : anexa o Módulo da aplicação à pagina <html ng-app=“livraria"> ng-controller : anexa o função de Controle à pagina <body ng-controller=“LojaControle as loja”> ng-show/ng-hide : exibe algo mediante a avaliação de uma Expressão <h1 ng-show=“algoBooleano”>Condicionado</h1> ng-repeat : executa um laço para cada item de um Arrau <li ng-repeat=“livro in loja.acervo”>
  39. 39. Eduardo Mendes (edumendes@gmail.com)39 Utilizando Abas Controlador propriedade • aba comportamentos • setAba(aba) • isSet(aba)
  40. 40. Eduardo Mendes (edumendes@gmail.com)40 AbasControle app.controller('AbasControle', function() { this.aba = 1; this.setAba = function(aba) { this.aba = aba; }; this.isSet = function(aba) { return this.aba == aba; }; };
  41. 41. Eduardo Mendes (edumendes@gmail.com) Diretiva
 ng-click 41 permite especificar um comportamento personalizado quando um elemento é clicado
  42. 42. Eduardo Mendes (edumendes@gmail.com)42 O HTML das Abas <section class="tab" ng-controller="AbasControle as aba"> <ul class="nav nav-pills"> <li><a href >Descrição</a></li> <li><a href >Comentários</a></li> </ul> <div> <h4>Descrição</h4> <blockquote>{{livro.descricao}}</blockquote> </div> <div> <h4>Comentários</h4> <blockquote></blockquote> </div> </section> aba 1 aba 2 ng-show isSet(?) ng-click setAba(?)
  43. 43. Eduardo Mendes (edumendes@gmail.com)43 O HTML das Abas <section class="tab" ng-controller="AbasControle as aba"> <ul class="nav nav-pills"> <li><a href >Descrição</a></li> <li><a href >Comentários</a></li> </ul> <div ng-show="aba.isSet(1)"> <h4>Descrição</h4> <blockquote>{{livro.descricao}}</blockquote> </div> <div ng-show="aba.isSet(2)"> <h4>Comentários</h4> <blockquote></blockquote> </div> </section>
  44. 44. Eduardo Mendes (edumendes@gmail.com)44 O HTML das Abas <section class="tab" ng-controller="AbasControle as aba"> <ul class="nav nav-pills"> <li><a href ng-click="aba.setAba(1)">Descrição</a></li> <li><a href ng-click="aba.setAba(2)">Comentários</a></li> </ul> <div ng-show="aba.isSet(1)"> <h4>Descrição</h4> <blockquote>{{livro.descricao}}</blockquote> </div> <div ng-show="aba.isSet(2)"> <h4>Comentários</h4> <blockquote></blockquote> </div> </section>
  45. 45. Eduardo Mendes (edumendes@gmail.com) Formulários 45
  46. 46. Eduardo Mendes (edumendes@gmail.com)46 Forms
  47. 47. Eduardo Mendes (edumendes@gmail.com)47 Adicionando comentarios var livros = [ { titulo: 'O Senhor dos Aneis', preco: 40.0, descricao: 'Descricao 1', quantidade: 10, comentarios : [{ autor: "Autor1", texto: "Texto 1" }, { autor: "Autor2", texto: "Texto 2" }] } ] Array
  48. 48. Eduardo Mendes (edumendes@gmail.com)48 O HTML das Abas <section class="tab" ng-controller="AbasControle as aba"> <ul class="nav nav-pills"> <li><a href ng-click="aba.setAba(1)">Descrição</a></li> <li><a href ng-click="aba.setAba(2)">Comentários</a></li> </ul> <div ng-show="aba.isSet(1)"> <h4>Descrição</h4> <blockquote>{{livro.descricao}}</blockquote> </div> <div ng-show="aba.isSet(2)"> <h4>Comentários</h4> <blockquote></blockquote> </div> </section>
  49. 49. Eduardo Mendes (edumendes@gmail.com)49 O HTML dos Comentarios (ng-repeat) <div ng-show="aba.isSet(2)">
 <h4>Comentários</h4>
 <blockquote ng-repeat="comentario in livro.comentarios">
 {{comentario.autor}} disse: {{comentario.texto}}
 </blockquote>
 </div>
  50. 50. Eduardo Mendes (edumendes@gmail.com)50 O HTML do Formulario <div ng-show="aba.isSet(2)">
 <h4>Comentários</h4>
 <blockquote ng-repeat="comentario in livro.comentarios">
 {{comentario.autor}} disse: {{comentario.texto}}
 </blockquote>
 <div>
 <form name=“comentarioForm”> <p>
 <input type="text" placeholder="Seu nome"/>
 </p>
 <p><textarea placeholder="Deixe seu comentario"></textarea>
 </p>
 <input type="submit" value="Adicionar" />
 </form>
 </div>
 </div>
  51. 51. Eduardo Mendes (edumendes@gmail.com)51 O HTML do Formulario <div ng-show="aba.isSet(2)">
 <h4>Comentários</h4>
 <blockquote ng-repeat="comentario in livro.comentarios">
 {{comentario.autor}} disse: {{comentario.texto}}
 </blockquote>
 <div>
 <form name=“comentarioForm”> <blockquote>
 {{comentario.autor}} disse: {{comentario.texto}}
 </blockquote>
 <p>
 <input type="text"
 placeholder="Seu nome"/>
 </p>
 <p><textarea placeholder="Deixe seu comentario"></textarea>
 </p>
 <input type="submit" value="Adicionar" />
 </form>
 </div>
 </div>
  52. 52. Eduardo Mendes (edumendes@gmail.com) Diretiva
 ng-model 52 vincula o valor de um input, select, textarea a uma propriedade
  53. 53. Eduardo Mendes (edumendes@gmail.com)53 O HTML do Formulario <div ng-show="aba.isSet(2)">
 <h4>Comentários</h4>
 <blockquote ng-repeat="comentario in livro.comentarios">
 {{comentario.autor}} disse: {{comentario.texto}}
 </blockquote>
 <div>
 <form name=“comentarioForm”> <blockquote>
 {{comentario.autor}} disse: {{comentario.texto}}
 </blockquote>
 <p>
 <input type="text"
 placeholder="Seu nome"/>
 </p>
 <p><textarea placeholder="Deixe seu comentario"></textarea>
 </p>
 <input type="submit" value="Adicionar" />
 </form>
 </div>
 </div>
  54. 54. Eduardo Mendes (edumendes@gmail.com)54 O HTML do Formulario <div ng-show="aba.isSet(2)">
 <h4>Comentários</h4>
 <blockquote ng-repeat="comentario in livro.comentarios">
 {{comentario.autor}} disse: {{comentario.texto}}
 </blockquote>
 <div>
 <form name=“comentarioForm”> <blockquote>
 {{comentario.autor}} disse: {{comentario.texto}}
 </blockquote>
 <p>
 <input type="text" ng-model="comentario.autor"
 placeholder="Seu nome"/>
 </p>
 <p><textarea ng-model=“comentario.texto" placeholder="Deixe seu comentario"></textarea>
 </p>
 <input type="submit" value="Adicionar" />
 </form>
 </div>
 </div>
  55. 55. Eduardo Mendes (edumendes@gmail.com) Submetendo valores 55
  56. 56. Eduardo Mendes (edumendes@gmail.com)56 Forms Controlador propriedade • comentario comportamentos • addComentario(livro)
  57. 57. Eduardo Mendes (edumendes@gmail.com)57 ComentarioControle app.controller('ComentarioControle', function() { this.comentario = {}; });
  58. 58. Eduardo Mendes (edumendes@gmail.com)58 O HTML do Formulario <div ng-show="aba.isSet(2)">
 <h4>Comentários</h4>
 <blockquote ng-repeat="comentario in livro.comentarios">
 {{comentario.autor}} disse: {{comentario.texto}}
 </blockquote>
 <div>
 <form name=“comentarioForm”> <blockquote>
 {{comentario.autor}} disse: {{comentario.texto}}
 </blockquote>
 <p>
 <input type="text" ng-model="comentario.autor"
 placeholder="Seu nome"/>
 </p>
 <p><textarea ng-model=“comentario.texto" placeholder="Deixe seu comentario"></textarea>
 </p>
 <input type="submit" value="Adicionar" />
 </form>
 </div>
 </div>
  59. 59. Eduardo Mendes (edumendes@gmail.com)59 O HTML do Formulario (ng-model) 
 <form name=“comentarioForm" ng-controller="ComentarioControle as cmtControle”> <blockquote>…</blockquote>
 <p>
 <input type="text" ng-model="comentario.autor"
 placeholder="Seu nome"/>
 </p>
 <p><textarea ng-model=“comentario.texto” placeholder="Deixe seu comentario"></textarea>
 </p>
 <input type="submit" value="Adicionar" />
 </form>

  60. 60. Eduardo Mendes (edumendes@gmail.com)60 O HTML do Formulario (ng-model) 
 <form name=“comentarioForm" ng-controller="ComentarioControle as cmtControle”> <blockquote>…</blockquote>
 <p>
 <input type="text" ng-model="cmtControle.comentario.autor"
 placeholder="Seu nome"/>
 </p>
 <p><textarea ng-model=“cmtControle.comentario.texto” placeholder="Deixe seu comentario"></textarea>
 </p>
 <input type="submit" value="Adicionar" />
 </form>

  61. 61. Eduardo Mendes (edumendes@gmail.com) Diretiva
 ng-submit 61 permite vincular comportamentos a um evento onsubmit
  62. 62. Eduardo Mendes (edumendes@gmail.com)62 O HTML do Formulario (ng-model) 
 <form name=“comentarioForm" ng-controller="ComentarioControle as cmtControle”> <blockquote>…</blockquote>
 <p>
 <input type="text" ng-model="cmtControle.comentario.autor"
 placeholder="Seu nome"/>
 </p>
 <p><textarea ng-model=“cmtControle.comentario.texto” placeholder="Deixe seu comentario"></textarea>
 </p>
 <input type="submit" value="Adicionar" />
 </form>

  63. 63. Eduardo Mendes (edumendes@gmail.com)63 O HTML do Formulario (ng-model) 
 <form name=“comentarioForm" ng-controller="ComentarioControle as cmtControle” ng-submit="cmtControle.addComentario(livro)” > <blockquote>…</blockquote>
 <p>
 <input type="text" ng-model="cmtControle.comentario.autor"
 placeholder="Seu nome"/>
 </p>
 <p><textarea ng-model=“cmtControle.comentario.texto” placeholder="Deixe seu comentario"></textarea>
 </p>
 <input type="submit" value="Adicionar" />
 </form>

  64. 64. Eduardo Mendes (edumendes@gmail.com)64 ComentarioControle app.controller('ComentarioControle', function() { this.comentario = {}; this.addComentario = function(livro) { livro.comentarios.push(this.comentario); }; });
  65. 65. Eduardo Mendes (edumendes@gmail.com)65 ComentarioControle app.controller('ComentarioControle', function() { this.comentario = {}; this.addComentario = function(livro) { livro.comentarios.push(this.comentario); this.comentario = {}; }; });
  66. 66. Eduardo Mendes (edumendes@gmail.com)66
  67. 67. Eduardo Mendes (edumendes@gmail.com) Validações 67
  68. 68. Eduardo Mendes (edumendes@gmail.com)68 Desabilitando a validação padrão 
 <form name=“comentarioForm" ng-controller="ComentarioControle as cmtControle” ng-submit="cmtControle.addComentario(livro)” > <blockquote>…</blockquote>
 <p>
 <input type="text" ng-model="cmtControle.comentario.autor"
 placeholder="Seu nome"/>
 </p>
 <p><textarea ng-model=“cmtControle.comentario.texto” placeholder="Deixe seu comentario"></textarea>
 </p>
 <input type="submit" value="Adicionar" />
 </form>

  69. 69. Eduardo Mendes (edumendes@gmail.com)69 Desabilitando a validação padrão 
 <form name=“comentarioForm" ng-controller="ComentarioControle as cmtControle” ng-submit="cmtControle.addComentario(livro)” novalidate> <blockquote>…</blockquote>
 <p>
 <input type="text" ng-model="cmtControle.comentario.autor"
 placeholder="Seu nome"/>
 </p>
 <p><textarea ng-model=“cmtControle.comentario.texto” placeholder="Deixe seu comentario"></textarea>
 </p>
 <input type="submit" value="Adicionar" />
 </form>

  70. 70. Eduardo Mendes (edumendes@gmail.com)70 Desabilitando a validação padrão 
 <form name=“comentarioForm" ng-controller="ComentarioControle as cmtControle” ng-submit="cmtControle.addComentario(livro)” novalidate> <blockquote>…</blockquote>
 <p>
 <input type="text" ng-model="cmtControle.comentario.autor"
 placeholder="Seu nome” required/>
 </p>
 <p><textarea ng-model=“cmtControle.comentario.texto” placeholder="Deixe seu comentario” required> </textarea>
 </p>
 <input type="submit" value="Adicionar" />
 </form>

  71. 71. Eduardo Mendes (edumendes@gmail.com) $valid 71 propriedade form no Angular que indica se o formuário é válido
  72. 72. Eduardo Mendes (edumendes@gmail.com)72 Desabilitando a validação padrão 
 <form name=“comentarioForm" ng-controller="ComentarioControle as cmtControle” ng-submit="cmtControle.addComentario(livro)” novalidate> <blockquote>…</blockquote>
 <p>
 <input type="text" ng-model="cmtControle.comentario.autor"
 placeholder="Seu nome” required/>
 </p>
 <p><textarea ng-model=“cmtControle.comentario.texto” placeholder="Deixe seu comentario” required> </textarea>
 </p>
 <input type="submit" value="Adicionar" />
 </form>

  73. 73. Eduardo Mendes (edumendes@gmail.com)73 Desabilitando a validação padrão 
 <form name=“comentarioForm" ng-controller="ComentarioControle as cmtControle” ng-submit="cmtControle.addComentario(livro)” novalidate> <blockquote>…</blockquote>
 <p>
 <input type="text" ng-model="cmtControle.comentario.autor"
 placeholder="Seu nome” required/>
 </p>
 <p><textarea ng-model=“cmtControle.comentario.texto” placeholder="Deixe seu comentario” required> </textarea>
 </p> <div>O formulario é ${{comentarioForm.$valid}}</div>
 <input type="submit" value="Adicionar" />
 </form>

  74. 74. Eduardo Mendes (edumendes@gmail.com)74 Desabilitando a validação padrão 
 <form name=“comentarioForm" ng-controller="ComentarioControle as cmtControle” ng-submit="cmtControle.addComentario(livro)” novalidate> <blockquote>…</blockquote>
 <p>
 <input type="text" ng-model="cmtControle.comentario.autor"
 placeholder="Seu nome” required/>
 </p>
 <p><textarea ng-model=“cmtControle.comentario.texto” placeholder="Deixe seu comentario” required> </textarea>
 </p> <div>O formulario é ${{comentarioForm.$valid}}</div>
 <input type="submit" value="Adicionar" />
 </form>

  75. 75. Eduardo Mendes (edumendes@gmail.com)75 Desabilitando a validação padrão 
 <form name=“comentarioForm" ng-controller="ComentarioControle as cmtControle” ng-submit=“comentarioForm.$valid && cmtControle.addComentario(livro)” novalidate> <blockquote>…</blockquote>
 <p>
 <input type="text" ng-model="cmtControle.comentario.autor"
 placeholder="Seu nome” required/>
 </p>
 <p><textarea ng-model=“cmtControle.comentario.texto” placeholder="Deixe seu comentario” required> </textarea>
 </p> <div>O formulario é ${{comentarioForm.$valid}}</div>
 <input type="submit" value="Adicionar" />
 </form>

  76. 76. Eduardo Mendes (edumendes@gmail.com)76 Classe no Input pelo Angular <input name="autor“ type="email“ ng-model=“cmtControle.comentario.autor" required/> antes de digitar digitado email inválido digitado email válido .ng-pristine .ng-invalid .ng-dirty .ng-invalid .ng-dirty .ng-valid
  77. 77. Eduardo Mendes (edumendes@gmail.com)77 CSS .ng-invalid.ng-dirty {
 border-color: darkred;
 }
 
 .ng-invalid.ng-dirty {
 border-color: greenyellow;
 }
  78. 78. Eduardo Mendes (edumendes@gmail.com) Projeto 78
  79. 79. Eduardo Mendes (edumendes@gmail.com)79 Projeto
  80. 80. Eduardo Mendes (edumendes@gmail.com) Diretivas Personalizadas 80
  81. 81. Eduardo Mendes (edumendes@gmail.com)81 Como reaproveitar código? <h2> {{livro.titulo}} <em class="pull-right">R$ {{livro.preco}}</em> </h2> Poderia aparecer em várias partes na aplicação
  82. 82. Eduardo Mendes (edumendes@gmail.com)82 Como reaproveitar código? <h2> {{livro.titulo}} <em class="pull-right">R$ {{livro.preco}}</em> </h2> Criar um arquivo html e reutilizá-lo
  83. 83. Eduardo Mendes (edumendes@gmail.com)83 Como reaproveitar código? <h2> {{livro.titulo}} <em class="pull-right">R$ {{livro.preco}}</em> </h2> index.html
  84. 84. Eduardo Mendes (edumendes@gmail.com)84 Como reaproveitar código? <h2> </h2> index.html {{livro.titulo}} <em class="pull-right">R$ {{livro.preco}}</em> livro-preco.html
  85. 85. Eduardo Mendes (edumendes@gmail.com)85 Como reaproveitar código? <h2 ng-include=“'livro-preco.html'”> </h2> index.html {{livro.titulo}} <em class="pull-right">R$ {{livro.preco}}</em> livro-preco.html
  86. 86. Eduardo Mendes (edumendes@gmail.com)86 Como reaproveitar código? <h2 ng-include=“'livro-preco.html'”> </h2> index.html {{livro.titulo}} <em class="pull-right">R$ {{livro.preco}}</em> livro-preco.html Onde está a diretiva???
  87. 87. Eduardo Mendes (edumendes@gmail.com)87 Como reaproveitar código? <livro-preco></livro-preco> index.html {{livro.titulo}} <em class="pull-right">R$ {{livro.preco}}</em> livro-preco.html Onde está a diretiva???
  88. 88. Eduardo Mendes (edumendes@gmail.com)88 Como reaproveitar código? <livro-preco></livro-preco> app.directive('livroPreco', function() { return { }; }); app.js
  89. 89. Eduardo Mendes (edumendes@gmail.com)89 Como reaproveitar código? <livro-preco></livro-preco> app.js app.directive('livroPreco', function() { return { restrict: 'E', templateUrl: 'livro-preco.html' }; }); Diretiva como um elemento
  90. 90. Eduardo Mendes (edumendes@gmail.com)90 Como reaproveitar código? <h3 livro-preco></h3> app.js app.directive('livroPreco', function() { return { restrict: 'A', templateUrl: 'livro-preco.html' }; }); Diretiva como um atributo
  91. 91. Eduardo Mendes (edumendes@gmail.com)91 Exercício CRIAR <livro-descricao></livro-descricao> <div livro-comentarios></div>
  92. 92. Eduardo Mendes (edumendes@gmail.com) E se o template precisasse
 de um Controller??? 92
  93. 93. Eduardo Mendes (edumendes@gmail.com)93 Template dependente de controller <section class="tab" ng-controller="AbasControle as aba"> <ul class="nav nav-pills"> <li><a href ng-click="aba.setAba(1)">Descrição</a></li> <li><a href ng-click="aba.setAba(2)">Comentários</a></li> </ul> <livro-descricao></livro-descricao> <div livro-comentarios></div> </section> index.html
  94. 94. Eduardo Mendes (edumendes@gmail.com)94 Template dependente de controller ng-controller="AbasControle as aba" index.html <section class="tab"> <ul class="nav nav-pills"> <li><a href ng-click="aba.setAba(1)">Descrição</a></li> <li><a href ng-click="aba.setAba(2)">Comentários</a></li> </ul> <livro-descricao></livro-descricao> <div livro-comentarios></div> </section> livro-abas.html
  95. 95. Eduardo Mendes (edumendes@gmail.com)95 Adiciona a diretiva index.html <section class="tab"> <ul class="nav nav-pills"> <li><a href ng-click="aba.setAba(1)">Descrição</a></li> <li><a href ng-click="aba.setAba(2)">Comentários</a></li> </ul> <livro-descricao></livro-descricao> <div livro-comentarios></div> </section> livro-abas.html <livro-abas ng-controller="AbasControle as aba"></livro-abas>
  96. 96. Eduardo Mendes (edumendes@gmail.com)96 Adiciona a diretiva index.html app.js <livro-abas ng-controller="AbasControle as aba"></livro-abas> app.directive('livroAbas', function() { return { restrict: 'E', templateUrl: 'livro-abas.html' }; });
  97. 97. Eduardo Mendes (edumendes@gmail.com)97 Adiciona a diretiva index.html app.js <livro-abas ng-controller="AbasControle as aba"></livro-abas> app.directive('livroAbas', function() { return { restrict: 'E', templateUrl: 'livro-abas.html' }; }); app.controller('AbasControle', function() { . . . });
  98. 98. Eduardo Mendes (edumendes@gmail.com)98 Adiciona a diretiva index.html app.js <livro-abas ng-controller="AbasControle as aba"></livro-abas> app.directive('livroAbas', function() { return { restrict: 'E', templateUrl: ‘livro-abas.html’, controller: function() { . . . } }; });
  99. 99. Eduardo Mendes (edumendes@gmail.com)99 Adiciona a diretiva index.html app.js <livro-abas ng-controller="AbasControle as aba"></livro-abas> app.directive('livroAbas', function() { return { restrict: 'E', templateUrl: ‘livro-abas.html’, controller: function() { . . . }, controllerAs: ‘aba’ }; });
  100. 100. Eduardo Mendes (edumendes@gmail.com)100 Adiciona a diretiva index.html app.js <livro-abas></livro-abas> app.directive('livroAbas', function() { return { restrict: 'E', templateUrl: ‘livro-abas.html’, controller: function() { . . . }, controllerAs: ‘aba’ }; });

×