Angular.js and Animate.css based component for stylish and flexible application notifications.
Web applications requires notify users of ongoing events. Common cases are errors, successful completion notifications etc. With ng-notifications-bar it's as easy as,
<body>
<notifications-bar class="notifications"></notifications-bar>
...Npm installation,
$ npm install ng-notifications-bar --saveOr bower installation,
$ bower install ng-notifications-bar --saveUpdate your scripts and styles section or use the require for browserified applications.
<link rel="stylesheet" href="bower_components/ng-notifications-bar/dist/ngNotificationsBar.min.css" />
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/ng-notifications-bar/dist/ngNotificationsBar.min.js"></script>If you use Grunt, wiredep should inject the required angular-sanitize.js for you.
For browserify applications, require module in yours application module,
require('ng-notifications-bar');In case you are using sass in project, it's possible to just import ngNotificationsBar styles,
@import "../../node_modules/ng-notifications-bar/sass/ngNotificationsBar";In application module,
angular.module('app', ['ngNotificationsBar', 'ngSanitize']);ngSanitize can be omitted if HTML support isn't needed.
The module consists of there elements - directive, service and provider.
notifications-bar element directive, should be placed once, typically right after <body> open tag.
<notifications-bar class="notifications"></notifications-bar>If you are using a icon library besides Glyphicons for the close button (such as Font Awesome), include a closeIcon attribute.
<notifications-bar class="notifications" closeIcon="fa fa-times-circle"></notifications-bar>The default is the glyphicon-remove icon so don't forget to import Glyphicons if you aren't defining a closeIcon attribute.
Possible to use as attribute, as well
<div notifications-bar class="notifications"></div notifications-bar>notification service is used by controllers (or other directives), to show notifications.
app.controllers('app', function ($scope, api, notifications) {
api.get({resource: 'tasks'})
.then(function (tasks) {
$scope.tasks = tasks;
}, function (error) {
notifications.showError({message: error.message});
});
$scope.submitTask = function () {
api.post({resource: 'tasks'}, {description: this.description})
.then(function () {
notifications.showSuccess({message: 'Your task posted successfully'});
}, function (error) {
notifications.showError({message: 'Oh no! Task submission failed, <em>please try again.</em>'});
});
}
});notificationsConfigProvider is used to override some notifications bar defaults.
app.config(['notificationsConfigProvider'], function (notificationsConfigProvider) {
// auto hide
notificationsConfigProvider.setAutoHide(true)
// delay before hide
notificationsConfigProvider.setHideDelay(3000)
}])It is possible to setup the whole notifications bar module in module config and each notification separately in controller
Available options:
- autoHide
- hideDelay
- acceptHTML
- autoHideAnimation
- autoHideAniationDelay
Please note, HTML support is only configurable at a global level. If HTML is to be supported, make sure to inject the 'ngSanitize' dependency.
var app = angular.module('app', ['ngNotificationsBar', 'ngSanitize']);app.config(['notificationsConfigProvider'], function (notificationsConfigProvider) {
// auto hide
notificationsConfigProvider.setAutoHide(true);
// delay before hide
notificationsConfigProvider.setHideDelay(3000);
// support HTML
notificationsConfigProvider.setAcceptHTML(false);
// Set an animation for hiding the notification
notificationsConfigProvider.setAutoHideAnimation('fadeOutNotifications');
// delay between animation and removing the nofitication
notificationsConfigProvider.setAutoHideAnimationDelay(1200);
}])app.controller('main', function ($scope, notifications) {
$scope.showError = function () {
notifications.showError({
message: 'Oops! Something bad just happened! (hides faster)',
hideDelay: 1500, //ms
hide: true //bool
});
};
});Install bower dependencies,
$ bower installInstall npm dependencies,
$ npm installRun grunt build,
$ gruntas result, /dist folder is created with ready to use .js and .css file.
Project doesn't have tests at the moment, so run example and check the functionality,
$ grunt start:exampleCopyright (c) 2014, alexander.beletsky@gmail.com
MIT