AngularJS – Trabalhando com templates dinâmicos

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!