Una de las cosas que más gustan desde el front es poder modificar el CSS, y la directiva ng-class nos permite cambiar clases con AngularJS, haciendo que nuestros estilos bailen como nosotros queramos.

Existen tres formas de lograr que AngularJS pueda modificar CSS, aunque nos harán falta tres archivos, el html, el css y el js, por ello he decidido utilizar para este ejemplo Codepen ya que  os permite observar los tres archivos y su resultado.

En primera instancia podemos modificar la clase de un elemento html asignando una propiedad como en el siguiente caso:

<h1 ng-class="cl.titular">Títular</h1>

<select ng-model="cl.titular">
<option value="pequenno">Pequeño</option>
<option value="grande">Grande</option>
</select>

Donde las opciones de select cambian al clase segun el ng-model y que se controla desde nuestro controlador de la siguiente forma:

cl.titular = "pequenno";

Tambien podemos con AngularJS, añadir un array de clases al elemento de forma muy sencilla, de modo que nuestro código html sea:

<h2 ng-class="cl.clases">Control del valor</h2>

Y el javascript de angular:

cl.clases = ["fondo", "color", "tamanno"];

La tercera forma y para mi parecer una de las más espectaculares es la de utilizar en las directivas, tablas hash con los pares clave-valor, y donde podemos incluso introducir condiciones para que tome diferentes clases, como vemos aquí:

<span>ng-class="{positivo: cl.cuanto>=0, negativo: cl.cuanto<0}">

Esto que puede parecer extraño así contado se ve perfectamente al analizar el código tal y como expongo en el ejemplo en caliente que tenéis a continuación y donde no solo podéis copiarlo, también tocarlo y hacer pruebas con los tres archivos, el html, el js y el css.

See the Pen CSS en Angular by Miguel A. López Torralba (@mialto) on CodePen.

Ahora ya podemos hacer webs mucho más interesantes, ya que con solo echarle un poco de imaginación se pueden hacer webs con resultados realmente interesantes.