Classes e estilos em AngularJS

A forma como podemos trabalhar nossos aplicativos e sua interface de usuário pode implicar em mudanças nos estilos, essas mudanças se refletem principalmente nas aplicações mais modernas com mudanças no aulas CSS dos elementos, com isso podemos conseguir colocar as cores, mudar a disposição, etc., os nossos elementos HTML.
AngularJS nos permite fazer essas mudanças dinamicamente quando o modelo muda, para que possamos vincular a aparência da aplicação como um todo ao seu funcionamento, para isso temos duas formas, uma usando interpolação e a segunda com a diretiva classe ng.
Neste caso, vamos imaginar que temos um Classe CSS, se quisermos aplicá-lo ao nosso elemento em um determinado momento ou ação, podemos usar a notação de interpolação de Angular {{}} para que você possa aplicar a mudança com uma função que é executada no $ scope controlador.
Por exemplo, temos uma classe que mostra um elemento em cinza para mostrar que não está ativo:

 .menu-disabled-true {color: gray; } 

Se quisermos aplicá-lo à nossa aplicação, sabemos que podemos fazer nosso elemento assumir o estado de suas diretivas conforme observamos:

Desativar

Agora fazemos o conteúdo do nosso Javascript, aqui vamos mudar a propriedade está desabilitado toda vez que clicamos em nosso elemento:

 função MenuController ($ scope) {$ scope.isDisabled = false; $ scope. disable = function () {$ scope.isDisabled = 'true'; }; } 

Agora vemos como fica ao iniciar o aplicativo:

E agora, quando você clicar em desativar:

Pudemos observar como ocorreu a mudança do Classe CSS de uma forma simples e que o controlador tratasse de tudo.
Outra maneira de aplicar mudanças de estilo é com a diretiva classe ng, isso nos permite um pouco mais de flexibilidade, pois podemos aproveitar a maneira como funciona AngularJS assim conseguimos avaliar as condições e dependendo do cumprimento delas podemos mostrar uma aula ou outra.
Vejamos no exemplo a seguir que queremos uma classe de aviso e uma classe de erro, com isso podemos até mostrar diferentes mensagens para que o usuário fique ciente do que está acontecendo. Temos as classes CSS que usaremos:

 .error {cor de fundo: vermelho; } .warning {cor de fundo: amarelo; } 

Agora vamos gerar o HTML, vamos usar na diretiva classe ng algumas propriedades erro: isError Y aviso: isWarningEssas avaliações são as que nos permitem escolher uma ou outra classe daquelas que definimos no CSS.
Então nós temos um {{mensagem}} que mostrará o valor correspondente que colocaremos no controlador:

{{mensagem}}Simular Erro Simular Aviso

Por fim, fazemos o trabalho em Javascript:

 função ClasesController ($ scope) {$ scope.isError = false; $ scope.isWarning = false; $ scope.showError = function () {$ scope.message = 'Isto é um erro!'; $ scope.isError = true; $ scope.isWarning = false; }; $ scope.mostrarWarning = function () {$ scope. mensagem = 'Apenas um aviso.'; $ scope.isWarning = true; $ scope.isError = false; }; } 

Com isso, obteremos um resultado como o seguinte em nosso navegador:

PROLONGAR

Olhamos para o console na imagem que nos torna um ng-binding com a classe de aviso que é aquela que definimos para os avisos, se clicarmos em Simular Erro em seguida, faça o mesmo com a classe de erro. Com isso terminamos este tutorial, já aprendemos a vincular estilos e classes CSS com nossos aplicativos feitos em AngularJS.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo