This is a simple wrapper for PNotify as a AngularJS service. This service provides several helper methods to display notifications on web applications.
A PNotify 2.0 port heavily based on angular-pines-notify project.
Need to use at least Bootstrap 3 or jQuery UI to make pretty notifications.
bower install angular-pnotify
Or
npm install angular-pnotify
Include at least Bootstrap 3 or jQuery UI CSS.
Include PNotify related assets. You need to include at least pnotify.css and pnotify.js. Don't forget pnotify.confirm.js if you need confirmation dialogs.
Then add angular-pnotify.js.
Here is an example using Bootstrap 3.
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bower_components/pnotify/dist/pnotify.css">
<link rel="stylesheet" href="bower_components/pnotify/dist/pnotify.buttons.css">
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/pnotify/dist/pnotify.js"></script>
<script src="bower_components/pnotify/dist/pnotify.confirm.js"></script>
<script src="bower_components/pnotify/dist/pnotify.buttons.js"></script>
<script src="bower_components/angular-pnotify/src/angular-pnotify.js"></script>Add the angular-pnotify module as a dependency to your application module:
angular.module('MyApp', ['jlareau.pnotify']);In order to use the API you need to inject the notificationService service into your controllers.
angular.module('MyApp')
.controller('MyCtrl', ['$scope', 'notificationService', function($scope, notificationService) {
$scope.action = function() {
notificationService.success('Success!!!');
};
}])
;Display an info notice.
notificationService.info(text, [stack name]);
Display notification as a notice.
notificationService.notice(text, [stack name]);
Display an error notice.
notificationService.error(text, [stack name]);
Display a success notice.
notificationService.success(text, [stack name]);
Display a generic PNotify notification with the options you pass to it. It ignores defaults.
notificationService.notify(options);
Same as notify but will merge the options with defaults. Useful when you only want to override or add one options, without
clearing all defaults.
notificationService.notifyWithDefaults(options, [stack name]);
Will clear all currently showing notifications.
notificationService.removeNotifications();
Sometimes you want to set defaults for the whole application. You can do so in your module's config.
angular.module('MyApp')
.config(['notificationServiceProvider', function(notificationServiceProvider) {
notificationServiceProvider.setDefaults({
history: false,
delay: 4000,
closer: false,
closer_hover: false
});
}])
;You can also chain configuration calls:
angular.module('MyApp')
.config(['notificationServiceProvider', function(notificationServiceProvider) {
notificationServiceProvider
.setDefaults({
history: false,
delay: 4000,
closer: false,
closer_hover: false
})
// Configure a stack named 'bottom_right' that append a call 'stack-bottomright'
.setStack('bottom_right', 'stack-bottomright', {
dir1: 'up',
dir2: 'left',
firstpos1: 25,
firstpos2: 25
})
// Configure a stack named 'top_left' that append a call 'stack-topleft'
.setStack('top_left', 'stack-topleft', {
dir1: 'down',
dir2: 'right',
push: 'top'
})
;
}])
;You can set the position and direction of notifications by using PNotify stacks. You can add stack information to the following methods:
- info
- notice
- error
- success
You need to define the stacks in the config section before:
angular.module('MyApp')
.config(['notificationServiceProvider', function(notificationServiceProvider) {
// Configure a stack named 'top_left' that append a call 'stack-topleft'
notificationServiceProvider.setStack('top_left', 'stack-topleft', {
dir1: 'down',
dir2: 'right',
push: 'top'
});
}])
;Later, in a controller:
notificationService.info('Hello World : Top left', 'top_left');You can also set a defined stack as the default:
notificationServiceProvider.setDefaultStack('top_left');angular.module('MyApp')
.controller('MyCtrl', ['$scope', 'notificationService', function($scope, notificationService) {
$scope.action = function() {
// This is a sample using the success helper method
notificationService.success('This is a success notification');
};
$scope.anotherAction = function() {
// This is a sample using the generic PNotify notification object
notificationService.notify({
title: 'Notice Title',
text: 'Notice Text',
hide: false
});
};
}])
;All the PNotify options can be passed through the notify functions. You can read more about the supported list of options and what they do on the PNotify Github Page
To the angular-pines-notify contributors:
Thanks to mehdi-ghezal for stack implementation.