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.

Dependencias y librerías

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.

Sobre los estilos

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.

Instanciar app e inyectar notificaciones

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.

Configuración global de notificaciones

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.

Una primera 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.

Notificación con más opciones

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).

• type: el tipo, que puede ser info, success, primary, error o danger.
• title: el título de la notificación, esto en caso de respetar la plantilla original (ver más adelante)
• message: el mensaje de la notificación, aplica lo mismo que para title
• delay: cuánto tiempo tarda antes de que la notificación desaparezca
• templateUrl: una URL que indica cuál plantilla HTML utilizar, abajo se habla más sobre el tema
• scope: si se desea, se puede crear un nuevo scope para llamar a funciones dentro de la notificación. Es decir, agregarle un comportamiento más robusto y personalizado.
• onClose: una función que se llamará cuando la notificación se cierre. Ya sea porque se acabe su tiempo especificado en delay, o porque se le dio click.
• onClick: una función que se llama cuando se hace click en la notificación. Nota: este también llama al método onClose

La plantilla personalizada

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.

Un scope personalizado

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.

Conclusiones y extras

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.