MX Cursos

AngularJS – Trabalhando com templates dinâmicos

AngularJS – Trabalhando com templates dinâmicos
Rate this post

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.

AngularJS

Após criar meu array chamado courses, exibi-lo foi tarefa fácil para a diretiva ng-repeatBasicamente, 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…

Nossos cursos online relacionados a este post

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!

Clube de Cursos Clube de Cursos

Conheça nosso Clube de Cursos e potencialize suas habilidades em Produção e Edição de Vídeos, Design, Marketing Digital, Programaço, WordPress, 3D e Modelagem, Motion Graphics e muito mais!

CONHEÇA O CLUBE
QUE TAL COMEÇAR ESTUDAR COM A GENTE ?10% OFF

Copie o cupom abaixo:

ESTUDE10

Aproveite e comece a estudar hoje mesmo