Por que escrever suas próprias diretivas é util?
Para modularizar o código, tornando-o mais organizado, podemos separá-lo em partes menores. Ao invés de usar várias expressões dentro de alguma tag html, podemos usar só uma que redireciona o AngularJS para outra parte do código, em outro lugar. Desse modo, o código é capaz de mostrar vários itens dentro da view sem precisar repetir código html. Escrever suas próprias diretivas é interessante, pois:
- Legibilidade: diretivas te permitem escrever html expressivas. No index.html, você é capaz de entender o comportamento da aplicação apenas lendo o html;
- Reusabilidade: diretivas te permitem criar unidades auto-contidas de funcionalidades. Nós poderíamos facilmente conectar uma diretiva em outra aplicação AngularJS e evitar reescrever várias linhas de HTML.
Através das diretivas personalizadas, podemos exibir uma lista de produtos, cada um com suas características, usando um array em conjunto com ng-repeat. Isso evita linhas desnecessárias e código repetido. A forma padrão de declarar uma nova diretiva é essa:
app.directive('nome_da_aplicação', function() {
return {
restrict: 'E',
scope: {atributos},
templateUrl: 'endereço do arquivo html dentro da pasta directives'
};
});
Basicamente, é uma diretiva com uma função que retorna três valores para quem a solicitar: restrict, scope e templateUrl.
Agora vamos criar outro projeto e customizar uma tag html! Depois, a chamaremos dentro do index.html, assim < app-info info="move"> < /app-info>. Todos os nomes usados aqui são de sua preferência, por exemplo "move" e "app-info". Poderia ser outro nome, mas seria necessário prestar atenção ao copiar códigos escritos neste tutorial.
No arquivo de um projeto, existem várias pastas. Uma delas é a js, que contém toda a parte javascript. Dentro dela, criaremos uma pasta chamada directives. O endereço ficará assim tutorial/js/directives. Dentro dela, criaremos os arquivos appInfo.js e appInfo.html. Em js/controllers, é necessário criar outro arquivo chamado MainController.js.
appInfo.js contém uma diretiva chamada appInfo, que permite ao Angular fazer com que dados da aplicação sejam mostrados na view do projeto. appInfo é um objeto que contém três opções:
- restrict: especifica como o novo elemento será usado na view do projeto. Neste caso, ‘E’ significa que appInfo será representado como um novo elemento html;
- templateUrl: especifica o html usado para exibir os dados em scope.info;: especifica que vamos passar informações para esta diretiva através de um atributo chamado “info”. O ‘=’ diz a diretiva para procurar por um atributo chamado ‘info’ dentro de appInfo. Assim, os dados em ‘info’ tornam-se disponíveis para uso (após definir templateUrl);
- templateUrl: especifica o html usado para exibir os dados em scope.info;
Em appInfo.html (a diretiva do template) estão os detalhes sobre ‘info’ que queremos exibir na view. A diretiva 'appInfo' será usada dentro de index.html, através das tags
Em MainController.js, cole este código:
app.controller('MainController', ['$scope', function($scope) {
$scope.move = {
icon: 'img/move.jpg',
title: 'MOVE',
developer: 'MOVE, Inc.',
price: 0.99
};
Em appInfo.js, cole este código:
app.directive('appInfo', function() {
return {
restrict: 'E',
scope: {
info: '='
},
templateUrl: 'js/directives/appInfo.html'
};
});
Em appInfo.html, cole este código:
<img class="icon" ng-src="{{ info.icon }}">
<h2 class="title">{{ info.title }}</h2>
<p class="developer">{{ info.developer }}</p>
<p class="price">{{ info.price | currency }}</p>
Dentro de index.html, a diretiva criada será chamada assim:
<div class="main" ng-controller="MainController">
<div class="container">
<div class="card">
<app-info info="move"></app-info>
</div>
Lembrando: para utilizar módulos, diretivas, serviços e controladores, temos que declará-los no fim da view, dentro das tags < body >, assim:
<script src="js/directives/appInfo.js"></script>
<script src="js/controllers/MainController.js"></script>