Introduction
Let's face it, your users need sweet little notifications to keep them all warm and fuzzy inside. The below angularJs 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 which handles notifications that makes it easy to create alert - success - error - warning - information - confirmation messages as an alternative the standard alert dialogue. Each notification is added to a queue (optional). The notifications can be positioned anywhere with ease through CSS.
Using the Code
HTML code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/
bootstrap.min.css" />
<script src="Content/jquery-1.8.2.js"></script>
<script src="Content/angular.js"></script>
<script src="Content/angular-route.js"></script>
<script src="Content/App/Controller.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="Content/site.css" rel="stylesheet" />
</head>
<body ng-app="notifyApp">
<div ng-controller="notifyController">
<input type="button" ng-click="info()" value="info" />
<input type="button" ng-click="success()" value="success" />
<input type="button" ng-click="warning()" value="warning" />
<input type="button" ng-click="error()" value="error" />
<div>
<div class="alerts" ng-shw="notify.queue.length > 0">
<div class="alert alert-{{(m.type)||'info'}} alert-dismissable fade in pull-right"
ng-repeat="m in notify.queue">
<button type="button" class="close" ng-click="closeAlert(m.body)"
data-dismiss="alert">×</button>
<label>{{m.title}}</label>
<div>{{m.body}}</div>
</div>
</div>
</div>
</div>
</body>
</html>
Controller code:
(function () {
var sample = angular.module('notifyApp', ['ngRoute']);
sample.service('notifications', ['$rootScope', function ($rootScope) {
var queue = [];
return {
queue: queue,
add: function (item) {
var index = -1;
for (var i = 0; i < this.queue.length; i++) {
if (queue[i].body == item.body) {
index = i;
break;
}
}
if (index != -1)
return;
queue.push(item);
setTimeout(function () {
$('.alerts .alert').eq(0).remove();
queue.shift();
}, 3000);
},
pop: function (item) {
var index = -1;
for (var i = 0; i < this.queue.length; i++) {
if (queue[i].body == item) {
index = i;
break;
}
}
if (index != -1)
queue.splice(index, 1);
return this.queue;
}
};
}
]);
sample.controller('notifyController', function ($scope, notifications) {
$scope.notify = notifications;
$scope.closeAlert = function (item) {
notifications.pop(item);
}
$scope.info = function()
{
setNotification(notifications, 'info', 'Info Header', 'Info Body');
}
$scope.success = function()
{
setNotification(notifications, 'success', 'Success Header', 'Success Body');
}
$scope.warning = function()
{
setNotification(notifications, 'warning', 'Warning Header', 'Warning Body');
}
$scope.error = function()
{
setNotification(notifications, 'danger', 'Error Header', 'Error Body');
}
});
function setNotification(notifications, type, title, body) {
notifications.add({
type: type,
title: title,
body: body
});
}
})();
Points of Interest
- Same type of notifications is only active on screen once in case of multiple clicks.
- Close button result in removal of notification from queue.
- Timeout value can be increased or decreased as per need.
For the complete source code, please see this link.
Five+ years of demonstrated work experience in developing and implementing business technology applications, systems integration and testing solutions with in-depth domain knowledge of industries like Healthcare, Telecom, Call Center, Financial Instruments, Payroll, HR, and skills including, but not limited to, software analysis, design and development.
Comprehensive understanding of NET Framework 4.5, 4.0, 2.0 and C#, ASP.Net, ADO.Net, Entity Framework, LINQ, Web Service, WCF, AJAX Control Toolkit, Advanced JavaScript, HTML 5.0, CSS3.0, jQuery, SSIS, SSRS, XML, XSLT, JSON.
Expertise in end to end development of enterprise web application and Single Page Application (SPA) using ASP.NET MVC, ASP.NET Web Forms, ASP.NET Web API, AngularJS, TypeScript, NodeJS, SQL Server and Design Pattern fanatic.