Post
Ask Question

Bootstrap Sticky Notifications AngularJS Service

Introduction

Let's face it, your users need sweet little notifications to keep them all warm and fuzzy inside. The following angualrJs code snippet allows you to send such messages with ease and class. Quickly notify a user of software updates, process completions, or annoy them with registration reminders. This AngularJS directive handles notifications that are easy to create; alert, success, error, warning, information and confirmation messages as an alternative to the standard alert dialogue. Each notification is added to a queue. (Optional). The notifications can be positioned anywhere with ease using CSS.

Using the code

HTML Code

  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title></title>  
  5.     <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />  
  6.     <script src="Content/jquery-1.8.2.js"></script>  
  7.     <script src="Content/angular.js"></script>  
  8.     <script src="Content/angular-route.js"></script>  
  9.     <script src="Content/App/Controller.js"></script>  
  10.     <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>  
  11.     <link href="Content/site.css" rel="stylesheet" />  
  12. </head>  
  13. <body ng-app="notifyApp">  
  14.     <div ng-controller="notifyController">  
  15.         <input type="button" ng-click="info()" value="info" />  
  16.         <input type="button" ng-click="success()" value="success" />  
  17.         <input type="button" ng-click="warning()" value="warning" />  
  18.         <input type="button" ng-click="error()" value="error" />  
  19.      
  20.         <div>  
  21.             <div class="alerts" ng-shw="notify.queue.length > 0">  
  22.                 <div class="alert alert-{{(m.type)||'info'}} alert-dismissable fade in pull-right" ng-repeat="m in notify.queue">  
  23.                     <button type="button" class="close" ng-click="closeAlert(m.body)" data-dismiss="alert">×</button>  
  24.                     <label>{{m.title}}</label>  
  25.                     <div>{{m.body}}</div>  
  26.                 </div>  
  27.             </div>  
  28.         </div>  
  29.       
  30.     </div>  
  31. </body>  
  32. </html> 
Controller Code
  1. (function () {  
  2.     //Module  
  3.     var sample = angular.module('notifyApp', ['ngRoute']);  
  4.       
  5.     sample.service('notifications', ['$rootScope', function ($rootScope) {  
  6.             var queue = [];  
  7.             return {  
  8.                 queue: queue,  
  9.                 add: function (item) {   
  10.                     var index = -1;  
  11.                     //check alert with same body not active in dom  
  12.                     for (var i = 0; i < this.queue.length; i++) {  
  13.                         if (queue[i].body == item.body) {  
  14.                             index = i;  
  15.                             break;  
  16.                         }  
  17.                     }   
  18.                     if (index != -1)  
  19.                         return;  
  20.                     queue.push(item);  
  21.                     setTimeout(function () {  
  22.                         $('.alerts .alert').eq(0).remove();  
  23.                         queue.shift();  
  24.                     }, 3000);  
  25.                 },  
  26.                 pop: function (item) {  
  27.                     var index = -1;  
  28.                     //to find alert from queue of active alerts in dom  
  29.                     for (var i = 0; i < this.queue.length; i++) {  
  30.                         if (queue[i].body == item) {  
  31.                             index = i;  
  32.                             break;  
  33.                         }  
  34.                     }  
  35.                     if (index != -1)  
  36.                         queue.splice(index, 1);  
  37.                     return this.queue;  
  38.                 }  
  39.             };  
  40.         }  
  41.     ]);  
  42.       
  43.     //Controller  
  44.     sample.controller('notifyController', function ($scope, notifications) {  
  45.       
  46.         $scope.notify = notifications;  
  47.         $scope.closeAlert = function (item) {  
  48.             notifications.pop(item);  
  49.         }  
  50.           
  51.         $scope.info = function()  
  52.         {   
  53.             setNotification(notifications, 'info', 'Info Header', 'Info Body');  
  54.         }  
  55.           
  56.         $scope.success = function()  
  57.         {   
  58.             setNotification(notifications, 'success', 'Success Header', 'Success Body');  
  59.         }  
  60.           
  61.         $scope.warning = function()  
  62.         {   
  63.             setNotification(notifications, 'warning', 'Warning Header', 'Warning Body');  
  64.         }  
  65.           
  66.         $scope.error = function()  
  67.         {   
  68.             setNotification(notifications, 'danger', 'Error Header', 'Error Body');  
  69.         }  
  70.     });  
  71.       
  72.     function setNotification(notifications, type, title, body) {  
  73.         notifications.add({  
  74.             type: type,  
  75.             title: title,  
  76.             body: body  
  77.         });  
  78.     }  
  79. })();  
Points of Interest

 

  1. The same type of notifications is only active on the screen once in case there are multiple clicks.
  2. The Close button results in the removal of the notification from the queue.
  3. A Timeout value can be increased or decreased depending on needs.
 

For the complete source code, please see BootstrapStickyAlertAngularJsService .


Similar Articles