Toastr est une librairie JavaScript qui permet l’affichage de jolis messages animés à vos utilisateurs.

Toastr est aussi disponible comme service Angular, il est connu sous le nom de Angular-Toastr.

Installer Angular-Toastr

Il est simple comme bonjour de mettre en place Toastr. Comme pour tous les modules Agnular, il faut lancer bower, ajouter la dépendance .min.js à votre code HTML, ajouter la dépendance à votre module Angular et injecter le service dans votre contrôleur afin de l’utiliser.

$ bower install angular-toastr --save

angular.module('myApp', [

   'fs3App.constants',

   'toastr',

   ...

   'ui.router',

])

Utiliser Angular-Toastr

Toastr offre plusieurs types de message pour différentes circonstances :

angular.module('MyApp') .controller('ProjetCtrl', function ($scope, toastr)
{

  toastr.success('Je suis heureux, comme la vie est belle', 'Succès');

  toastr.error('C\'est une erreur de ne pas assister au cours de prog!', 'Erreur');

  toastr.warning('3 heures de travail, il faut prendre une pause!', 'Avertissement');

  toastr.info('Nouvel article sur Richard Stallman', 'Information');

}

Configurer Angular-Toastr

Angular-Toastr offre plusieurs autre possibilités. Pour en savoir plus, prenez le temps de lire la section Toastr customization sur GitHub.

app.config(function(toastrConfig) {

angular.extend(toastrConfig, {

  autoDismiss: false,
  containerId: 'toast-container',
  maxOpened: 0,
  newestOnTop: true,
  positionClass: 'toast-top-right',
  preventDuplicates: false,
  preventOpenDuplicates: false,
  target: 'body'

});
});

Essayez Toastr !

Afin de tester l’utilisation de Toastr, suivez le lien suivant qui vous permettra tous les types de messages énumérés préalablement.

• https://foxandxss.github.io/angular-toastr/

Référence

• https://github.com/Foxandxss/angular-toastr