Fala galera, beleza?
Você aí que às vezes sofre quando o usuário decide mudar o css de um componente no sistema, por exemplo o ícone do botão salvar, esse post é para você!
Cansei de contar as vezes que precisei entrar em VÁRIAS telas do sistema e mudar como a tag do html ia ser renderizada ou alterar o seu comportamento padrão. Alguns devs tem uma velha desculpa: Ah Gabriel, mas tem a IDE para fazer isso por nós, o trabalho é mínimo!… Eu como um bom preguiçoso, não gosto é de ter trabalho algum.
Então, é aqui que entra as diretivas do AngularJS (já bloguei um pouco sobre elas aqui). As diretivas poderão facilitar nossa vida (e muito!) quando se trata de padronizar o nosso sistema. Não seria legal mudar em um único lugar e ter a certeza que todo o sistema sofreu a alteração!?
O exemplo
Vamos construir um elemento semelhante ao input do html. Lembra que através do atributo type é possível alterar a forma como o html é renderizado ( text, button, file, … )? Os valores válidos para o atributo type podem ser visto nesse link. O nosso componente também terá um comportamento semelhante.
O nome do novo componente será <botao> e ele terá três atributos:
- tipo: será o responsável por definir qual o tipo de botão será exibido;
- label: o nome que será exibido como label do botão;
- click: a ação que será executada ao clicar no botão;
Vamos analisar o gist abaixo com a implementação do componente:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
(function () {
angular.module('app', [])
.directive('botao', function () {
return {
restrict: 'E',
replace: true,
scope: {
label: '@',
tipo: '@',
acao: '&click'
},
controller: 'Controller as vm',
templateUrl: function (elem, attrs) {
return 'componentes/botao-' + (attrs.tipo || 'padrao') + '.html';
}
}
})
.controller('Controller', function () {
var vm = this;
vm.alertar = function (label) {
alert(label);
}
vm.autorizar =function (acao) {
if(confirm("Confirmar operação?")){
acao();
}else{
vm.alertar('Operação salvar cancelada...');
}
}
});
})();
Podemos notar que o “pulo do gato” está na função templateUrl (linha 14). A nossa tag botao utiliza o atributo tipo para alterar o valor do nome do arquivo html (linha 15) que será exibido como template da nossa diretiva. Então, quando usarmos o nosso botão com o tipo “salvar” <botao tipo="salvar" label="Salvar"></botao>
ele irá renderizar o arquivo componentes/botao-salvar.html.
Assim, construir novos elementos e/ou alterar o comportamento de um já existente fica bem simples. No exemplo, adicionei uma confirmação da ação para o botão salvar.
O código do exemplo pode ser encontrado no meu github e aqui tem o exemplo rodando.
E você, como está fazendo essa padronização no seu projeto?
O post de hoje foi só uma rapidinha, mas espero que tenham curtido. 😎
Abraços e até a próxima!