Angular.js - Trabalhando com classes e estilos CSS de modo mais limpo
O Angular traz modos interessantes de se trabalhar com estilos CSS, tornando mais automatizadas e limpas certas operações e interação cliente/aplicação.
Vamos aproveitar para ver um pouco sobre diretivas do Angular também. As diretivas são propriedades inseridas nas Tags que nos ajudam a trabalhar com as interações do usuário. O Angular.js possui inúmeras diretivas que substituem a prática muito utilizada no Jquery de atribuir eventos a classes ou ids.
Se no Jquery precisávamos ligar um evento a uma classe ou id e depois ligar estes a uma função para executar a operação desejada, no Angular.js isto é feito diretamente, atribuindo-se a função diretamente a um evento dentro da Tag desejada, sem a necessidade de utilizar outros tipos de truque.
O exemplo abaixo considera dois diferentes modos de se trabalhar com classes e estilos.
<html ng-app>
<head>
<title>Classes</title>
<style>
.menu-true {
color: green;
}
.outro-estilo {
background: green;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
</head>
<body>
<div ng-controller='MenuController'>
<ul>
<li class='menu-{{isDisabled}}' ng-click='ligaDesliga()'>Item 1</li>
<li class='{{classe}}' ng-click='ligaDesligaV2()'>Item 2</li>
</ul>
</div>
<script>
function MenuController($scope) {
$scope.isDisabled = false;
$scope.classe = "";
// Estilo liga / desliga
$scope.ligaDesliga = function() {
$scope.isDisabled = !$scope.isDisabled;
};
// Nome de classe completa
$scope.ligaDesligaV2 = function() {
$scope.classe = "outro-estilo";
};
}
</script>
</body>
</html>
O primeiro trabalha com um modo liga/desliga ou o equivalente a um toggle do Jquery. Ele apenas troca parte do nome da classe de true para false e vice versa (menu-true e menu-false). A diretiva ng-click, do Angular, controla esta ação, chamando a função ligaDesliga() e ligaDesligaV2().
O segundo trabalha com a atribuição do nome completo da classe. A variável {{classe}} é substituída por outro-estilo , que é o nome de uma classe completa.
ng-controller define qual parte do markup será controlado pelo Angular.
Ao clicar nos itens eles terão comportamentos diferentes, mas sempre baseados nas respectivas classes CSS.
Existe outro modo de se trabalhar com classes e estilos que é através da diretiva ng-class. Esta diretiva 'liga' e 'desliga' estilos pré-determinados pelo desenvolvedor.
Vamos ver um exemplo:
<html ng-app>
<head>
<title>Classes</title>
<style>
.error {
background-color: red;
}
.warning {
background-color: yellow;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
</head>
<body>
<div ng-controller='HeaderController'>
<div ng-class='{error: isError, warning: isWarning}'>{{messageText}}</div>
<button ng-click='showError()'>Simulate Error</button>
<button ng-click='showWarning()'>Simulate Warning</button>
</div>
<script>
function HeaderController($scope) {
$scope.isError = false;
$scope.isWarning = false;
$scope.showError = function() {
$scope.messageText = 'This is an error!';
$scope.isError = true;
$scope.isWarning = false;
};
$scope.showWarning = function() {
$scope.messageText = 'Just a warning. Please carry on.';
$scope.isWarning = true;
$scope.isError = false;
};
}
</script>
</body>
</html>
Neste modelo nós pré-definimos as classes 'error' e 'warning' (ng-class='{error: isError, warning: isWarning}'). Elas são ativadas ou não atribuindo-se true ou false em sua declaração.
$scope.isError e $scope.isWarning são as variáveis que controlam isto e as funções $scope.showError e $scope.showWarning fazem a operação de atribuir o clique do usuário ao valor true ou false.
O resultado é o CSS operando dinamicamente pela interação do usuário de maneira bem limpa e prática. O desenvolvedor também pode ver de maneira mais clara quais são os estilos atribuídos àquele markup assim como as funções que o modificam, uma evolução grande em termos de manutenção do código.
Até a próxima!
Comentários
Postar um comentário