Oi gente, tudo bem? Neste artigo trabalharemos com um simples exemplo de template usando AngularJS. Quando precisamos exibir uma lista de coisas, podemos usar a diretiva ng-repeat para nos auxiliar nesta tarefa.
No exemplo abaixo temos uma lista com três cursos.
O primeiro passo foi definir um controller que fornece as informações do curso. Normalmente, esse tipo de informações são fornecidas a partir do back-end da aplicação, como por exemplo o serviço $http, mas como o objetivo deste post é focar no lado do cliente, eu criei manualmente um array com as informações.
Após criar meu array chamado courses, exibi-lo foi tarefa fácil para a diretiva ng-repeat. Basicamente, itera sobre todos os itens do meu array courses e para cada item contido nele, é criada uma cópia chamada course. Nosso novo item se torna “praticamente” um novo $scope. Assim nós podemos exibir seus valores na nossa view.
<div class="col-sm-4 course-block" ng-repeat="course in courses"> <a href="{{course.link}}" target="_blank"> <img ng-src="{{course.image}}" class="img-responsive" /> <p>{{ course.title }}</p></a> </div>
Mas como faço para usar um arquivo separado para o template no AngularJS?
É muito comum usar um arquivo separado para cada template para deixar o código mais organizado e poder alterar entre os templates com maior facilidade. Então, vamos alterar levemente o exemplo acima, para que ele utilize um arquivo separado para o template.
Nossas alterações vão se limitar apenas à camada view de nossa aplicação. No caso, vamos adicionar a diretiva ng-include ao nosso código. Uma observação importante a respeito da diretiva ng-include, é que o uso de aspas duplas ( ” ) seguidas de aspas simples ( ‘ ), é obrigatório quando o valor da diretiva é uma string.
<div class="row"> <div class="col-sm-4 course-block" ng-repeat="course in courses"> <div ng-include="'templates/default.html'"></div> </div> </div>
Dentro do nosso arquivo default.html, nós podemos inserir os dados do nosso template normalmente.
<a href="{{course.link}}" target="_blank"> <img ng-src="{{course.image}}" class="img-responsive" /> <p>{{ course.title }}</p> </a>
O resultado será o mesmo do exemplo do início deste post. A diferença é que fica mais organizado. Mas como nem tudo é perfeito…
A utilização da diretiva ng-repeat em conjunto com a diretiva ng-include, pode ter algum impacto na sua aplicação quando o assunto é desempenho. Então, é bom pegar leve.
Neste post optei por não falar sobre recursividade, pois fugia um pouco do exemplo proposto, mas os princípio é o mesmo dos exemplos acima.
Gostou do artigo? Tem alguma dúvida? Fez algo bem legal? Não deixe de comentar! 🙂
Bons estudos!