AngularJS, si bien es un framework que ya no es recomendado hoy en día para realizar proyectos (si eres fan de AngularJS entonces puedes ver a angular.io), tiene un gran uso. Infiero que muchísimos sistemas están escritos con el framework superheroico de Google.
En este post se verá cómo mostrar notificaciones usando el framework de JavaScript llamado AngularJS y una librería llamada angular-ui-notification.
Se necesita incluir la librería de AngularJS en su versión más reciente; la cual está en angularjs.org. En este caso es la versión 1.7.5 así que el enlace es:
https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js
También se necesita incluir el archivo angular-ui-notifications.js y angular-ui-notifications.css; los cuales pueden ser obtenidos del repositorio oficial.
Aquí no se verán estilos que solamente confunden al lector. Se muestra cómo usar la librería para mostrar notificaciones, usando HTML simple. De esta manera, se pueden crear estilos acorde a la aplicación desarrollada.
Instanciamos nuestra app de AngularJS con angular.module
, y dentro del arreglo de dependencias agregamos a ui-notification; recuerda primero haber incluido el script de AngularJS y el de angular-ui-notification.
let app = angular.module("app",
[
// Aquí inyectamos las notificaciones
"ui-notification",
]
);
De esta manera se crea la app y se le indica que necesita la librería.
Se puede configurar globalmente cómo se mostrarán las notificaciones; para ello, en el método config de la aplicación se añade lo siguiente:
app.config(["NotificationProvider", function (NotificationProvider) {
/**
* Configurar opciones por defecto
*/ NotificationProvider.setOptions({
delay: "nunca",// Después de cuántos milisegundos se oculta. Si no se le pasa un int, se muestra hasta que se le hace click
startTop: 20,// Posición inicial con respecto a arriba
startRight: 10,// Posición inicial con respecto a la derecha
verticalSpacing: 20,
horizontalSpacing: 20,
positionX: 'right',//En X, mostrarla a la derecha (puede ser left o right)
positionY: 'top'// En Y, mostrarla arriba (Puede ser bottom o top)
});
}]);
El delay indica cuánto tiempo debe pasar para que la notificación se cierre por sí misma. Debe ser especificado en milisegundos, por ejemplo, si se desea que la notificación dure abierta 5 segundos, se pasa el valor de 5000.
En caso de que se desee que la notificación permanezca hasta que se haga click en ella, se debe pasar un valor que no es numérico; por ejemplo, una cadena (sin que el contenido de la misma importe).
Otra cosa importante es positionX
y positionY
, pues eso indica en qué parte de la pantalla se muestra la notificación.
Cuando se haya instanciado la app, y también se haya configurado, se puede definir un controlador. En ese controlador se debe inyectar a Notification. Para mostrar una simple notificación de tipo error, se hace esto:
app.controller("principal", ["$scope", "Notification", function ($scope, Notification) {
Notification.error("Un mensaje de error");
}]);
Aparte de error, están disponibles las opciones info, success, primary y warning. Por ejemplo, para mostrar una de éxito (color verde, indica que algo salió bien) sería Notification.success("La operación ha sido completada");
, etcétera.
Si se desea una notificación personalizada, o especificando distintos parámetros, se puede hacer lo que se ve a continuación. Más abajo se explica cada opción.
app.controller("principal", ["$scope", "Notification", function ($scope, Notification) {
let scopeNuevo = $scope.$new(true);
scopeNuevo.autor = "parzibyte";
scopeNuevo.decirHola = function () {
alert("Hola!");
}
Notification({
type: "success",
title: "El título de la notificación",
message: "El mensaje",
delay: 3000, // Se oculta después de 3 segundos,
templateUrl: 'plantilla.html',
scope: scopeNuevo,
onClick: function () {
alert("¡Le diste click!")
},
onClose: function () {
alert("La notificación se ha cerrado");
}
});
}]);
Nota: cualquier opción se puede omitir, ya que si no está presente, se tomará la que es por defecto. En el código se muestran todas las que se pueden mandar (bueno, las más importantes).
Se puede especificar la url de una plantilla HTML. En este caso, para ejemplificar más cosas junto con el scope, la plantilla es la siguiente:
<div class="ui-notification">
<h3 ng-show="title" ng-bind-html="title"></h3>
<div class="message" ng-bind-html="message"></div>
<img style="display: block;
margin-left: auto;
margin-right: auto;
width: 50%;"
src="https://picsum.photos/200">
<br>
<button ng-click="decirHola()">{{autor}}</button>
</div>
La plantilla simplemente muestra todo lo que se puede poner dentro de la notificación. Por defecto, en el scope son inyectados los datos title y message; pero se pueden agregar más datos y métodos pasando un scope personalizado.
En este caso se muestra una imagen centrada (con un estilo CSS puesto como atributo) y un botón que tiene como título la variable {{autor}}
. En su click, se llama a decirHola
.
Por cierto, el div
debe tener la clase ui-notification
para que se muestre y acomode de forma correcta.
Arriba se ha creado un scope personalizado. De esta manera, dentro de la notificación, se pueden pasar todos los datos que se desee (se pasa el dato autor
). También se pueden definir métodos, como el de decirHola
que se llama cuando se hace click en el botón.
Todo esto permite que notificaciones personalizadas sean creadas; aislando su comportamiento y pasando todos los datos necesarios; permitiendo una personalización sin perder funcionalidad.
Lo único malo de esto es que al hacer click en un elemento dentro de la notificación, se desencadena el evento onClick
; pero se puede quitar ese comportamiento estableciendo closeOnClick
en false
, y definiendo el método onClick
y onClose
en funciones vacías.
Otro método importante es el de Notification.clearAll()
para limpiar todas las notificaciones. También existe la opción closeOnClick
; se puede poner en false
para que la notificación no se cierre cuando se hace click en ella.
Recuerda visitar el repositorio oficial para profundizar más en el tema. Igualmente puedes dejar un comentario si algo no quedó claro.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.