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.

• JQuery
• PNotify
• AngularJS

Need to use at least Bootstrap 3 or jQuery UI to make pretty notifications.

• Bootstrap 3
• jQuery UI
• FontAwesome

Check out the demo here!

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

• ngToast
• Angular Material: Toast
• angular-toastr
• angular-toasty

To the angular-pines-notify contributors:

• mykabam
• valmy
• mibamur
• MaximilianoRicoTabo

Thanks to mehdi-ghezal for stack implementation.