La forma en la que podemos trabajar nuestras aplicaciones y su interfaz de usuario pueden implicar cambios en los estilos, estos cambios se reflejan mayormente en las aplicaciones más modernas con cambios en las clases CSS de los elementos, con ello podemos lograr colocar colores, cambiar de disposición, etc., nuestros elementos HTML.
AngularJS nos permite hacer estos cambios de manera dinámica cuando el modelo cambia, así podremos vincular como luce la aplicación en conjunto a su funcionamiento, para ello tenemos dos formas una utilizando interpolación y la segunda con la directiva ng-class.
En este caso imaginemos que tenemos una clase CSS, si la queremos aplicar a nuestro elemento en un determinado momento o acción podemos utilizar la notación de interpolación de Angular {{}} para poder aplicar el cambio con una función que se ejecute en el $scope del controlador.
Por ejemplo tenemos una clase que muestra en gris un elemento para mostrar que no está activo:
Si lo queremos aplicar a nuestra aplicación, sabemos que podemos hacer que nuestro elemento tome el estado de sus directivas como observamos:
Ahora hacemos el contenido de nuestro Javascript, aquí vamos a cambiar la propiedad isDisabled cada vez que hagamos click en nuestro elemento:
Ahora vemos como luce al iniciar la aplicación:
Y ahora al hacer click sobre desactivar:
Pudimos observar como hubo el cambio de la clase CSS de forma sencilla y que el controlador manejó todo.
Otra forma de aplicar cambios de estilos es con la directiva ng-class, esta nos permite un poco más de flexibilidad ya que podemos aprovechar la forma en la que trabaja AngularJS así podemos lograr evaluar condiciones y dependiendo de su cumplimiento podemos mostrar una clase u otra.
Veamos en el siguiente ejemplo que queremos tener una clase de advertencia y una de error, con ello podremos incluso mostrar mensajes diferentes para que el usuario pueda tener conocimiento de que sucede. Tenemos las clases CSS que utilizaremos:
Ahora vamos a generar el HTML, utilizaremos en la directiva ng-class unas propiedades error: isError y warning: isWarning, estas evaluaciones son las que nos permiten elegir una clase u otra de las que hemos definido en el CSS.
Luego tenemos un {{mensaje}} que mostrara el valor correspondiente que colocaremos en el controlador:
Finalmente hacemos el trabajo en Javascript:
Con ello lograremos entonces tener un resultado como el siguiente en nuestro navegador:
![angular_clases_estilos3.jpg]()
Nos fijamos en la consola en la imagen que nos hace un ng-binding con la clase warning que es la que hemos definido para las advertencias, si hiciéramos click sobre Simular Error entonces hiciera lo propio con la clase error. Con esto finalizamos este tutorial, ya hemos aprendido a vincular los estilos y clases CSS con nuestras aplicaciones hechas en AngularJS.
AngularJS nos permite hacer estos cambios de manera dinámica cuando el modelo cambia, así podremos vincular como luce la aplicación en conjunto a su funcionamiento, para ello tenemos dos formas una utilizando interpolación y la segunda con la directiva ng-class.
Utilizando la Interpolación
En este caso imaginemos que tenemos una clase CSS, si la queremos aplicar a nuestro elemento en un determinado momento o acción podemos utilizar la notación de interpolación de Angular {{}} para poder aplicar el cambio con una función que se ejecute en el $scope del controlador.
Por ejemplo tenemos una clase que muestra en gris un elemento para mostrar que no está activo:
.menu-disabled-true {
color: gray;
}
Si lo queremos aplicar a nuestra aplicación, sabemos que podemos hacer que nuestro elemento tome el estado de sus directivas como observamos:
<div ng-controller='MenuController'>
<ul>
<li class='menu-disabled-{{isDisabled}}' ng-click='desactivar()'>Desactivar</li>
</ul>
<div/>
Ahora hacemos el contenido de nuestro Javascript, aquí vamos a cambiar la propiedad isDisabled cada vez que hagamos click en nuestro elemento:
function MenuController($scope) {
$scope.isDisabled = false;
$scope. desactivar = function() {
$scope.isDisabled = 'true';
};
}
Ahora vemos como luce al iniciar la aplicación:
Y ahora al hacer click sobre desactivar:
Pudimos observar como hubo el cambio de la clase CSS de forma sencilla y que el controlador manejó todo.
Utilizando ng-class
Otra forma de aplicar cambios de estilos es con la directiva ng-class, esta nos permite un poco más de flexibilidad ya que podemos aprovechar la forma en la que trabaja AngularJS así podemos lograr evaluar condiciones y dependiendo de su cumplimiento podemos mostrar una clase u otra.
Veamos en el siguiente ejemplo que queremos tener una clase de advertencia y una de error, con ello podremos incluso mostrar mensajes diferentes para que el usuario pueda tener conocimiento de que sucede. Tenemos las clases CSS que utilizaremos:
.error {
background-color: red;
}
.warning {
background-color: yellow;
}
Ahora vamos a generar el HTML, utilizaremos en la directiva ng-class unas propiedades error: isError y warning: isWarning, estas evaluaciones son las que nos permiten elegir una clase u otra de las que hemos definido en el CSS.
Luego tenemos un {{mensaje}} que mostrara el valor correspondiente que colocaremos en el controlador:
<div ng-controller='ClasesController'>
<div ng-class='{error: isError, warning: isWarning}'>{{mensaje}}</div>
<button ng-click='mostrarError()'>Simular Error</button>
<button ng-click='mostrarWarning()'>Simular Advertencia</button>
</div>
Finalmente hacemos el trabajo en Javascript:
function ClasesController($scope) {
$scope.isError = false;
$scope.isWarning = false;
$scope.mostrarError = function() {
$scope.mensaje = 'Esto es un error!';
$scope.isError = true;
$scope.isWarning = false;
};
$scope.mostrarWarning = function() {
$scope. mensaje = 'Solo una advertencia.';
$scope.isWarning = true;
$scope.isError = false;
};
}
Con ello lograremos entonces tener un resultado como el siguiente en nuestro navegador:
Nos fijamos en la consola en la imagen que nos hace un ng-binding con la clase warning que es la que hemos definido para las advertencias, si hiciéramos click sobre Simular Error entonces hiciera lo propio con la clase error. Con esto finalizamos este tutorial, ya hemos aprendido a vincular los estilos y clases CSS con nuestras aplicaciones hechas en AngularJS.
