Blog do MX Cursos

AngularJS – Trabalhando com templates dinâmicos

Avaliar 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.

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.

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.

Dentro do nosso arquivo default.html, nós podemos inserir os dados do nosso template normalmente.

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!

Felipe Pinheiro

Felipe Pinheiro

22 anos. Estudante de Sistemas de Informação. Desenvolvedor web no MX Cursos desde 2014.

Your Header Sidebar area is currently empty. Hurry up and add some widgets.

Newsletter

Newsletter

Receba em seu e-mail conteúdos semanais sobre desenvolvimento, design, audiovisual e tecnlogia.

Inscrição realizada com sucesso!