{"id":3748,"date":"2016-07-07T14:32:54","date_gmt":"2016-07-07T17:32:54","guid":{"rendered":"https:\/\/www.mxcursos.com\/blog\/?p=3748"},"modified":"2019-03-19T09:43:37","modified_gmt":"2019-03-19T12:43:37","slug":"angularjs-trabalhando-com-templates-dinamicos","status":"publish","type":"post","link":"https:\/\/www.mxcursos.com\/blog\/angularjs-trabalhando-com-templates-dinamicos\/","title":{"rendered":"AngularJS &#8211; Trabalhando com templates din\u00e2micos"},"content":{"rendered":"<p>Oi gente, tudo bem?\u00a0Neste artigo\u00a0trabalharemos com um simples exemplo de template usando <strong>AngularJS<\/strong>. Quando precisamos exibir uma lista de coisas, podemos usar a diretiva <em>ng-repeat<\/em><strong>\u00a0<\/strong>para nos auxiliar nesta tarefa.<\/p>\n<p>No exemplo abaixo temos uma lista com tr\u00eas cursos.<br \/>\n<iframe width=\"100%\" height=\"300\" src=\"\/\/jsfiddle.net\/felipepinheiro94\/ahc3qmmm\/embedded\/\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\"><\/iframe><br \/>\nO primeiro passo foi definir um controller que fornece as informa\u00e7\u00f5es do curso. Normalmente, esse tipo de informa\u00e7\u00f5es s\u00e3o fornecidas a partir do back-end da aplica\u00e7\u00e3o, como por exemplo o servi\u00e7o <em>$http<\/em>, mas como o\u00a0objetivo\u00a0deste post \u00e9 focar no lado do cliente, eu criei manualmente um array com as informa\u00e7\u00f5es.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-4020 size-medium\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2016\/07\/Angular-600x338.jpg\" alt=\"AngularJS\" width=\"600\" height=\"338\" srcset=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2016\/07\/Angular-600x338.jpg 600w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2016\/07\/Angular-768x432.jpg 768w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2016\/07\/Angular-1500x844.jpg 1500w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2016\/07\/Angular-740x417.jpg 740w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2016\/07\/Angular-24x14.jpg 24w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2016\/07\/Angular.jpg 1684w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>Ap\u00f3s criar meu array chamado courses, exibi-lo foi tarefa f\u00e1cil para a diretiva <em>ng-repeat<\/em><strong>.\u00a0<\/strong>Basicamente, itera sobre\u00a0todos os itens do meu array <em>courses<\/em>\u00a0e para cada item contido nele, \u00e9 criada uma c\u00f3pia chamada\u00a0course.<strong>\u00a0<\/strong>Nosso novo item se torna &#8220;praticamente&#8221; um novo <em>$scope<\/em>. Assim n\u00f3s podemos exibir seus valores na nossa view.<\/p>\n<pre class=\"lang:default decode:true\">&lt;div class=\"col-sm-4 course-block\" ng-repeat=\"course in courses\"&gt;\r\n    &lt;a href=\"{{course.link}}\" target=\"_blank\"&gt;\r\n    &lt;img ng-src=\"{{course.image}}\" class=\"img-responsive\" \/&gt;\r\n    &lt;p&gt;{{ course.title }}&lt;\/p&gt;&lt;\/a&gt;\r\n&lt;\/div&gt;<\/pre>\n<h2><strong>Mas como fa\u00e7o para usar um arquivo separado para o template no AngularJS?<\/strong><\/h2>\n<p>\u00c9 muito comum usar um arquivo separado para cada template para deixar o c\u00f3digo mais organizado e poder alterar entre os templates com maior facilidade. Ent\u00e3o, vamos alterar levemente\u00a0o exemplo acima,\u00a0para que ele utilize um arquivo separado para o template.<\/p>\n<p>Nossas altera\u00e7\u00f5es v\u00e3o se limitar apenas \u00e0 camada view de nossa aplica\u00e7\u00e3o. No caso, vamos adicionar a diretiva <em>ng-include<\/em> ao nosso c\u00f3digo. Uma observa\u00e7\u00e3o importante a respeito da diretiva <em>ng-include<\/em>, \u00e9 que o uso de aspas duplas ( &#8221; ) seguidas de aspas simples ( &#8216; ), \u00e9 obrigat\u00f3rio quando o valor da diretiva \u00e9 uma <em>string<\/em>.<\/p>\n<pre class=\"lang:default decode:true\">&lt;div class=\"row\"&gt;\r\n    &lt;div class=\"col-sm-4 course-block\" ng-repeat=\"course in courses\"&gt; \r\n        &lt;div ng-include=\"'templates\/default.html'\"&gt;&lt;\/div&gt;  \r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>Dentro do nosso arquivo <em>default.html<\/em>, n\u00f3s podemos inserir os dados do nosso template normalmente.<\/p>\n<pre class=\"lang:default decode:true \">&lt;a href=\"{{course.link}}\" target=\"_blank\"&gt;\r\n    &lt;img ng-src=\"{{course.image}}\" class=\"img-responsive\" \/&gt;\r\n    &lt;p&gt;{{ course.title }}&lt;\/p&gt;\r\n&lt;\/a&gt;<\/pre>\n<p>O resultado ser\u00e1 o mesmo do exemplo do in\u00edcio deste post. A diferen\u00e7a \u00e9 que fica mais organizado. Mas como nem tudo \u00e9 perfeito&#8230;<\/p>\n<p>A utiliza\u00e7\u00e3o da diretiva <em>ng-repeat<\/em> em conjunto com a diretiva <em>ng-include<\/em>, pode ter algum impacto na sua aplica\u00e7\u00e3o quando o assunto \u00e9 desempenho. Ent\u00e3o, \u00e9 bom pegar leve.<\/p>\n<p>Neste post optei por n\u00e3o falar sobre recursividade, pois fugia um pouco do exemplo proposto, mas os princ\u00edpio \u00e9 o mesmo dos exemplos acima.<\/p>\n<p>Gostou do artigo? Tem alguma d\u00favida? Fez algo bem legal? N\u00e3o deixe de comentar! \ud83d\ude42<br \/>\nBons estudos!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Oi gente, tudo bem?\u00a0Neste artigo\u00a0trabalharemos com um simples exemplo de template usando AngularJS. Quando precisamos exibir uma lista de coisas, podemos usar a diretiva ng-repeat\u00a0para nos auxiliar nesta tarefa. No exemplo abaixo temos uma lista com tr\u00eas cursos. O primeiro passo foi definir um controller que fornece as informa\u00e7\u00f5es do curso. Normalmente, esse tipo de [&hellip;]<\/p>\n","protected":false},"author":25,"featured_media":3599,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[678],"tags":[1236],"class_list":["post-3748","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento","tag-angularjs"],"_links":{"self":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/3748","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/comments?post=3748"}],"version-history":[{"count":0,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/3748\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media\/3599"}],"wp:attachment":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media?parent=3748"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/categories?post=3748"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/tags?post=3748"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}